環境構築をする
- nodebrewをインストールする
- Node.jsをインストールする
詳しくは以下でまとめています。
https://qiita.com/momo1010/items/dab9c70bfe84a78f23e2
好きな場所にアプリケーション用のディレクトリを作成する
アプリケーション用のディレクトリの作成と移動のコマンドを実行します。
$ mkdir sample
$ cd sample
エディタを起動して先程作成したフォルダを開く
今回エディタは Visual Studio Codeを使用します。Open Folder...から先程作成したフォルダを選択します。
パッケージをインストールする
以下のコマンドを実行すると、 npmの設定ファイルである package.jsonが生成されます。package.jsonには、 npmパッケージの設定情報などが書き込まれています。
$ npm init --yes
次に、npmパッケージのインストールをします。今回は、 expressと ejsをインストールします。
$ npm install express ejs
nodemonをインストールする
jsファイルの変更を反映するには、毎回サーバーを再起動する必要があります。その作業を省くために nodemonという、ファイル更新時に自動でサーバーが再起動するようになるnpmパッケージをインストールします。
$ npm install -g nodemon
サーバーを起動してページを表示する
Visual Studio Codeで必要なファイルを作成します。node_modulesフォルダと package-lock.jsonpackage.jsonファイルがnpmパッケージのインストールをしたときに既に生成されています。
app.jsファイルを作成する
追加で app.jsファイルを作成します。 app.jsファイルに以下のコードをコピーして、貼り付けてください。
const express = require('express');
const app = express();
//CSSや画像ファイルを置くフォルダ（public）を指定するコード
app.use(express.static('public'));
app.get('/', (req, res) => {
res.render('hello.ejs');
});
app.listen(3000);
viewsフォルダを作成する
viewsフォルダを作成し、 hello.ejsファイルに以下のコードをコピーして、貼り付けてください。
<h1>Hello World</h1>
publicフォルダを作成する
publicフォルダの中に cssフォルダや imagesフォルダを作成します。
サーバーを起動する
nodemonを使ってサーバーを起動していきます。
$ nodemon app.js
ブラウザを開いて localhost:3000というURLにアクセスして Hello Worldと表示されれば成功です。