node.js+React CMS開発-サーバー雛形を作成

CMS開発シリーズの続きです

今回は Expressのプロジェクト作成とviewエンジンにReactを使用するテンプレートを作成します

開発環境

macOS High Sierra(v10.13)でJavaScript開発環境を整える
各ソフトウェアのバージョンはこの時点で最新にすると以下の通り

node.js v9.2.0

$ nodebrew ls
$ nodebrew ls
v8.6.0
v8.7.0
v8.8.1
v9.0.0
v9.1.0
v9.2.0

current: v9.2.0
$ node -v
v9.2.0

mongodb 3.4.9

$ mongo
MongoDB shell version v3.4.10
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.4.9
> db.version()
3.4.9
>

express プロジェクト作成

$ express --version
4.15.5
$ express nexpress
$ cd ~/
$ express nexpress

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : nexpress
   create : nexpress/package.json
   create : nexpress/app.js
   create : nexpress/public
   create : nexpress/routes
   create : nexpress/routes/index.js
   create : nexpress/routes/users.js
   create : nexpress/views
   create : nexpress/views/index.jade
   create : nexpress/views/layout.jade
   create : nexpress/views/error.jade
   create : nexpress/bin
   create : nexpress/bin/www
   create : nexpress/public/javascripts
   create : nexpress/public/images
   create : nexpress/public/stylesheets
   create : nexpress/public/stylesheets/style.css

   install dependencies:
     $ cd nexpress && npm install

   run the app:
     $ DEBUG=nexpress:* npm start

初期パッケージインストール

基本環境となる依存パッケージをインストールします。現時点で考えられるものだけをインストール。機能開発時に各々で必要なパッケージを導入していきます。

express-react-views

viewエンジンはReactにする

 $ npm install express-react-views react react-dom --save
 npm notice created a lockfile as package-lock.json. You should commit this file.
 + react@16.1.1
 + react-dom@16.1.1
 + express-react-views@0.10.4
 added 133 packages in 7.6s

mongoose

mongodbをODM化するミドルウェア

$ npm install mongoose --save
+ mongoose@4.13.2
added 28 packages in 3.995s

passport

ユーザー認証はpassportを使う（strategyは該当機能開発時に都度導入）

$ npm install passport --save
+ passport@0.4.0
added 3 packages in 1.871s

pagkage.json

dev用のサーバー起動スクリプトもscriptsに追加

{
  "name": "nexpress",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "dev": "DEBUG=nexpress:* node-dev ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.15.5",
    "express-react-views": "^0.10.4",
    "jade": "~1.11.0",
    "mongoose": "^4.13.2",
    "morgan": "~1.9.0",
    "passport": "^0.4.0",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "serve-favicon": "~2.4.5"
  }
}

アプリケーション雛形を作成

app.js に view engineをReact仕様にする設定を追加、express-generatorで作成されたjade環境は削除します。またviews/以下の .jade を .jsxにリネームして中身も変更します。

jade 削除

$ npm uninstall jade
removed 44 packages in 1.096s

.jade を .jsxにrename

views
├── error.jsx
├── index.jsx
└── layout.jsx

app.js

viewにReactを使用する

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');


var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error',{title:"Error Page"});
});

module.exports = app;

views/layout.jsx

ページレイアウトのデフォルト。デザインおよび要素の追加はは後ほど整えるとして以下のような初期設定(タイトル表示と現存するRouteコントローラへのリンク）をする

var React = require('react');

class Layout extends React.Component {
  render() {
    return (
      <html>
        <head><title>{this.props.title}</title></head>
        <body>
          <header>
            <h1>nexpress</h1>
            <nav>
              <ul>
                <li><a href="/">index</a></li>
                <li><a href="/users">users</a></li>
              </ul>
            </nav>
          </header>
          {this.props.children}
        </body>
      </html>
    );
  }
}

module.exports = Layout;

views/index.jsx

トップページ
タイトルを表示するだけのシンプルなテンプレート

var React = require('react');
var Layout = require('./layout');

class Index extends React.Component {
  render() {
    return (
      <Layout title={this.props.title}>
        <div>
          <h2>{this.props.title}</h2>
        </div>
      </Layout>
    );
  }
}

module.exports = Index;

views/error.jsx

express-generatorでデフォルト作成された error.jadeに習って同じような表示を継承

var React = require('react');
var Layout = require('./layout');

class Error extends React.Component {
  render() {
    return (
      <Layout title={this.props.title}>
        <div>
          <h1>{this.props.message}</h1>
          <h2>{this.props.error.status}</h2>
          <pre>
            {this.props.error.stack}
          </pre>
        </div>
      </Layout>
    );
  }
}

module.exports = Error;

起動&確認

起動

npm startもしくは上で追加したdev用スクリプトnpm run dev

$ cd ~/nexpress
$  $ npm start
nexpress@0.0.0 start /Users/haranaga/nexpress
node ./bin/www

ブラウザで確認

URLにアクセスして以下画面が表示されればOK

http://localhost:3000/

f:id:ichi-bit:20171115163310p:plain

これでnode.js+React 環境のアプリケーションの雛形ができました。ソースはこちら(リポジトリのタグ template-react-view)

github.com

つづく

JavaScriptだけでWebサイト開発

node.js + Express + mongodb系 + React でサービスを作るメモ

目次