Edited at

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

More than 1 year has passed since last update.

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


前提条件


  • 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>