読者です 読者をやめる 読者になる 読者になる

dev.kokushin

HTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。

Node.js+Express+EJS+HerokuでWebアプリケーション開発 その4

f:id:kokushin:20160420111511p:plain

前回は、「EJSを使ってHTMLに変換して出力する」までを学習しました。
今回はExpressのテンプレート出力を行ってくれる「express-generator」の使い方をご紹介します。

「express-generator」とは

Expressのテンプレートを出力してくれるモジュールです。
毎回手動でファイルを用意する手間が省けるので、楽ちんです。

インストール

グローバルインストールします。

$ sudo npm install express-generator -g

エラー等出力されなければインストール完了です。

プロジェクトの作成

$ mkdir express_app && cd express_app

任意の場所にディレクトリを作成して移動しておきます。

Expressコマンド!

$ express

ファイルが存在している場合は上書きするか聞かれるので、Enterで実行。
あっという間にExpressのテンプレートファイルが出力されます。

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www

ちなみにデフォルトのテンプレートエンジンは「Jade」ですが、Expressコマンドに「-e」オプションを付けて実行することで「EJS」に変更することが可能です。

$ express -e

必要なモジュールのインストール

Expressのテンプレート出力が完了したら、続けて必要なモジュールをインストールします。

$ npm install

エラーが出なければ完了。

Node.jsを実行する

$ npm start

上記コマンドを叩くとNode.jsのサーバーが起動します。
http://localhost:3000でアクセス可能です。

Welcome to Express

f:id:kokushin:20160420111511p:plain

上記画面が表示されればExpressの準備は完了です。
お疲れ様でした。

次回

Expressの簡単な使い方をメモります。