はじめに
フロントエンドがReact(Material UI)、バックエンドがNode.js expressのアプリを構築することがあったので、(何番煎じか分かりませんが)備忘録に手順を残します。
環境
- Windows 10
- Node.js v12.16.3
- npm 6.14.4
- yarn 1.22.4
手順
ディレクトリ作成
# アプリのコードを管理するディレクトリを作成
mkdir app
cd app
# クライアント、サーバーのコードを配置するディレクトリを作成
mkdir client server
フロントエンド:React, Material UI の導入
cd client
npx create-react-app my-app ※my-app=アプリ名 ※npxはnpm 5.2 から利用できるパッケージランナーツール
cd my-app
yarn add @material-ui/core --save
# アプリ内でアイコンを使用したい場合はこれもインストールする。回線が遅いとインストール時にタイムアウトが発生する可能性があるため、タイムアウトの時間を長めに設定しておく。
yarn add @material-ui/icons --save --network-timeout 1000000000
※動作確認は後ほど実施
バックエンド:express の導入
cd ../..
cd server
npm init (対話式で色々と入力するものがある。こだわりなければ全てEnterでよい。)
npm install express --save
type nul > server.js (macではtouch server.js かな? 単にsever.jsというファイルを作成しているだけ。)
server.jsをテキストエディタで開いて下記のコードをコピペする。
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
// Reactのアプリ名によってはディレクトリ名を一部変更する
app.use(express.static(path.join(__dirname, '../client/my-app/build')));
app.listen((process.env.PORT || 8000), () => {
console.log(`Listening on port ${PORT}`);
});
動作確認
フロントエンド
- 開発用サーバーの起動
cd client/my-app
yarn start
http://localhost:3000 にアクセスしてこのような画面が表示されれば成功です。
yarn start
を実行中にApp.jsなどを変更して保存すると自動でコンパイルをしてページも自動でリロードされます。
フロントの開発中は yarn start
で開発用サーバーを起動させつつ、バックエンドのexpressのサーバーも起動させてREST APIの呼び出しをするのが良いと思います。
- ビルド
コードをビルドして、静的なファイル(html, jsファイルなど)を出力します。
yarn build
デフォルトでは app/client/my-app/build
にビルドされたファイルが出力されます。
このフォルダをexpressのstaticフォルダとして設定しておくと、 http://localhost:8000 で表示することが出来ます。
バックエンド
- サーバー起動
cd server
node server.js
http://localhost:8000 にアクセスして、http://localhost:3000 と同様の画面が表示されれば成功です。
おまけ
Material UIの Button component Icon componentを組み合わせた例です。
Material UIのIconの参照先: https://material.io/resources/icons/?icon=check_circle_outline&style=baseline
import React from 'react';
import './App.css';
import { Button } from '@material-ui/core';
import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
function App() {
return (
<div className="App">
<Button variant="contained" color="primary">
<CheckCircleOutlineIcon />
please click!
</Button>
</div>
);
}
export default App;
.App {
padding-top: 100px;
text-align: center;
}