はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

Node.jsのExpress入れてみる。WebStormで

こんにちは、のすけです。

Node.jsのWebフレームワークであるExpressを入れてみました。

以前紹介したようにhttp.createServerで簡易的にはサーバを作れるのですが、ルーティングとかを考えるとWebフレームワークを使った方が楽だと思います。

今回は、Expressプロジェクトの内容が知りたかったので、かなりずるい方法で環境を構築します。

WebStormを使う

はい。WebStormを使います。WebStormはHTML用のIDEです。(なんかPhpStormでもモジュール入れればいけるらしい)

HTML,CSS,JSを書く場合に威力を発揮します。

WebStormはNode.jsにも対応しているので、これでサクッと作っちゃいます。

こちらからダウンロード。

www.jetbrains.com

僕はWebStorm8のライセンスを持っているので8で作ります。最新は11だった。

起動

f:id:hollywis:20160204092134j:plain

*この画像はすぐ消えるので上手く撮れなくて適当に拾ってきました。

環境を選択。テーマはDarculaを選びました(背景が黒いやつです)

f:id:hollywis:20160204092214p:plain

Create New Projectを選択。画像はちょうどCreate New Projectが切れてしまった(上の方にあります)。

f:id:hollywis:20160204092349p:plain

プロジェクト名を入れて、project type をNode.js Express Appに

f:id:hollywis:20160204092505p:plain

Node interpreterを選んで、versionは4.13.1にしました。

Viewのtemplate engineはjadeを選びました。cssはplane css

f:id:hollywis:20160204092739p:plain

するとこんな感じでプロジェクトができました。

f:id:hollywis:20160204092803p:plain

binの下のwwwが起動用jsで、app.jsがアプリケーション全体の設定。

routes下のindex.jsusers.jsがそれぞれのルーティングに対応したjsっぽいですね。

viewsの下にjadeファイルがありました。

node_modulesの下を覗くといっぱいjsのライブラリが・・・。Expressがjsライブラリの集合体であることがわかりますねぇ。

package.jsonを覗いたらこんな感じだった。

{
  "name": "node-test001",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0"
  }
}

そして、MenuのRun -> Run をクリックすると。binしたのwww.jsを叩いてlocalhost:3000でnode.jsを起動してくれます。

ブラウザで開くと、index.jadeのやつが表示されました。

f:id:hollywis:20160204093306p:plain

おしまい。