LoginSignup
0
0

More than 5 years have passed since last update.

koa-ECTの環境整備

Last updated at Posted at 2018-07-24

開発環境を作る。

node.jsのインストール

  • nodistの利用

Nodistのページから、「Download the installer from the releases page」のところにあるインストーラをダウンロードしてインストールする。

コマンドプロンプトから、以下の様に実行できれば、OK
nodist -v
v0.8.8 (2016/12現在)

以下を実行してインストール出来るバージョンを調べる。
nodist dist

以下を実行してインストールしたいバージョンをインストールする(10.6.0の場合)
nodist + 10.6.0

以下を実行して、nodeの使用するバージョンを設定する(10.6.0の場合)
nodist 10.6.0

node.jsのバージョン確認
node -v
v10.6.0
(2018/07現在)

以下を実行して、nodeにあったnpmのバージョンにしておく。
nodist npm match

npmのバージョンの確認
npm -v
6.1.0
(2018/07現在)

koaとkoa-generatorのインストール

> npm install -g koa
> npm install -g koa-generator

適当なディレクトリで以下を実行してkoaのテンプレートを作成する
> koa KoaTest (プロジェクト名は任意)

プロジェクト名のディレクトリが作成されて、テンプレートが作成される
プロジェクトディレクトリ(この場合はkoaTest)へ移動する

ECTパッケージをインストール

koaTest> npm install -D ect

npm installを実行する
koaTest> npm install

ECTテンプレートで動作する様に修正

app.jsの変更

viewsのdefaultをjadeからectへ変更する。
また、module.exports = app;をapp.listen(3000);に変更する。

app.js
app.use(views('views', {
  root: __dirname + '/views',
  default: 'ect'
}));

//module.exports = app;
app.listen(3000);

viewsの変更

index.jade、index.jadeの拡張子をectへ変更する
index.ect、index.ect

記述をectのものへ変更する

layout.ect
<!DOCTYPE html>
<html>
  <head>
    <title><%= @title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <% content %>
  </body>
</html>
index.ect
<% extend 'views/layout.ect' %>

<h1><%= @title %></h1>
<p>Welcome to <%= @title %> with ECT</p>
<hr>
<div id="container"></div>
</div>

以下を実行して、http://localhost:3000へアクセスする。
koaTest> node app.js

以下の様に表示されればOK

Hello World Koa!
Welcome to Hello World Koa! with ECT

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0