Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have 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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away