Visual Stadio CodeでExpress.js(Node.js)開発をするまで

2020 12/09

2020.07.21 2020.12.09

https://lin.ee/7mDtUIt

どうも、
こんにちは、
じゅうきちだ。

今回は、
VscodeでNode.jsの環境構築をする。

Node.jsやGit、Homebrew、Vscodeのがインストールできていない人は、

まずは、この記事の内容を実行していただけるとスムーズ。

https://qiita.com/GRGSIBERIA/items/b8cd4a2b3635d1bb0391

開発環境

・Macos Catarina (v10.15.6)

・Node.js （v14.5.0）

・Visual Stadio Code（v1.47.2）

プロジェクトを作成

ターミナルでディレクトリを作る。

今回は、express-testという名前で作った。

$ mkdir express-test

ディレクトリを作ったら、Vscodeで開く。

control+shift+@でターミナルを開く。

$ export PATH=$HOME/.nodebrew/current/bin:$PATH

・express-generatorをインストールする。

$ npm install -g express-generator

すると、

npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
/Users/banbook/.nodebrew/node/v14.5.0/bin/express -> /Users/banbook/.nodebrew/node/v14.5.0/lib/node_modules/express-generator/bin/express-cli.js
+ express-generator@4.16.1
updated 1 package in 1.03s

という警告が出るが無視して構わない。

・今回は、テンプレートエンジンにpugを使いたいため、
pugに変更するオプションをつける。

$ express --view=pug .

実際に起動する

$ npm install

すると

npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

> core-js@2.6.11 postinstall /Users/banbook/express-test/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm notice created a lockfile as package-lock.json. You should commit this file.
added 118 packages from 172 contributors and audited 119 packages in 8.642s

3 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

ここでも警告が出るが無視。

・サーバーを起動する。

$ npm start

> express-test@0.0.0 start /Users/banbook/express-test
> node ./bin/www

GET / 200 1048.744 ms - 170
GET /stylesheets/style.css 200 7.135 ms - 111
GET / 304 34.561 ms - -
GET /stylesheets/style.css 304 2.927 ms - -

これで、

http://localhost:3000/

にアクセスして下のような画面がでてきたら成功。