step1.expressでプロジェクトを作成

まずはexpressコマンドでnode.jsのプロジェクトを作成します。

express-generatorがわからない人はnode.jsのexpress-generatorはとても便利。を先に読んで下さい。

それでは早速作っていきますが、まずは環境チェックです。

$ node -v
v12.1.0
$ express --version
4.16.0

作業用フォルダを用意しておく

マイドキュメントの中でも良いですがnodeで作成したプロジェクトは1つのフォルダの中に入れておくのが良いと思います。

私はnodeというフォルダをドライブ直下に作っています。

日本語フォルダが入るとちゃんと動かないシステムもあったりしたので昔からの癖ですね(^_^;

$ cd /node

お使いのパソコンによってコマンドは変わってくるかと思いますが、macのターミナルを開き作業ディレクトリを移動します。

$ express todolist --view=ejs
create : todolist/
create : todolist/public/
create : todolist/public/javascripts/
create : todolist/public/images/
create : todolist/public/stylesheets/
create : todolist/public/stylesheets/style.css
create : todolist/routes/
create : todolist/routes/index.js
create : todolist/routes/users.js
create : todolist/views/
create : todolist/views/error.ejs
create : todolist/views/index.ejs
create : todolist/app.js
create : todolist/package.json
create : todolist/bin/
create : todolist/bin/www
change directory:
$ cd todolist
install dependencies:
$ npm install
run the app:
$ DEBUG=todolist:* npm start

テンプレートエンジンはjadeではなくejsを使いますので「–view=ejs」とオプションで指定します。

最初からejsのテンプレートが入ってて便利です。

npm installをしよう

あとは出来上がったプロジェクトをVSCodeで読み込ませてターミナルからnpm installをして準備は完了です!

$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 53 packages from 38 contributors and audited 141 packages in 2.79s
found 0 vulnerabilities

デバッカーを起動してデフォルトページが表示されるか確認してみましょう。

http://localhost:3000/

上記の表示が出たら大丈夫です。

さぁ作って行きましょう。

あわせて読みたい