環境構築をする
- 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.json package.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を使ってサーバーを起動していきます。
$ npx nodemon app.js
ブラウザを開いて localhost:3000 というURLにアクセスして Hello World と表示されれば成功です。