Node.js
Express

Express Generator を使った Node.js + Express.js の環境構築手順

いつも忘れてしまうので、自分用のメモです。

前提条件

  • macOS High Sierra
  • 以下のツールがインストール済みである
    • Homebrew
    • nodebrew

下準備

ターミナル.app を起動し、以下のコマンドを入力する

// nodebrew自身を最新版にする
$ nodebrew selfupdate

// 今、インストールされている node.js のバージョンと、インストールできる node.js のバージョンを確認する
$ nodebrew ls-all

//最新の node.js をバイナリーインストールする
$ nodebrew install-binary <version>

// インストールした node.js を使用できるようにする
$ nodebrew use <version>

// 古い node.js が必要ない場合はアンインストールする
$ nodebrew uninstall <version>

// node.js と npm のバージョンを確認する
$ node -v
$ npm -v

// npm のグローバルパッケージをアップデートする
$ npm update --global

// Express Generator をグローバルインストールする(最初の1回だけでOK)
$ npm install express-generator --global

プロジェクト作成

// プロジェクトを作成したいフォルダに移動する
$ cd tmp

// Express Generator でプロジェクトを作成する
// プロジェクト名は任意。ここでは myapp とする
// テンプレートエンジンは ejs とした。オプションなしのデフォルトは pug (旧jade)になる。
$ express myapp --view=ejs

// プロジェクトフォルダに移動する
$ cd myapp

// Nodeモジュールをインストールする
$ npm install

// アプリケーションを起動する
$ npm start

// ブラウザでアプリケーションにアクセスする
http://localhost:3000/

スクリーンショット 2017-12-15 17.46.43.png

上記画面が表示されていれば、環境構築が完了。

次回は、heroku.com へのデプロイ(配置)手順の予定。

参考

主要ファイルの中身

/package.json
{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.18.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.15.5",
    "morgan": "~1.9.0",
    "serve-favicon": "~2.4.5"
  }
}
/app.js
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', 'ejs');

// 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');
});

module.exports = app;
/routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;
/views/index.ejs
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>