html, js, cssでReactアプリを配信し、APIを提供するexpressサーバーを実装

西田 雅博 · 西田 雅博 · commit 5d53f86ec41c · 2016-10-03T16:23:57.000+09:00
diff --git a/package.json b/package.json
@@ -3,16 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "npm-run-all": "^3.1.0",
     "react-scripts": "0.6.1"
   },
   "dependencies": {
+    "express": "^4.14.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start:dev": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  }
+    "eject": "react-scripts eject",
+    "server": "node server/server.js",
+    "dev": "npm-run-all -p server start:dev",
+    "start": "npm-run-all -s build server"
+  },
+  "proxy": "http://localhost:3001"
 }
diff --git a/server/server.js b/server/server.js
@@ -0,0 +1,22 @@
+const express = require('express');
+const app = express();
+
+// ポートの指定
+app.set('port', process.env.PORT || 3001);
+
+// html, js, cssの静的ファイル
+var clientPath = __dirname.replace("/server", "/build");
+app.use('/', express.static(clientPath));
+
+// GET /todos でTODOを返す
+app.get('/todos', (req, res, next) => {
+  res.json([
+    { id: 0, text: 'do something' },
+    { id: 1, text: 'learn react'}
+  ]);
+});
+
+// 指定したポートでリクエスト待機状態にする
+app.listen(app.get('port'), () => {
+    console.log('server listening on port :' + app.get('port'));
+});
diff --git a/src/App.js b/src/App.js
@@ -3,7 +3,26 @@ import logo from './logo.svg';
 import './App.css';
 
 class App extends Component {
+  
+  constructor(props) {
+    super(props);
+    this.state = {
+      todos: []
+    };
+  }
+  
+  componentDidMount() {
+    fetch('/todos')
+      .then(response => {
+        console.log(response);
+        return response.json();
+      })
+      .then(todos => this.setState({ todos: todos }))
+      .catch(e => console.log(e));
+  }
+  
   render() {
+    console.log('todos', this.state.todos);
     return (
       <div className="App">
         <div className="App-header">
@@ -13,6 +32,14 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <div>
+          <h1>todos</h1>
+          <ol>
+            {this.state.todos.map(todo => (
+              <li key={todo.id}>{todo.text}</li>
+            ))}
+          </ol>
+        </div>
       </div>
     );
   }
