node express + react 開発環境作成手順(自分メモ)

サーバアプリは “node” + “express"、クライアントアプリには "React” を使用した場合の開発環境を構築した時の手順を記載します。あくまでも自分用メモです。

概要

大体の構成

  • サーバ:
    ”node" + “express"。

  • クライアント:
    “React"。クライアントのビルドに "webpack"。JSトランスパイラは "babel"。その他 CSS のビルドに "style-loader"、また、ビルドしたReact JSファイルを読み込む index.htmlを生成してくれるプラグインには "html-webpack-plugin” を利用する。

大まかな流れ

  1. node + express-generator をインストール
  2. express 開発環境を作成
  3. react インストール
  4. webpack 導入
  5. babel 導入
  6. style-loader 導入
  7. html-webpack-plugin 導入

サーバアプリ開発環境の構築

1) node + express-generator をインストール

最初に node をインストール。nodebrew を使用すると吉。
続いて、express-generator をグローバルにインストール。

$ npm install express-generator -g

2) express 開発環境を構築

express-generator でサーバアプリ開発環境の雛形を作成。
今回は、HTMLテンプレートエンジンに “pug” を指定。(実際は使用しないかもしれないけど一応あると便利かも)

$  express [app-name] --view=pug

これで、[app-name] ディレクトリ配下に、node + express 開発環境の雛形が生成され、最低限のサーバアプリ開発環境ができた。あとは、自分の必要に応じて、".gitignore" などを作ったり、EsLint のセットアップをすること。

クライアントアプリ開発環境を追加する

3) reacインストール

$ npm install --save react react-dom

4) webpack 導入

$ npm install --save-dev webpack

5) Babel を導入

# webpack から babel を利用する場合の基本モジュール
$ npm install --save-dev babel-loader babel-core

# React をとトランスパイルするモジュール
$ npm install --save-dev babel-cli babel-preset-react

# Es2015 をトランスパイルするためのもの
$ npm install --save-dev babel-preset-es2015

babel の設定ファイル “.babel.rc” を作成

$ echo '{ "presets": ["react", "es2015"] }' > .babelrc
$ cat .babelrc

{ "presets": ["react", "es2015"] }

ここで、babel で js をトランスパイルするための webpack 設定をおこなう。

$ vim webpack.config.js

ここまでの webpack.config.js の中身は次のとおり。

var path = require('path');

module.exports = {
  entry: './client/src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

6) style-loader 導入

$ npm install --save css-loader

webpack.config.js に下記の loader を追加。

module: {
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ['style-loader', 'css-loader'],
      },
    ],
  },

7) html-webpack-plugin 導入

$ npm install -save-dev html-webpack-plugin

index.html の元となるテンプレ “client/template/index.ejs” を作成。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id='app'></div>
  </body>
</html>

あとは、webpack.config.js に html-webpack-plugin の設定を追加する。

  plugins: [
    new HtmlWebpackPlugin({
      title: 'ngzm uploader',
      template: './client/template/index.ejs',
    }),
  ],

まとめ

最終的な webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './client/src/App.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
  },
  devtool: 'inline-source-map',
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'ngzm uploader',
      template: './client/template/index.ejs',
    }),
  ],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

なお今回は、"webpack-dev-server" は利用していませんが、これも便利そうなので次回は導入したいと思います。

参考

以上。