Приветствую, перед вами небольшой учебник по практической разработке на node.js, с использованием фреймворка express. Я с большим энтузиазмом отношусь к node и сопутствующим технологиям. Node.js в первую очередь привлекает свежестью в подходах к разработке, смелостью и драйвом.
50 |О том, что такое node.js вы можете прочитать на http://nodejs.org/, если коротко - то это серверная платформа, для выполнения javascript. Так же мы будем использовать express, web-фреймворк построеный на концепции middleware (о том, что это такое, поговорим поподробнее чуть позже)
51 |В процессе изучения мы познакомимся с различными аспектами web-разработки, такими как использование системы контроля версий, автоматическое тестирование и так далее. В результате по ходу изучения мы разработаем вполне рабочее web-приложение (простенький аналог твиттера)
52 |Хочется отметить, что очень большое влияние на меня оказал railstutorial, это лучшее пособие по web-разработке, которое я встречал, и мне очень хотелось бы создать нечто подобное для node.js.
53 |В этой главе мы развернем рабочее окружение с нуля, установим все необходимые инструменты, создадим простенькое приложение и даже запустим его на облачном хостинге.
56 |Так как я в основном использую в работе linux, а если точнее - Ubuntu 12.04, основная часть инструкций по установке тех или иных инструментов будет ориентирована на ползователей линукс, но я буду стараться по возможности давать ссылки на инструкции и для других ОС.
58 |Для того чтобы точно следовать инструкциям в учебнике, вам нужно будет поставить систему контроля версий git, дело в том, что мы не только будем размещать код своих проектов в git, но и устанавливать многие инструменты из репозиториев на гитхабе.
59 |Так что, первое что мы сделаем - это...
60 |Пользователи apt-based дистрибутивов могут выполнить в терминале:
62 |$ sudo apt-get install git-core
63 | Остальные отправляются читать инструкции по адресу http://git-scm.com/book/ch1-4.html
65 |Теперь пришло время поставить последнюю стабильню версию node.js (на текущий момент это 0.8.1) и npm (установщик пакетов для node).
67 |Инструкции по установке разных ОС можно найти здесь
68 |Для начала устанавливаем все что необходимо для компиляции пакета из исходников:
69 |$ sudo apt-get install python g++ curl libssl-dev apache2-utils
70 | Теперь скачиваем исходный код:
72 |$ cd /tmp
73 | $ git clone https://github.com/joyent/node.git
74 | $ cd node
75 | $ git checkout v0.8.1
76 | Посделний этап - компиляция и установка:
78 |$ ./configure
79 | $ make
80 | $ sudo make install
81 | Когда все благополучно завершится, можно проверить версии пакетов, должно получиться:
83 |$ node -v
84 | v0.8.1
85 | $ npm -v
86 | 1.1.33
87 | Если есть желание - можно запустить консоль node и поиграться с интерпретатором javascript.
89 |Тут каждый волен выбирать по своему вкусу, лично меня вполне устраивает gedit с установленным набором плагинов gmate. Вполне подходят Netbeans или Webstorm.
91 |Теперь пришло время познакомиться с фреймворком express. Фреймворк очень простой, и вполне приемлемо документированный. Единственный неудобный момент - это то, что мы будем использовать бета версию 3.0.x а документация на официальном сайте написана для 2.x, так что советую иметь под рукой migration guide
93 |Устанавливаем express глобально:
94 |$ sudo npm install -g express@3.0
95 | Создаем директорию для наших учебных проектов:
97 |$ mkdir -p ~/projects/node-tutorial
98 | $ cd ~/projects/node-tutorial
99 | Создаем проект и устанавливаем зависимости:
101 |$ express node-demo-app
102 | $ cd node-demo-app && npm install
103 | Теперь можно заглянуть в то что нам сгенерировал генератор приложений, вот внутренности app.js:
105 |/**
106 | * Module dependencies.
107 | */
108 |
109 | var express = require('express')
110 | , routes = require('./routes')
111 | , http = require('http');
112 |
113 | var app = express();
114 |
115 | app.configure(function(){
116 | app.set('port', process.env.PORT || 3000);
117 | app.set('views', __dirname + '/views');
118 | app.set('view engine', 'jade');
119 | app.use(express.favicon());
120 | app.use(express.logger('dev'));
121 | app.use(express.bodyParser());
122 | app.use(express.methodOverride());
123 | app.use(app.router);
124 | app.use(express.static(__dirname + '/public'));
125 | });
126 |
127 | app.configure('development', function(){
128 | app.use(express.errorHandler());
129 | });
130 |
131 | app.get('/', routes.index);
132 |
133 | http.createServer(app).listen(app.get('port'), function(){
134 | console.log("Express server listening on port " + app.get('port'));
135 | });
136 | Думаю, что люди знакомые с javascript могут предположить что тут происходит. Подключаются необходимые модули, конфигурируется приложение и запускается на 3000-м порту.
138 |Теперь приложение можно запустить:
139 |$ node app
140 | И увидеть результат работы http://localhost:3000/
142 |Теперь, когда у нас уже есть рабочее приложение, более подробно коснемся работы с сисемой контроля версий. Для того чтобы лучше познакомиться с работой git, стоит почитать книжку Pro Git, но можно и обойтись инструкциями в данном учебнике.
144 |Для более комфортной работы с git стоит сначала указать свои личные данные:
146 |$ git config --global user.name "Your Name"
147 | $ git config --global user.email your.email@example.com
148 | И настроить алиасы для наиболее часто используемых комманд:
150 |$ git config --global alias.co checkout
151 | $ git config --global alias.ci commit
152 | Git настроен и можно размещать наше приложение в репозитории, инициализируем новый репозиторий:
155 |$ git init
156 | Добавляем директорию с зависимостями приложения в gitignore:
158 |$ echo '/node_modules' > .gitignore
159 | Помещаем все файлы в индекс и создаем первый коммит:
161 |$ git add .
162 | $ git ci -m "Initial commit"
163 | После размещения кода проекта в репозитории пришло время выложить проект на GitHub. GitHub - это социальная сеть и хостинг для проектов. Огромное число opensource проектов хостится на гитхабе, так что если вы там еще не зарегистрированы - самое время сделать это (возможно вам придется сначала разобраться с ssh ключами)
166 |Создаем новый репозиторий node-demo-app.
167 |Выкладываем код на гитхаб:
168 |$ git remote add origin git@github.com:ваш_ник_на_гитхабе/node-demo-app.git
169 | $ git push -u origin master
170 | Теперь наступает самый волнующий этап, мы будем разворачивать приложение на хостинге. 173 | Для этого воспользуемся услугами облачной системы деплоя Heroku.
174 |Для начала нам надо зарегистрироваться и установить необходимый инструментарий.
176 |Пользователи ubuntu выполняют:
177 |$ wget -qO- https://toolbelt.heroku.com/install.sh | sh
178 | Когда установка завершится, нужно будет залогиниться из коммандной строки:
180 |$ heroku login
181 | Теперь наше окружение полностью готов к выкладке на хостинг. Размещение node.js проекта на Heroku требует еще нескольких действий, вы можете почитать об этом в документации или просто выполнить инструкции.
184 |В файле package.json нашего проекта, нужно указать версии ноды и npm, package.json должен выглядеть так:
185 |{
186 | "name": "application-name",
187 | "version": "0.0.1",
188 | "private": true,
189 | "scripts": {
190 | "start": "node app"
191 | },
192 | "dependencies": {
193 | "express": "3.0.0beta4",
194 | "jade": "*"
195 | },
196 | "engines": {
197 | "node": "0.8.x",
198 | "npm": "1.1.x"
199 | }
200 | }
201 | Теперь в корне проекта создаем файл Procfile:
203 |$ echo 'web: node app.js' > Procfile
204 | Проверяем что все запускается с помощью менеджера процессов:
206 |$ foreman start
207 | Приложение должно быть доступно на http://localhost:5000/
209 |Добавляем файлы в репозиторий:
210 |$ git add .
211 | $ git ci -m "Added Procfile and engines"
212 | $ git push
213 | Создаем приложение на heroku:
215 |$ heroku create
216 | $ git push heroku master
217 | Набираем:
219 |$ heroku open
220 | и любуемся задеплоеным приложением.
222 |Suspendisse hendrerit quam mollis magna pharetra ac convallis justo laoreet. Morbi sit amet malesuada arcu. Sed adipiscing tempus rutrum. Aenean lacinia metus et augue aliquam pulvinar. Praesent nulla ante, ullamcorper vitae varius quis, ullamcorper sit amet risus. Nulla facilisi. Ut risus arcu, convallis a ornare eu, tempor sed elit. Mauris auctor, tellus cursus congue convallis, lorem neque hendrerit turpis, at viverra erat ipsum ut nunc. Fusce non lectus massa, vitae imperdiet lorem. Curabitur dapibus ullamcorper est, ut vestibulum 225 | diam sollicitudin sit amet.
226 |Suspendisse hendrerit quam mollis magna pharetra ac convallis justo laoreet. Morbi sit amet malesuada arcu. Sed adipiscing tempus rutrum. Aenean lacinia metus et augue aliquam pulvinar. Praesent nulla ante, ullamcorper vitae varius quis, ullamcorper sit amet risus. Nulla facilisi. Ut risus arcu, convallis a ornare eu, tempor sed elit. Mauris auctor, tellus cursus congue convallis, lorem neque hendrerit turpis, at viverra erat ipsum ut nunc. Fusce non lectus massa, vitae imperdiet lorem. Curabitur dapibus ullamcorper est, ut vestibulum 229 | diam sollicitudin sit amet.
230 |Copyright David Klassen, 2012.
232 | 233 | 234 | -------------------------------------------------------------------------------- /index.mkd: -------------------------------------------------------------------------------- 1 | #Web-разработка на node.js и express 2 | ###Изучаем node.js на практике 3 | --- 4 | 5 | ##Содержание 6 | 7 | * ####[Вступление](#introduction) 8 | 9 | * ####[Глава 1. Старт](#start) 10 | * [1.1 Рабочее окружение](#environment) 11 | * [1.1.1 Установка git](#git-install) 12 | * [1.1.2 Установка node.js и npm](#node-install) 13 | * [1.1.3 Среда разработки](#ide) 14 | * [1.1.4 Express и первое приложение](#hello-world) 15 | * [1.2 Система контроля версий](#version-control) 16 | * [1.2.1 Настройка git](#git-setup) 17 | * [1.2.2 Работа с git](#git-workflow) 18 | * [1.2.3 github](#github) 19 | * [1.3 Разворачиваем приложение](#deploying) 20 | * [1.3.1 Настройка Heroku](#heroku-setup) 21 | * [1.3.2 Разворачиваем приложение](#deploy-hello-world) 22 | 23 | * ####[Глава 2. Статические страницы](#static-pages) 24 | * [2.1 Model-View-Controller (MVC)](#mvc) 25 | * [2.2 Демонстрационное приложение](#sample-app) 26 | * [2.2.1 package.json](#package.json) 27 | * [2.2.2 Hello, World!](#hello-world) 28 | * [2.2.3 Структура приложения](#app-structure) 29 | * [2.3 Тестирование приложения](#tests) 30 | * [2.4 Статические страницы](#static-pages-sub) 31 | * [2.4.1 Контроллер статических страниц](#pages-controller) 32 | * [2.4.2 Шаблонизация и Views](#templates-and-views) 33 | * [2.4.3 Layout и Twitter Bootstrap](#layout-and-twitter-bootstrap) 34 | * [2.4.4 Деплой на Heroku](#templates-and-views) 35 | 36 | * ####[Глава 3. Модель пользователя](#user-model) 37 | 38 | --- 39 | 40 | ##Вступление 41 | 42 | Приветствую, перед вами небольшой учебник по практической разработке на node.js, с использованием фреймворка express. Я с большим энтузиазмом отношусь к node и сопутствующим технологиям. Node.js в первую очередь привлекает свежестью в подходах к разработке, смелостью и драйвом. 43 | 44 | О том, что такое node.js вы можете прочитать на [http://nodejs.org/](http://nodejs.org/), если коротко - то это серверная платформа, для выполнения javascript. Так же мы будем использовать express, web-фреймворк построеный на концепции [middleware](http://stephensugden.com/middleware_guide/) (о том, что это такое, поговорим поподробнее чуть позже) 45 | 46 | В процессе изучения мы познакомимся с различными аспектами web-разработки, такими как использование системы контроля версий, автоматическое тестирование и так далее. В результате по ходу изучения мы разработаем вполне рабочее web-приложение (простенький аналог твиттера) 47 | 48 | Хочется отметить, что очень большое влияние на меня оказал [railstutorial](http://ruby.railstutorial.org/ruby-on-rails-tutorial-book), это лучшее пособие по web-разработке, которое я встречал, и мне очень хотелось бы создать нечто подобное для node.js. 49 | 50 | --- 51 | 52 | ##Глава 1. Старт 53 | 54 | В этой главе мы развернем рабочее окружение с нуля, установим все необходимые инструменты, создадим простенькое приложение и даже запустим его на облачном хостинге. 55 | 56 | ###1.1 Рабочее окружение 57 | 58 | Так как я в основном использую в работе linux, а если точнее - Ubuntu 12.04, основная часть инструкций по установке тех или иных инструментов будет ориентирована на ползователей линукс, но я буду стараться по возможности давать ссылки на инструкции и для других ОС. 59 | 60 | Для того чтобы точно следовать инструкциям в учебнике, вам нужно будет поставить систему контроля версий [git](http://ru.wikipedia.org/wiki/Git), дело в том, что мы не только будем размещать код своих проектов в git, но и устанавливать многие инструменты из репозиториев на [гитхабе](https://github.com/). 61 | 62 | Так что, первое что мы сделаем - это... 63 | 64 | ####1.1.1 Установка git 65 | 66 | Пользователи apt-based дистрибутивов могут выполнить в терминале: 67 | 68 | $ sudo apt-get install git-core 69 | 70 | Остальные отправляются читать инструкции по адресу [http://git-scm.com/book/ch1-4.html](http://git-scm.com/book/ch1-4.html) 71 | 72 | ####1.1.2 Установка node.js и npm 73 | 74 | Теперь пришло время поставить последнюю стабильню версию node.js (на текущий момент это 0.8.1) и npm (установщик пакетов для node). 75 | 76 | Инструкции по установке разных ОС можно найти [здесь](https://github.com/joyent/node/wiki/Installation) 77 | 78 | Для установки на ubuntu выполняем: 79 | 80 | $ sudo apt-get install python-software-properties 81 | $ sudo add-apt-repository ppa:chris-lea/node.js 82 | $ sudo apt-get update 83 | $ sudo apt-get install nodejs npm 84 | 85 | Если есть желание - можно запустить консоль node и поиграться с интерпретатором javascript. 86 | 87 | ####1.1.3 Среда разработки 88 | 89 | Тут каждый волен выбирать по своему вкусу, лично меня вполне устраивает gedit с установленным набором плагинов [gmate](https://github.com/gmate/gmate/). Вполне подходят Netbeans или Webstorm. 90 | 91 | ####1.1.4 Express и первое приложение 92 | 93 | Теперь пришло время познакомиться с фреймворком [express](http://expressjs.com/). Фреймворк очень простой, и вполне приемлемо документированный. Единственный неудобный момент - это то, что мы будем использовать бета версию 3.0.x а документация на официальном сайте написана для 2.x, так что советую иметь под рукой [migration guide](https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x) 94 | 95 | Устанавливаем express глобально: 96 | 97 | $ sudo npm install -g express 98 | 99 | Создаем директорию для наших учебных проектов: 100 | 101 | $ mkdir -p ~/projects/node-tutorial 102 | $ cd ~/projects/node-tutorial 103 | 104 | Создаем проект и устанавливаем зависимости: 105 | 106 | $ express first-app 107 | $ cd first-app && npm install 108 | 109 | Желающие могут покопаться в том что нам сгенерировал генератор приложений, думаю, что люди знакомые с javascript могут предположить что там происходит. 110 | 111 | Теперь приложение можно запустить: 112 | 113 | $ node app 114 | 115 | И увидеть результат работы [http://localhost:3000/](http://localhost:3000/) 116 | 117 | ###1.2 Система контроля версий 118 | 119 | Теперь, когда у нас уже есть рабочее приложение, более подробно коснемся работы с сисемой контроля версий. Для того чтобы лучше познакомиться с работой git, стоит почитать книжку [Pro Git](http://git-scm.com/book), но можно и обойтись инструкциями в данном учебнике. 120 | 121 | ####1.2.1 Настройка git 122 | 123 | Для более комфортной работы с git стоит сначала указать свои личные данные: 124 | 125 | $ git config --global user.name "Your Name" 126 | $ git config --global user.email your.email@example.com 127 | 128 | И настроить алиасы для наиболее часто используемых комманд: 129 | 130 | $ git config --global alias.co checkout 131 | $ git config --global alias.ci commit 132 | 133 | ####1.2.2 Работа с git 134 | 135 | Git настроен и можно размещать наше приложение в репозитории, инициализируем новый репозиторий: 136 | 137 | $ git init 138 | 139 | Добавляем директорию с зависимостями приложения в gitignore: 140 | 141 | $ echo 'node_modules' > .gitignore 142 | 143 | Помещаем все файлы в индекс и создаем первый коммит: 144 | 145 | $ git add . 146 | $ git ci -m "Initial commit" 147 | 148 | ####1.2.3 github 149 | 150 | После размещения кода проекта в репозитории пришло время выложить проект на [GitHub](http://github.com/). GitHub - это социальная сеть и хостинг для проектов. Огромное число opensource проектов хостится на гитхабе, так что если вы там еще не зарегистрированы - самое время [сделать это](http://github.com/signup/free). 151 | 152 | Перед тем как работать с GitHub нужно будет создать RSA ключи для доступа по ssh. Процедура описана [тут](https://help.github.com/articles/generating-ssh-keys). Для пользователей linux привожу инструкцию по созданию ключей если их у вас еще нет. 153 | 154 | $ ssh-keygen -t rsa -C "your_email@youremail.com" 155 | 156 | Отвечаем на вопросы генератора, после чего копируем содержимое файла `~/.ssh/id_rsa.pub`: 157 | 158 | $ sudo apt-get install xclip 159 | $ xclip -sel clip < ~/.ssh/id_rsa.pub 160 | 161 | После этого нужно пройти по ссылке [Account Settings](https://github.com/settings/profile), зайти в раздел SSH Keys и нажать кнопку Add SSH Key и вставить ключ из буфера обмена в поле Key. Затем сохранить. 162 | 163 | Проверить что ключ работает можно так: 164 | 165 | $ ssh -T git@github.com 166 | 167 | Возможно вы увидете предупреждение: 168 | 169 | The authenticity of host 'github.com (207.97.227.239)' can't be established. 170 | # RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. 171 | # Are you sure you want to continue connecting (yes/no)? 172 | 173 | Нужно просто ответить 'yes' и тогда, если ключ успешно добавился, вы увидите ответ сервера: 174 | 175 | Hi username! You've successfully authenticated, but GitHub does not 176 | # provide shell access. 177 | 178 | Когда ключи настроены [создаем](https://github.com/new) новый репозиторий с названием first-app и дефолтными настройками, после чего выкладываем код на гитхаб: 179 | 180 | $ git remote add origin git@github.com:ваш_ник_на_гитхабе/first-app.git 181 | $ git push -u origin master 182 | 183 | ###1.3 Разворачиваем приложение 184 | 185 | Теперь наступает самый волнующий этап, мы будем разворачивать приложение на хостинге. 186 | Для этого воспользуемся услугами облачной системы деплоя [Heroku](http://www.heroku.com/). Если вам интересно как работает хостинг Heroku, советую поизучать их раздел [How it Works](http://www.heroku.com/how) 187 | 188 | ####1.3.1 Настройка Heroku 189 | 190 | Для начала нам надо [зарегистрироваться](https://api.heroku.com/signup) и установить необходимый [инструментарий](https://toolbelt.heroku.com/). 191 | 192 | Пользователи ubuntu выполняют: 193 | 194 | $ wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh 195 | 196 | Когда установка завершится, нужно будет залогиниться из коммандной строки: 197 | 198 | $ heroku login 199 | 200 | ####1.3.2 Размещаем приложение на heroku 201 | 202 | Теперь наше окружение полностью готов к выкладке на хостинг. Размещение node.js проекта на Heroku требует еще нескольких действий, вы можете почитать об этом в [документации](https://devcenter.heroku.com/articles/nodejs) или просто выполнить инструкции. 203 | 204 | В файле package.json нашего проекта, нужно указать версии ноды и npm, package.json должен выглядеть так: 205 | 206 | { 207 | "name": "application-name", 208 | "version": "0.0.1", 209 | "private": true, 210 | "scripts": { 211 | "start": "node app" 212 | }, 213 | "dependencies": { 214 | "express": "3.0.0beta4", 215 | "jade": "*" 216 | }, 217 | "engines": { 218 | "node": "0.8.x", 219 | "npm": "1.1.x" 220 | } 221 | } 222 | 223 | Теперь в корне проекта создаем файл Procfile: 224 | 225 | $ echo 'web: node app.js' > Procfile 226 | 227 | Проверяем что все запускается с помощью менеджера процессов: 228 | 229 | $ foreman start 230 | 231 | Приложение должно быть доступно на [http://localhost:5000/](http://localhost:5000/) 232 | 233 | Добавляем файлы в репозиторий: 234 | 235 | $ git add . 236 | $ git ci -m "Added Procfile and engines" 237 | $ git push 238 | 239 | Создаем приложение на heroku: 240 | 241 | $ heroku create 242 | $ heroku keys:add ~/.ssh/id_rsa.pub 243 | $ git push heroku master 244 | 245 | Набираем: 246 | 247 | $ heroku open 248 | 249 | и любуемся задеплоеным приложением. 250 | 251 | --- 252 | 253 | ##Глава 2. Статические страницы 254 | 255 | В этой главе мы приступим к разработке нашего приложения, которое мы будем использовать в качестве примера на протяжении всего учебника, и начнем с самого простого, а именно со статических страниц. 256 | 257 | ###2.1 Model-View-Controller (MVC) 258 | 259 | Перед тем как приступать собственно к разработке приложения, полезно поговорить о том, что из себя представляет типичная архитектура web-приложения на наиболее высоком уровне абстракции. Самым популярным архитектурным паттерном на сегодняшний день является [model-view-controller](http://ссылка.на.википедию) (MVC), общий смысл паттерна заключается в том, чтобы разделить бизнес логику приложения (её привязывают к моделям) и представление - view. Кроме того, модели реализуют интерфейс к базе данных. Контроллер играет роль посредника между моделью и представлением. В случае web-приложения - это выглядит так: браузер пользователя отправляет запрос на сервер, контроллер обрабатывает запрос, получает необходимые данные из модели и отправляет их во view. View получает данные из контроллера и превращает их в красивую HTML страничку, которую контроллер в итоге отправит пользователю. 260 | 261 |  262 | 263 | ###2.2 Демонстрационное приложение 264 | 265 | Пришло время приступить к разработке нашего демонстрационного приложения. В первой главе мы уже развернули тестовое приложение, но воспользовались при этом генератором express и не написали ни строчки кода. Теперь мы будем писать наше приложение сами и начнем с "Hello, World". 266 | 267 | $ cd ~/projects/node-tutorial 268 | $ mkdir node-demo-app 269 | $ cd node-sample-app 270 | 271 | ####2.2.1 package.json 272 | 273 | Для того чтобы воспользоваться всеми прелестями, которые нам может предоставить npm (зачем, что это такое и ссылка), мы создадим в корневой лиректории нашего проекта файлик package.json: 274 | 275 | { 276 | "name": "node-demo-app" 277 | , "version": "0.0.1" 278 | , "scripts": { 279 | "start": "node server.js" 280 | } 281 | , "dependencies": { 282 | "express": "3.0.1" 283 | } 284 | } 285 | 286 | TODO: Описание полей и ссылка на доки по package.json 287 | 288 | Теперь можно выполнить 289 | 290 | $ npm install 291 | 292 | В результате npm создаст директорию node_modules в которую поместит все модули от которых зависит наш проект. 293 | 294 | ####2.2.2 Hello, World! 295 | 296 | Основной файл назовем server.js: 297 | 298 | var express = require('express') 299 | , app = express() 300 | , port = process.env.PORT || 3000 301 | 302 | app.get('/', function (req, res) { 303 | res.send('Hello, World!') 304 | }) 305 | 306 | app.listen(port, function () { 307 | console.log('Listening on port ', port) 308 | }) 309 | 310 | Для того, чтобы полюбоваться результатом нашего труда, есть два способа: 311 | 312 | $ node server.js 313 | 314 | либо 315 | 316 | $ npm start 317 | 318 | Второй способ доступен потому что мы добавили соответствующую строчку в файл конфигурации package.json. 319 | 320 | Теперь по адресу http://localhost:3000/ можно получить строчку 'Hello, World!'. 321 | 322 | Настало время залить что-нибудь в GitHub. Создаем новый репозиторий и выполняем в директории проекта следующий набор комманд, сперва создадим файл README.md (правило хорошего тона) 323 | 324 | $ echo '# Node.js demo app' > README.md 325 | 326 | Создадим файл .gitignore для того чтобы не коммитить лишние файлы в git, а именно директорию node_modules: 327 | 328 | $ echo 'node_modules' > .gitignore 329 | 330 | Создаем репозиторий, коммитимся и заливаем все на GitHub 331 | 332 | $ git init 333 | $ git add . 334 | $ git commit -m 'Hello, World' 335 | $ git remote add origin git@github.com:<%= message %>
681 | 682 | 683 | 684 | В данном случае используются переменные `title` и `message`. И поменяем экшн home в контроллере pages 685 | 686 | exports.home = function (req, res) { 687 | res.render('pages/home', { 688 | title: 'Home page' 689 | , message: 'This is the "home" action of "pages" controller' 690 | }) 691 | } 692 | 693 | Наша "статическая" страница стала уже слегка "динамической". Любуемся результатом по адресу http://localhost:3000/home 694 | 695 | В принципе в этот момент было бы неплохо закомититься, предварительно прогнав тесты и убедившись, что наши улучшения ничего не поломали. Вообще это нужно принять за правило, перед коммитом всегда прогоняем test-suite. 696 | 697 | $ make test 698 | $ git add . 699 | $ git ci -m "Added home page" 700 | $ git push 701 | 702 | Предлагаю в качестве упражнения самостоятельно сделать страничку about, добавив необходимый экшн в контроллер pages и создав шаблон для неё. Не забываем примонтировать путь '/about' в app.js. Ну а начать нужно с тестов! 703 | 704 | ####2.4.3 Layout и Twitter Bootstrap 705 | 706 | Если у вас получилось создать страницу "/about" то теперь у вас две страницы, если не получилось, можете выкачать готовый вариант из гитхаба 707 | 708 | $ git clone blabla 709 | $ git checkout blabla 710 | 711 | Как вы могли заметить, в наших вьюшках дублируется код и хотелось бы устранить этот недочет. Для этого создадим layout с базовым каркасом страницы. К сожалению ejs пока что не поддерживает layout-ы, но существует библиотека ejs-locals, которая добавляет этот функционал в шаблонизатор. Подключаем её в проект. 712 | 713 | package.json: 714 | 715 | { 716 | "name": "node-demo-app" 717 | , "version": "0.0.1" 718 | , "scripts": { 719 | "start": "node server.js" 720 | } 721 | , "dependencies": { 722 | "express": "3.0.1" 723 | , "ejs": "0.8.3" 724 | , "ejs-locals": "0.2.5" 725 | } 726 | , "devDependencies": { 727 | "mocha": "1.7.0" 728 | , "should": "1.2.1" 729 | , "supertest": "0.4.0" 730 | } 731 | } 732 | 733 | Инсталируем: 734 | 735 | $ npm install 736 | 737 | Добавляем в приложение app.js: 738 | 739 | var express = require('express') 740 | , ejsLocals = require('ejs-locals') 741 | , app = express() 742 | , pages = require(__dirname + '/controllers/pages') 743 | 744 | // configuration settings 745 | app.engine('ejs', ejsLocals) 746 | app.set('views', __dirname + '/views') 747 | app.set('view engine', 'ejs') 748 | app.use(express.static(__dirname + '/public')) 749 | 750 | // mount routes 751 | app.get('/', function (req, res) { res.redirect('home') }) 752 | app.get('/home', pages.home) 753 | app.get('/about', pages.about) 754 | 755 | module.exports = app 756 | 757 | Создаем layout: 758 | 759 | $ touch views/layout.ejs 760 | 761 | layout.ejs: 762 | 763 | 764 | 765 | 766 | 767 |<%= message %>
783 | 784 | Внешне ничего не должно поменяться, чтобы убедиться в этом запустим tet-suite, а потом закоммитимся 785 | 786 | $ make test 787 | $ git add . 788 | $ git ci -m "Added layout" 789 | $ git push 790 | 791 | Осталось навести красоту, в этом нам поможет фреймворк для прототипирования под названием Twitter Bootstrap, его нужно скачать и положить в /public 792 | 793 | $ wget http://twitter.github.com/bootstrap/assets/bootstrap.zip 794 | $ unzip bootstrap.zip -d public/ 795 | $ rm bootstrap.zip 796 | 797 | Теперь воспользуемся шаблоном Bootstrap starter template и сделаем layout на его основе: 798 | 799 | layout.js: 800 | 801 | 802 | 803 | 804 | 805 |