はじめに

フロントエンドが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

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

App.js

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.css

.App {
  padding-top: 100px;
  text-align: center;
}

参考サイト