17
23

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-15

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

前提条件

  • 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>
17
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
23