はじめに
フロントエンドが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をテキストエディタで開いて下記のコードをコピペする。
server.js
constexpress=require('express');constpath=require('path');constbodyParser=require('body-parser');constPORT=8000;constapp=express();app.use(bodyParser.json());app.use(express.static(path.join(__dirname,'../client/my-app/build')));console.log(__dirname)app.listen(PORT,()=>{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
App.js
importReactfrom'react';import'./App.css';import{Button}from'@material-ui/core';importCheckCircleOutlineIconfrom'@material-ui/icons/CheckCircleOutline';functionApp(){return(<divclassName="App"><Buttonvariant="contained"color="primary"><CheckCircleOutlineIcon/>pleaseclick!</Button>
</div>
);}exportdefaultApp;App.css
.App{padding-top:100px;text-align:center;}