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

技術ブログ

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

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

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

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

Visual Studio CodeとNode.jsの導入について - Qiita
はじめに Visual Studio CodeとNode.jsの連携とアプリ開発に関する投稿が軒並み古くなっていました.なるべく最新の状態がマストだと思うので記事を書きます. この投稿の目的は,VSCodeでNode.jsを書...

開発環境

・Maccos 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/

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

サーバーを落とす場合は、
control+cを使う。

参考になった良記事

Visual Studio CodeとNode.jsの導入について

Visual Studio CodeでExpressの開発環境を作ってみます

覚えるのはこれだけ!Pug(Jade)のよく使う9つの書き方

【express】テンプレートファイルを使ってViewを作成する

MDN docs

Node.jsのMVCフレームワーク「Express」の基礎知識とインストール (1/3)

公式ドキュメント

じゅうきち

大学中退
→ニート
→引きこもり
→IT企業

超学歴コンプを拗らせて、
一度自暴自棄になり、世捨て人になる(ニート)。
ここままじゃと思い、再起する。

大学中退の希望の星になる。

じゅうきちをフォローする
技術ブログ
スポンサーリンク
~大学中退限定のライフスタイルコミュニティ~
下克上中退人では、大学中退限定でIT就職支援をしています。
じゅうきちをフォローする
下克上中退人

コメント

タイトルとURLをコピーしました