Help us understand the problem. What is going on with this article?

Node.jsとExpressとPugを利用する設定方法

More than 3 years have passed since last update.

目的

Node.jsを利用したアプリケーションを作る際の一通りの流れのメモ

環境

  • node 4.4.3
  • npm 2.15.1
  • Windows 8.1

環境構築

まずプロジェクト用フォルダの作成を行います。

commandprompt
mkdir Hoge

Express-generatorを利用

Expressはルーティング機能が入っているモジュールです。Express-generatorでは、プロジェクトのひな型をジェネレートしてくれるのでそれを利用します。

commandprompt
npm i -g express-generator

次に、ジェネレータでプロジェクトのひな型を作成します。
--gitは.gitignoreを作成してくれます。注意として、Hogeの一つ上の階層で以下のコマンドを実行しなければなりません。また、テンプレートエンジンはデフォルトではjadeになります。私はpug(旧jade)を利用するのでそのままテンプレートエンジンはjadeにし、後で拡張子を変えます。

commandprompt
express --git Hoge

package.jsonの変更

ここの章に関しては、人それぞれ作りたいで内容が変わるので一例としてみてください。私の場合は、electronで何かしようと思っていたので、electronが入っています。また、pug(旧jade)を利用するのでpugも入れています。

package.json
{
  "name": "CommentViewer",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "cheerio": "^0.20.0",
    "electron-packager": "^7.0.1",
    "electron-prebuilt": "^0.37.7",
    "pug": "^2.0.0-alpha6",
    "pug-cli": "^1.0.0-alpha1",
    "request": "^2.72.0"
  }
}

その後、npm iで必要なモジュールを入れていきましょう。

commandprompt
cd Hoge
npm i

views内のファイルの拡張子の変更

viewsの中にある*.jadeファイルをすべてpugにします。

commandprompt
cd views
mv error.jade error.pug
mv index.jade index.pug
mv layout.jade layout.pug
cd ..

app.jsの変更

次に、app.jsに記述されているview engineをjadeからpugに変更します。

app.js(before)
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

を以下に変更

app.js(after)
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

サーバの起動

次に、サーバの起動を行います。

commandprompt
npm start

起動後は以下のURLにアクセスすると以下の図が表示されると思います。

http://localhost:3000/

1.png

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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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