Native JS для чайников. Создание HTML-шаблона с помощью JS.
Попытаюсь описать максимально доходчиво без злоупотребления сложных терминов. Чтобы было легче усвоить данный контент, вам нужны: минимальные знания HTML, CSS, базовые знания Javascript.
Сразу хочу пояснить, что при виртуализации вашей веб-странички по средствам javascript, сам процесс создания web-странички (разметка будет инициироваться в .js файле, а все стили будут храниться в .css файле), так что «возьни» с разметкой будет минимум.
Для начала создания нашей виртуальной странички, создадим в корневой директории сайта стандартный index.html файл. В дальнейшем все пути (для простоты) будут подключаться относительно данного файла.
Далее открываем данный файл для редактирования и заполняем стандартным скелетом гипер-разметки.
Так как мы будем заполнять видимую область отображаемого контента страницы (содержание тега <body></body>) с помощью javascript файла, то нам и нужно подключить данный файл.
1. Вопрос у многих новичков: А куда его подключить?
ответ: .js файлы можно подключать как внутри тега <head> , так и внутри тега <body>. Зависит это от логики взаимодействия элементов вашего web-приложения. В данном случае web-странички.
В нашем примере, шаблон страницы должен генерироваться сразу, при загрузке страницы в окне браузера. Если по Русски, то наш видимый контент страницы, должен отображаться сразу при событии загрузки окна браузера — событие (window.onload). По-этому: рационально подключить наш с вами .js файл внутри тега <head>. Делается это следующим образом.
создадим в корневой директории сайта директорию(папку) «js» и внутри папки создадим сам файл-скрипт с расширением «js», назовем его script.js. далее подключим данный файл в скелете.
Но в данном .js файле будет исполняемые функции, которые и создадут наш видимый шаблон, но все стили элементов хранятся в .css файле. Создадим в корневой папке директорию css и внутри этой папки создадим css файл style (style.css). Данный файл так же следует подключить внутри <head> следующим образом.
и теперь самое интересное! Так как мы будем создавать наш сайт на нативном javascript работа с нашим файлом index.html закончена. Не привычно? но в этом и вся суть виртуализации по средствам js.
Сохраняем и закрываем наш файл index.html и начинаем «ваять» наш шаблон внутри .js файла.
Для этого приходим из корневой директории в папку «js» и открываем для редактирования файл script.js
Чтобы наш js файл начал строить шаблон для нашей web-странички, нужно описать логику заполнения тега <body>. В данному случае мы уже определили событие, при котором начнется заполнения видимой области. Это событие — window.onload.
Но, для того, чтобы при возникновении данного события, что-то произошло, нужно описать поведение и исполнение кода внутри функции связанной с этим событием. Делаем это следующим образом.
и теперь, при событие window.onload будет исполнятся безымянная функция.
Создадим внутри этой функции именную функцию, которая будет создавать новый блочный элемент <div> c атрибутами (id=»main» и ) и поместим его как дочерний элемент к элементу <body>. Назовем эту функцию ‘template’;
сохраняем script.js и закрываем его, теперь переходим в файл style.css и создаем в нем стиль класса «mainclass».
сохраняем файл style.css и закрываем.
Теперь открываем в браузере наш файл index.html — и видим результат.
p.s.: в планах каждый свободный выходной добавлять новые полезные уроки по native javascript с детальным описанием и более интересными примерами.
p.s.s.: комментарий для минусов ниже.
Привет, я только начал учить JS)
Решил повторить за тобой, но при запуске index.htm пустота. Так и должно быть?)
Можно поинтересоваться — а зачем это всё?:) Может, я что-то не понимаю, но это изобретение какого-то велосипеда..
коммент для минусов.
такое вроде уже в 4м классе должны уметь делать. Ну, сразу после азбуки и 2+2.
Читать ещё на Пикабу
Любитесь
Как браузер рендерит веб-страницу
Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере.
Чтобы быстро разобраться в основах можно почитать следующие 3 статьи:
Затем, чтобы погрузиться в детали — можно прочитать статью:
Статья достаточно большая, поэтому лучше её читать постепенно и не один раз. Я читал раза 3 с перерывами и выписал для себя основные моменты:
Браузер отправляет запрос на сервер и получает в ответ текстовый HTML файл с заголовком Content-Type: text/html; charset=UTF-8
Браузер парсит полученный файл и создаёт DOM (Document Object Model)
Браузер считывает CSS из всех ресурсов и строит CSSOM (CSS Object Model)
CSSOM не содержит не визуальные элементы: script, meta, title, …
Для построения CSSOM используются: стандартные стили браузера, авторские стили (которые и пишут разработчики), стандартные стили описанные в W3C CSS и правила каскадного наследования CSS
DOM Tree + CSSOM Tree = Render Tree
Содержит лишь видимые на экране элементы
Именно это дерево использует бразуер для отображения контента, который мы видим в браузере
Процесс отрисовки страницы
Элементы на странице могут перекрывать друг друга (z-index). Поэтому браузер располагает элементы на различных слоях.
Каждый слой может рендериться в отдельном потоке.
Происходит объединение упомянутых выше слоёв
Слои разделены на тайлы, так как композиция слоёв будет происходить при изменении стилей или размеров окна браузера
Все перечисленные выше операции представляют собой Critical Rendering Path (CRP) — последовательность операций, которые необходимо произвести браузеру для отображения страницы пользователю
Парсинг и сторонние ресурсы
Браузер парсит HTML по мере скачивания (не ждёт скачивания всего документа)
Парсинг HTML происходит в основном потоке исполнения JavaScript
Parser Blocking Scripts
Это скрипты, которые приостанавливают парсинг HTML
Если парсер натыкается на тэг script — парсинг приостанавливается и происходит выполнение скрипта
Если скрипт находится в отдельном файле, браузер приостанавливает парсинг, скачивает файл, выполняет его (в главном потоке) и лишь потом продолжает построение DOM дерева
Браузер приостанавливает парсинг, так как мы можем изменять DOM с помощью JavaScript. Иначе мы бы столкнулись с race condition между JavaScript и парсером, ведь JavaScript может модифицировать DOM дерево
Можно использовать async атрибут тэга script, чтобы не блокировать парсер при скачивании js-файла, файл будет выполенен, как только загрузится.
Также можно использовать тэг defer, который работает также как async, но выполнение скрипта произойдёт только когда завершится парсинг
Render Blocking CSS
Построение CSSOM происходит в главном потоке
Построение CSSOM не происходит по мере скачивания (в отличии от построения DOM). CSSOM обновится, когда сторонний файл со стилями будет загружен целиком. Пока стили не загружены, Render Tree не будет обновлено. Поэтому CSS — render blocking ресурс.
В то же время, построение DOM дерева продолжается.
Если парсер натыкается на тэг script, то он будет скачан, но не будет выполнен до тех пор, пока не завершится загрузка файла со стилями. Это важно, так как мы можем манипулировать CSS свойствами через JavaScript. Такой CSS называется script-blocking.
Так как построение Render Tree приостановлено, следовательно и Critical Render Path застопорился, и контент не обновляется.
Чтобы не блокировать рендеринг, необходимо загружать стили как можно раньше, желательно в секции head
Какие статьи помогли вам понять, как браузер рендерит страницу?
Ответ на пост «CSS и авторские права»
Кому интересно — вот код на jQuery, который вставляет мягкие переносы в русские слова и позволяет тексту, выключенному по ширине, быть более плотным и визуально приятным, особенно при малой ширине блока. Легко перепиливается на чистый JS:
Как быстро написать слайдер на JS?
Во многих сайтах и программах уже давным — давно используются такие элементы взаимодейтсвия пользователем, как «Слайдер», по сути это одна большая фотография которую можно переключать с помощью стрелочек или по нажатию на клавиши. Удобно когда на экране мало места, а показать множество фотографий нужно.
Как же создать вот такой слайдер?
Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.
1. Пишем структуру
4. Заполняем объект
Пишем структуру
Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».
Пишем стили
Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.
Пишем скрипт
Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.
Заполняем объект
Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ‘ ‘ », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.
У нас есть рабочий и очень простенький слайдер для переключения фотографий, которые мы заполняем в объект. Все это работает без сбоев и хорошо.
Фулстек-извращенец
Фронтендеры каждые 2 года:
Opera блокирует AdBlock и любые средства редактирования вёрстки на сервисах Яндекса! Опера продалась? Сговор?
UPD. К посту есть вопросы #comment_226189438
Сегодня зашел на Яндекс.Кью, решил отключить через AdBlock вопросы, которые отображаются сбоку, ибо надоедают. Открываю AdBlock. И что же я вижу? Кнопки «заблокировать элемент» нету! Окей, не беда подумал я. Ведь у меня ещё есть StyleBot. Который позволяет редактировать верстку на любом сайте и что же я вижу? Опера блокирует открытие данного расширения именно на сайтах яндекса! Кинопоиск, Кью, Дзен и тд. Не ожидал такой подставы от любимого браузера((
Боль бэка))
Этот парень не перестаёт удивлять
Эффект неонового свечения текста HTML CSS
Всем привет, новое видео от меня!
Создаем эффект неонового свечения на тексте на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Можно применять для создания оригинальных заголовков на любом сайте. Легко поменять цвет свечения, скорость движения линии, которая скрывает текст, размер текста и т.д. Полностью гибкое решение.
Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.
Добро пожаловать на рынок труда!
Ответ на пост «Курсы сварщика от службы занятости»
В прошлом году подавал заявку на обучение по программе «Веб-дизайн и разработка».
Через сайт «Труд Всем», в рамках системы WorldSkills Russia, в колледже небольшого подмосковного городка. (Курсы были бесплатные для учеников)
На сайте колледжа было написано, что Доп. образование по этой программе занимает 144 часа.
Но вышло так:
Сначала пару месяцев тишины, ну подал и подал (арт.лебедев.жпг).
Потом стал писать письма и доставать кураторов, которые должны были координировать. Ответили: «да-да, мы в курсе, ждите».
Потом я начал названивать активно, и оказалось, что курс уже идёт, и вот вам «адреса и явки».
Ну, слава богу, почти ничего не пропустил, тем более, что пока ждал, повспоминал, попробовал сам кое что.
Получил несколько записанных лекций-скринкастов по вёрстке. Потом было объявлено, что сроки подрезали и испытания вот-вот через неделю. А ещё через день, что испытания не через неделю, а вот уже послезавтра, по этому давайте разберём на основе заданий прошлых лет. Потом ещё раз поменяли программу.
Испытания были дистанционно, как всё обучение. Ну страничку я сверстал быстро, менюшку, форму, кнопачки, картиночку даже нарисовал в векторе для логотипа.
Даже получил сертификат WorldSkills Russia где вёрстка была 10/10 а программирование 0/0. Потому, что все 144 часа уместились в две с половиной недели и до JS&PHP дело не дошло.
Не могу сказать что это всё было для меня бесполезным, кое что новое узнал, но был бы с нуля, было бы потерянное время на 100%.
А ещё дали корку о прохождении курса в этом колледже.
Увы, о практике речь не шла.
Панические атаки, антидепрессанты и обучение по 16 часов в день. Как я пытаюсь стать программистом
Интернет пестрит рекламными баннерами в духе «Изучи programmingLanguageName (подставьте название любого популярного языка) с нуля за 3 месяца и устройся на работу с зп от 100 000 вечнодеревянных». Предложение, конечно, заманчивое, но вряд ли осуществимое на практике для среднего человека без опыта разработки и не являющегося гением. Попытаюсь рассказать о своём пути в IT.
Программирование я открыл для себя совершенно случайно. Началось всё с того, что полтора года назад мне пришлось кое-что поправить в HTML разметке сайта компании в которой я на тот момент работал. С помощью Гугла удалось решить эту задачу. HTML мне показался весьма интересной штукой, к тому же я узнал, что существует ещё более интересный CSS. На Ютубе были найдены видео с вёрсткой примитивных лендингов. Сначала я тупо повторял за спикером и параллельно гуглил все непонятные моменты, потом начал верстать самостоятельно. Через пару месяцев пришло время JavaScript. Идея обучаться на платных курсах была отброшена почти сразу по нескольким причинам: 1. Множество негативных комментариев от программистов о качестве выпускников таких курсов. 2. Все платные курсы открывают часть уроков, чтобы заманить клиентов. Меня не удовлетворила полнота информации, предоставляемая в бесплатных уроках. 3. Не было цели как можно быстрее получить работу. Мне просто нравилось учить JS.
В апреле мой работодатель решил закрыть бизнес и я оказался на улице. Было принято окончательное решение стать разработчиком. К этому моменту у меня за плечами был опыт изучения JS примерно полгода и примерно месяц изучения React. Я решил, что смогу за пару месяцев подтянуть знания до уровня, позволяющего претендовать на позицию junior frontend-developer. Следующие 2 месяца я начинал занятия в 10-11 часов утра и заканчивал в 2-3 ночи. Без праздников и выходных. Оказалось, что кроме HTML, CSS и JavaScript нужно знать ещё кучу разных технологий и библиотек вроде Redux, Webpack, Material-UI, formik, axios, да тысячи их. Также было сделано открытие: знать синтаксис языка, писать ToDo и решать задачи на codewars !== быть программистом.
В общем, список того, что нужно изучить в процессе только разрастался. Я начал переживать, что ошибся в оценке сроков, нужных для трудоустройства. Деньги заканчивались. Рассылка резюме не давала нужных результатов. Я не получал даже приглашения на интервью. Думаю, что это в совокупности с ещё рядом факторов спровоцировали первую паническую атаку. Букет, состоящий из высокого давления, головокружения, нехватки воздуха и дикого страха смерти прямо здесь и сейчас даёт весьма интересные ощущения. Терапевты из платной и бесплатной клиник поставили диагноз гипертония. На мой вопрос почему у меня развилась гипертония в 27 лет был дан ответ: «Что вы хотите, — возраст. Даже железо стареет». Сначала панические атаки были раз в неделю, спустя некоторое время они стали возникать каждый день. Нормально учиться стало невозможно. В таком состоянии я пробыл около 3 месяцев, пока наконец не попал к неврологу, который выписал антидепрессанты. Я вернулся к учёбе.
На данный момент прошло 1,5 года с момента, как я впервые встретился с HTML. До сих пор не получилось устроиться на работу. Программирование мне очень нравится и, думаю, что я его не брошу, даже если ничего не выйдет с работой. Идея окунуться в омут с головой, не имея солидной финансовой подушки, была весьма авантюрной. О решении не идти на платные курсы, готовящие профессиональных разработчиков за срок от недели до 3 месяцев не жалею, поскольку до сих пор не вижу их преимуществ перед самообучением.
Как написать сайт на javascript с нуля
Following are some simple steps in order to connect our static Web Page with Firebase.
Step by Step Implementation:
Step 1: Firstly, We are going to create a project on Firebase to connect our static web page. Visit the Firebase page for configuring your project. Visit the website and click the On Add Project button as shown below.
Step 2: Give a Name to your project and click on the Continue button.
Step 3: Now click on the Continue button.
Step 4: Now choose Default Account For Firebase and click on the Create Project button.
Step 5: Now your project is created and you are now good to go.
Step 6: Now click on the 3rd icon that’s the Web button(</>).
Step 7: Give a nickname to your web project and click on the Register App button.
Step 8: Now you will see the configuration of your App like this. Copy this code somewhere as we will use it later.
Step 9: Click on the Realtime Database as shown below.
Step 10: Now click on the Create Database button.
Step 11: Now click on the Test Mode and then click on the Enable button.
Step 12: Activate Firebase Storage. Click on Storage button in the left and the click on Get Started.
After that this box will pop up . Click on Next.
Then Click on Done.
Project Setup:
Now Create an HTML file and copy the script code which you copied in Step 8. The following file is just a sample for you to understand how to configure your project.
Как написать свой сайт на javascript
После прочтения ряда статей (например, этой) решил перейти на современный подход с использованием Node.js при написании простых сайтов с подхода «динозавров». Ниже представлен разбор примера сборки простого статического сайта с помощью Webpack 4. Статья написана, так как инструкции с решением моей задачи не нашел: пришлось собирать всё по кусочкам.
Постановка задачи
Сайт представляет собой простой набор HTML-страниц со своим CSS стилями и файлом JavaScript. Необходимо написать проект, который бы собирал наш сайт из исходников:
- из SASS (точнее SCSS) файлов формируется один CSS файл;
- из различных JavaScript библиотек и пользовательского кода формируется один JavaScript файл;
- HTML страницы собираются с помощью шаблонизатора, где содержимое шапки и футера можно разнести по отдельным файлам.
В собранном сайте не должны использоваться React, Vue.js.
При выборе технологий выбираются по возможности наиболее популярные на данный момент. По этой причине отказался и от Grunt и Gulp в пользу Webpack, хотя, если честно, синтаксис Gulp мне понравился больше своим однообразием.
Для примера будет сверстано несколько страничек на базе Bootstrap 4. Но это только для примера.
Предполагается, что Node.js установлен (в Windows просто скачивается установщик и устанавливается в стиле «далее, далее»), и вы умеете работать с командной строкой.
Update. Нужно получить набор готовых HTML страниц, которые можно залить на хостинг без дополнительных настроек (например, на GitHub Pages) или открыть локально на компьютере.
Структура проекта
Общая структура проекта представлена ниже:
Та же структура, но с показом файлов, которые присутствуют в примере:
Под favicon выделена целая папка, так как в современном web обычным одним ico файлом не обойтись. Но для примера используется только этот один файл.
Спорным решением может показаться разделение картинок на две папки: img и uploads . Но здесь использовал идеологию расположения файлов из WordPress. На мой взгляд, кидать все изображения в одну папку — не очень хорошая идея.
Для работы с проектом использую Visual Studio Code, которым очень доволен. Особенно мне нравится, что командная строка встроена в программу и вызывается через Ctrl + `.
Сделаем болванку Node.js проекта. Для этого создадим папку нашего проекта с вышеописанной структурой и перейдем в неё в командной строке, где вызовем команду для создания файла package.json .
На все вопросы можно просто отвечать, нажимая Enter , если заполнять подробную информацию не хочется.
Установим три общих пакета, которые нам потребуются в любом случае: webpack , webpack-cli (работу с командной строкой в webpack вынесли в отдельный пакет) и webpack-dev-server (для запуска локального сервера, чтобы в браузере сразу отображались сохраненные изменения проекта).
Файл package.json сейчас выглядит примерно так:
Также создастся файл package-lock.json , который вообще не трогаем. Но в git репозиторий добавлять этот файл нужно, в отличии от папки node_modules , которую нужно прописать в файле .gitignore , если пользуетесь git.
Собираем JavaScript
Так как Webpack создан в первую очередь для сборки js файлов, то эта часть будем самой простой. Чтобы можно было писать javascript в современном виде ES2015, который не поддерживается браузерами, поставим пакеты babel-core , babel-loader , babel-preset-env .
После создаем файл настроек webpack.config.js с таким содержимым:
В разделе entry (точки входа) указываем, какой js файл будем собирать, в разделе output указываем путь в папке dist , куда будем помещаться собранный файл. Обратите внимание, что в webpack 4 в пути output саму папку dist указывать не нужно! И да, как же мне не нравится, что в одном файле webpack в одних случаях нужно писать относительный путь, в других случаях относительный путь в специальной папке, в третьих случаях нужен уже абсолютный путь (например, его получаем этой командой path.resolve(__dirname, ‘src/js’) ).
Также указано значение параметра devtool , равное: source-map , что позволит создавать карты исходников для js и css файлов.
Для обработки конкретных файлов (по расширению, по месторасположению) в webpack создаются правила в разделе rules . Сейчас у нас там стоит правило, что все js файлы пропускаем через транслятор Babel, который преобразует наш новомодный ES2015 в стандартный javascript вариант, понятный браузерам.
В нашем тестовом примере мы верстаем наши странице на Boostrap 4. Поэтому нам нужно будет установить три пакета: bootstrap , jquery , popper.js . Второй и третий пакет мы устанавливаем по требованию Bootstrap.
Обратите внимание на то, что эти три пакета нам нужны именно для самого сайта, а не для его сборки. Поэтому эти пакеты мы устанавливаем с флагом —save , а не —save-dev .
Теперь можно приступить к написанию нашего index.js файла:
В качестве примера пользовательского кода js просто перекрасили цвет текста на синий.
Теперь можно перейти к сборке js файла. Для этого в файле package.json в разделе scripts пропишем следующие npm скрипты:
Теперь при запуске в командной строке строчки npm run dev произойдет сборка проекта (css и html файлы потом также будут собираться этой командой), и в папке /dist/js появятся файлы bundle.js и bundle.js.map .
При запуске команды npm run build также произойдет сборка проекта, но уже итоговая (с оптимизацией, максимальной минимизацией файла), которую можно выкладывать на хостинг.
При запуске npm run watch запускается режим автоматического просмотра изменений файлов проекта с автоматическим допостроением измененных файлов. Да, чтобы в командной строке отключить этот режим (например, чтобы можно было написать другие команды) можно нажать Ctrl + C (как минимум в PowerShell).
При запуске npm run start запустится локальный сервер, который запустит html страницу и также будет отслеживать изменения в файлах. Но пока этой командой не пользуемся, так как сборку html страниц не добавили.
Режим построения проекта создает или переписывает файлы в папке dist . Но во время разработки проекта при разных сборках файлы могут переименовываться, удаляться. И Webpack не будет следить, чтобы уже ненужные файлы, оставшиеся после предыдущих сборок, удалялись из папки dist . Поэтому добавим еще один пакет clean-webpack-plugin , который будет очищать папку dist перед каждой сборкой проекта.
Update 2018.04.11. Пришлось отказаться от clean-webpack-plugin . Почему? Когда запускаешь сервер через команду npm run start ( webpack-dev-server —mode development —open ), то webpack компилирует файлы автоматом, не сохраняя их в папку dist . И это нормально. Но при этом папка dist очищается из-за наличия clean-webpack-plugin . В результате в режиме работы локального сервера папка dist пустует, что негативно сказывается на работе с git (только в случае, если вы в git репозиторий сохраняется сборку проекта, как и я): после каждого запуска сервера появляется куча изменений из-за удаленных файлов. Было бы хорошо, чтобы очистка папки dist происходила только при полноценной сборке, например, npm run build-and-beautify (об этой команде ниже). Плагин clean-webpack-plugin настроить нужным способом не смог. Поэтому использую другой плагин del-cli , который не связан с webpack и работает отдельно.
Внесем изменения в файл package.json .
Сборка CSS файла
CSS файл будем собирать из SCSS файлов, под которые у нас зарезервирована папка src/scss . В ней создадим файл style.scss , например, со следующим содержимым:
Обратите внимание на то, что стили Bootstrap подключаем не через его CSS файл, а через SСSS ( @import «node_modules/bootstrap/scss/bootstrap» @import «
bootstrap/scss/bootstrap»; ), который позволит в случае надобности переписать те или иные свойства библиотеки, использовать его миксины и др. Но что печалит. Если при сборке js файла при подключении js файла Bootstrap библиотеки Webpack знает, где находятся нужные файлы, то при подключении стилей нужно указывать путь к папке в node_modules .
Для обработки css файлов нам будут нужны следующие модули: node-sass , sass-loader , css-loader и extract-text-webpack-plugin (говорят, что в следующей версии Webpack в последнем плагине надобность отпадет).
Важно! На момент написания статьи плагин extract-text-webpack-plugin в стабильной версии не умеет работать с Webpack 4. Поэтому нужно устанавливать его beta версию через @next :
Надеюсь, что вскоре можно будет устанавливать все плагины по нормальному:
В webpack.config.js добавим следующие изменения:
Обратите внимание на то, что в точках входа entry мы добавили новый входной файл style.scss , но выходной файл указали не в output , а в вызове плагина ExtractTextPlugin в разделе plugins . Включаем поддержку карт источников sourceMap для пакетов sass-loader и css-loader .
Также можно заметить, что тут нет пакета style-loader , который чаще всего упоминается при работе с css в Webpack. Данный пакет встраивает css код в файл HTML, что может быть удобно для одностраничных приложений, но никак не для многостраничного.
И самый спорный момент. Для пакета css-loader мы добавили параметр url , равный false . Зачем? По умолчанию url=true , и если Webpack при сборке css находит ссылки на внешние файлы: фоновые изображения, шрифты (например, в нашем случае есть ссылка на файл шрифта url(../fonts/Roboto-Regular.ttf) ), то он эти файлы попросит как-то обработать. Для этого используют чаще всего пакеты file-loader (копирует файлы в папку сборки) или url-loader (маленькие файлы пытается встроить в HTML код). При этом прописанные относительные пути к файлам в собранном css могут быть изменены.
Но с какой проблемой столкнулся на практике. Есть у меня папка src/scss с SСSS кодом. Есть папка src/img с картинками, на которые ссылаются в SСSS коде. Всё хорошо. Но, например, мне потребовалось подключить на сайт стороннюю библиотеку (например, lightgallery). SCSS код у неё располагается в папке node_modules/lightgallery/src/sass , который ссылается на картинки из папки node_modules/lightgallery/src/img через относительные пути. И если добавить стили библиотеки в наш style.scss , то file-loader будет искать картинки библиотеки lightgallery в моей папке src/img , а не там, где они находятся. И побороть я это не смог.
Update. С последней проблемой можно справиться, как подсказал Odrin, с помощью пакета resolve-url-loader и file-loader.
Пример решения
То есть пакет resolve-url-loader вместо относительных путей ставит пути, которые webpack поймет. А уже file-loader будет копировать нужные файлы. Проблема в свойстве name в file-loader. Если его указать как name: ‘[path]/[name].[ext]’ , то в моей примере в папке dist появится папка distnode_moduleslightgallerysrcimg , в которой уже находятся изображения. Нет, в css будут прописаные верные пути до этой папки, но это будет не красиво. Поэтому лучше название файла указывать без пути (например name: ‘img/[name].[ext]’ ). Правда, тогда все картинки пойдут в одну папку — не всегда это будет полезно.
Поэтому установкой url=false говорим, что все ссылки на файлы в SCSS коде не трогаем, пути не меняем, никакие файлы не копируем и не встраиваем: с ними разберемся потом отдельно. Возможно, это решение плохое, и вы предложите более правильный подход.
Сборка HTML страниц
Перейдем к самому веселому: к сборке HTML страниц, где у меня возникли самые большие трудности.
Для сборки HTML страниц будем использовать плагин html-webpack-plugin , который поддерживает различные виды шаблонизаторов. Также нам потребуются пакет raw-loader .
В качестве шаблонизатора HTML будем использовать шаблонизатор по умолчанию lodash. Вот так будет выглядеть типичная HTML страница до сборки:
Вначале в переменной data прописываем все наши переменные страницы, которые хотим использовать на этой странице. Потом встраиваем шаблоны шапки и футера через _.template(require()) .
Важное уточнение. В статьях про сборку HTML страниц через html-webpack-plugin обычно подключают встраиваемые шаблоны просто через команду:
Но при этом в этих встраиваемых шаблонах синтаксис lodash работать не будет (я так и не понял, почему так происходит). И данные из переменной data туда не передадутся. Поэтому принудительно говорим webpack, что мы встраиваем именно шаблон, который надо обработать как lodash шаблон.
Теперь мы можем использовать полноценные lodash синтаксис в встраиваемых шаблонах. В коде файла header.html ниже через <%=title%> печатаем заголовок статьи.
В пакете html-webpack-plugin есть возможность генерировать несколько HTML страниц:
Но прописывать для каждой страницы создание своего экземпляра плагина точно не есть хорошо. Поэтому автоматизируем этот процесс, найдя все HTML файлы в папке src/html/views и создадим для них свои версии new HtmlWebpackPlugin() .
Для этого в файле webpack.config.js внесем следующие изменения:
Функция generateHtmlPlugins будет осуществлять поиск всех HTML страниц. Обратите внимание, что в коде функции есть настройка inject: false , которая говорит Webpack, что не нужно встраивать ссылки на js и css файл в HTML код самостоятельно: мы сделаем всё сами вручную в шаблонах header.html и footer.html .
Также нужно отметить, что встраиваемые шаблоны обрабатываются плагином raw-loader (содержимое файла просто загрузить как текст), а не html-loader , как чаще всего предлагают. И также, как в случае с CSS, не использую пакеты file-loader или url-loader .
И остается последний необязательный момент для работы с HTML. JavaScript файл и CSS файл у нас будут минимифицроваться. А вот HTML файлы хочу, наоборот, сделать красивыми и не минифицировать. Поэтому после сборки всех HTML файлов хочется пройтись по ним каким-то beautify плагином. И тут меня ждала подстава: не нашел способа как это сделать в Webpack. Проблема в том, что обработать файлы нужно после того, как будут вставлены встраиваемые шаблоны.
Нашел пакет html-cli, который может это сделать независимо от Webpack. Но у него 38 установок в месяц. То есть это означает два варианта: либо никому не нужно приводить к красивому внешнему виду HTML файлы, либо есть другое популярное решение, о котором я не знаю. А ради только одной этой функции Gulp прикручивать не хочется.
Устанавливаем этот плагин:
И в файле package.json прописываем еще два скрипта, которые после работы Webpack будут приводить к красивому внешнему виду HTML файлы с установкой табуляции в два пробела.
Update 2018.04.11 Обратите внимание на то, что в команду build-and-beautify я добавил еще del-cli dist , который очищает папку dist перед сборкой.
Поэтому для итоговой сборки рекомендую использовать не команду *npm run build, а команду npm run build-and-beautify.
Копирование оставшихся файлов
Мы сгенерировали js, css файлы, HTML страницы. Остались файлы изображений, шрифтов и др., которые мы не трогали и сознательно не копировали через file-loader или url-loader . Поэтому скопируем все оставшиеся папки через плагин copy-webpack-plugin :
В файле webpack.config.js внесем изменения:
Всё. Теперь командой npm run build-and-beautify собираем проект и в папке dist появится собранный статический сайт.
Итоговые файлы
Файл package.json:
Файл webpack.config.js:
Файл шаблона index.html:
Файл шаблона шапки header.html:
Файл шаблона footer.html:
Сгенерированный index.html:
Исходники
Ссылка на репозиторий с рассмотренным проектом.
- Назад
- Обзор: Express Nodejs
- Далее
Эта вторая статья в нашем учебнике Express показывает, как создать каркас проекта веб-сайта, который позже можно будет заполнить с помощью путей сайта, шаблонов представлений и обращений к базе данных.
| Необходимые знания: | Установить среду разработки Node. Просмотреть учебник Express. |
|---|---|
| Задача: | Научиться запускать свои проекты используя Express Application Generator. |
Обзор
В этой статье показано, как создать каркас сайта с помощью средства Express Application Generator. Каркас затем можно будет заполнить с помощью путей сайта, шаблонов/представлений и обращений к базе данных. Мы используем это средство для создания основы нашего сайта Local Library. К основе будет добавлен код, необходимый сайту. Создание каркаса чрезвычайно просто — требуется только вызвать генератор в командной строке, указав имя нового проекта, дополнительно можно указать также движок шаблона сайта и генератор CSS.
Далее показано, как вызвать генератор приложений, и даётся небольшое пояснение различных вариантов представлений и CSS. Мы поясним структуру каркаса веб-сайта. В конце мы покажем, как запустить веб-сайт, чтобы убедиться, что он работает.
Примечание: Express Application Generator — не единственный генератор Express-приложений, и созданный проект —не единственный жизнеспособный способ организации ваших файлов и каталогов. Однако созданный сайт имеет модульную структуру, которую легко понять и расширить. О минимальном Express приложении смотрите Hello world example в документации Express.
Применение генератора приложений
Вы уже должны были установить express-generator , читая статью установка среды разработки Node. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:
express-generator имеет ряд параметров, которые можно увидеть, выполнив команду express —help (или express -h):
Команда express создаст проект в текущем каталоге с использованием (устаревшего) движка представления Jade и обычного CSS. Если указать express name, проект будет создан в подкаталоге name текущего каталога.
Можно выбрать движок представления (шаблон), используя —view параметр —css позволяет выбрать движок для создания CSS.
Примечание: Другие опции ( —hogan , —ejs , —hbs и пр.) для выбора шаблонизатора устарели. Используйте —view (или -v )!
Какой движок представлений следует использовать?
Express-generator даёт возможность сконфигурировать несколько популярных движков, включая EJS, Hbs, Pug (Jade), Twig, и Vash, но по умолчанию выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.
Примечание: При желании использовать шаблонизатор, который не поддерживается генератором, просмотрите документацию Using template engines with Express и документацию для нужного шаблонизатора.
Как правило, следует выбрать шаблонизатор, который имеет всю необходимую вам функциональность и обеспечивает вам высокую производительность — так же, как вы выбираете любой другой компонент! Некоторые критерии для сравнения шаблонизаторов:
- Время до получения результата — если ваша команда уже имела дело с шаблонизатором, то, скорее всего, продуктивнее будет использовать этот шаблонизатор. Если нет, тогда следует учесть все относительные сложности изучения кандидатов в шаблонизаторы.
- Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество. Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни веб-сайта.
- Стиль — некоторые шаблонизаторы используют особую разметку для отображения вставленного контента внутри «обычного» HTML, а другие строят HTML, используя специальный синтаксис (например, используя отступы или блочные имена).
- Производительность и время интерпретации.
- Особенности — следует выбирать движок с учётом таких особенностей:
- Наследование макета: позволяет определить базовый шаблон и затем наследовать только те части, которые отличаются для конкретной страницы. Это, как правило, лучший подход, чем создание шаблонов путём включения нескольких необходимых компонентов или создания шаблона с нуля каждый раз.
- Поддержка «Include»: позволяет создавать шаблоны, включая другие шаблоны.
- Краткий синтаксис управления переменными и циклами.
- Возможность фильтровать значения переменных на уровне шаблона (например, делать переменные в верхнем регистре или форматировать значение даты).
- Возможность создавать выходные форматы, отличные от HTML (например, JSON или XML).
- Поддержка асинхронных операций и потоковой передачи.
- Возможность использования как на клиенте, так и на сервере. Возможность применения движка шаблона на клиенте позволяет обслуживать данные и выполнять все действия или их большую часть на стороне клиента.
Примечание: В интернете множество ресурсов, которые помогут сравнить различные варианты!
Для этого проекта мы используем шаблонизатор Pug (в прошлом назывался Jade) — один из популярнейших Express/JavaScript шаблонизаторов, который поддерживается в Express-generator «из коробки».
Какие шаблонизаторы CSS следует использовать?
Express Application Generator позволяет создавать проекты, настроенные для применения шаблонизаторов CSS: LESS, SASS, Compass, Stylus.
Примечание: простой CSS имеет некоторые ограничения, затрудняющие выполнение задач. Шаблонизаторы CSS позволяют использовать более эффективный подход для создании таблиц стилей CSS, но требуют компиляции файлов таблиц стилей в стандартный CSS для применения в браузере.
Как и в случае с шаблонизаторами сайта, следует применять шаблонизатор, обеспечивающий высокую производительность работы. В этом проекте мы используем обычный CSS (по умолчанию), поскольку простота наших требований к CSS не оправдает применение чего-то более сложного.
Какую базу данных следует использовать?
Сгенерированный код не использует и не содержит в себе какой-либо базы данных. Express может использовать любой движок базы данных, который поддерживается Node (Express не предъявляет каких-либо особых требований к базе данных).
Мы обсудим взаимодействие с базой данных в следующей статье.
Создание проекта
Разрабатывая пример — приложение Local Library, мы построим проект с именем express-locallibrary-tutorial. Используем библиотеку шаблонов Pug, а движок CSS применять не будем.
Выберем место для нового проекта — каталог express-locallibrary-tutorial — и выполним команду:
Будет создан каталог express-locallibrary-tutorial и выведен список созданных внутри каталога проектных файлов.
После списка файлов генератор выведет инструкции для установки зависимостей (указанных в файле package.json) и запуска приложения (инструкции предназначены для Windows; для Linux/Mac OS X они могут слегка отличаться).
Запускаем каркас сайта
Сейчас у нас есть готовый каркас проекта. Сайт пока ничего не делает, но его стоит запустить, чтобы убедиться в его работоспособности.
-
Прежде всего установим зависимости (команда install запросит все пакеты зависимостей, указанные в файле package.json).
-
В Windows используйте команду:
У нас получилось веб-приложение на базе Express, работающее по адресу localhost:3000.
Примечание: Можно также запустить приложение командой npm start . Переменная DEBUG, указанная в примере, включает логирование в консоль для дальнейшей отладки. Так, при посещении страницы веб-приложения, вы увидите похожий вывод в консоль:
Обеспечиваем
перезапуск сервера при изменении файловЛюбые изменения, внесённые на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.
Одно из самых простых средств для этого —
nodemon. Его обычно устанавливают глобально (так как это «инструмент»), но сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):Если вы предпочитаете установить nodemon глобально, не только для этого проекта, надо выполнить команду
В файле package.json проекта появится новый раздел с этой зависимостью (на вашей машине номер версии nodemon может быть другим) :
Поскольку nodemon не установлен глобально, его нельзя запустить из командной строки (пока мы не добавим его в путь), но его можно вызвать из сценария NPM, так как NPM знает все об установленных пакетах. Раздел scripts в файле package.json исходно будет содержать одну строку, которая начинается с «start» . Обновите его, поставив запятую в конце строки, и добавьте строку «devstart», показанную ниже:
Теперь можно запустить сервер почти так же, как и ранее, но командой npm run devstart:
- В Windows:
- Для macOS или Linux:
Примечание: Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя rs в командной строке). Вам всё равно придётся обновить страницу в браузере .
Теперь мы должны выполнять команду « npm run <scriptname>» а не просто npm start , поскольку «start», это, по сути, команда NPM, сопоставленная сценарию в файле package.json. Можно заменить команду в сценарии «start», но, так как мы хотим использовать nodemon только во время разработки, разумно создать новую команду сценария.
Созданный проект
Давайте посмотрим на созданный проект.
Структура каталогов
После установки зависимостей проект имеет такую структуру файлов (файлы — это элементы без префикса»/»). Файл package.json определяет имя файла с приложением, сценарии запуска, зависимости и др. Сценарий запуска задаёт точку входа приложения, у нас — файл JavaScript /bin/www. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает app.js для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога routes/. Шаблоны хранятся в каталоге /views.
Далее файлы описаны более подробно.
package.json
Файл package.json указывает зависимости приложения и содержит другие данные:
Зависимости включают пакет express и пакет для выбранного движка представления (pug). Кроме того, указаны пакеты, полезные во многих веб-приложениях:
- body-parser: — анализирует часть тела входящего запроса HTTP и облегчает извлечение из него различных частей. Например, мы можно читать POST- параметры.
- cookie-parser: разбирает заголовок и заполняет req.cookies (по сути, даёт удобный метод для доступа к информации cookie).
- debug: небольшой отладчик, работающий по образцу методики отладки ядра node.
- morgan: средство логирования запросов HTTP для node.
- serve-favicon: средство обработки favicon (значка, используемого для представления сайта на вкладках браузера, закладках и т. д).
Раздел «scripts» определяет скрипт» start», выполняемый при запуске сервера командой npm start . Можно видеть, что самом деле выполняется команда node ./bin/www. Кроме того, определяется script «devstart«, который вызывается командой npm run devstart . Запускается тот же файл ./bin/www ,но командой nodemon вместо node.
Файл www
Файл /bin/www – это входная точка приложения. Сначала в файле создаётся объект основного приложения, расположенного в app.js — выполняется app= require(./app) .
Примечание: require() — это глобальная функция node для импорта модулей в текущий файл. Для модуля app.js указан относительный путь, а расширение файла по умолчанию (.js) опущено.
Оставшаяся часть кода настраивает порт сервера node для HTTP (определён в переменной среды или 3000, если не определён), и начинает обработку и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.
Файл app.js
Этот файл создаёт объект приложения express (с именем app , по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:
Именно этот экспортированный объект использован в рассмотренном ранее файле www.
Рассмотрим детали файла app.js. Сначала при помощи require(…) выполняется импорт некоторых полезных библиотек node: express, serve-favicon, morgan, cookie-parse, body-parser (они ранее были загружены для нашего приложения командой npm install), а также path из основной библиотеки node (применяется для разбора путей каталогов и файлов).
Затем require запрашивает модули из каталога путей route. Эти модули и файлы содержат код для обработки конкретного набора соответствующих путей (URL маршрутов). Если мы расширим каркас приложения, например, чтобы получить список книг библиотеки, нам следует добавить новый файл для обработки пути, связанного с книгами.
Примечание: Здесь мы только импортируем модули. В действительности эти пути ещё не используются — это произойдёт в файле несколько позже.
Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение ‘view’, указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка ‘view engine’, указывая на библиотеку шаблона (у нас — «pug»).
Следующие строки вызывают app.use(…), чтобы добавить промежуточные (middleware) библиотеки в цепочку обработки запросов. Кроме сторонних библиотек, импортированных ранее, используем библиотеку Express.static, что позволит обрабатывать статические файлы из папки /public корня проекта.
Теперь, когда промежуточные библиотеки настроены, мы добавляем (импортированный ранее) код обработки путей в цепочку обработки запросов. Импортированный код будет задавать отдельные пути для разных частей сайта:
Примечание: . пути, указанные выше (‘/’ и ‘ /users’ ) рассматриваются как префиксы путей, определённых в импортированных файлах. Так, например, если импортированный модуль users определяет путь для /profile, для доступа следует указать /users/profile. Мы поговорим подробнее о путях в последующей статье.
Последняя в файле промежуточная библиотека добавляет методы обработки ошибок и ответов 404 от HTTP.
Объект app приложения Express теперь полностью настроен. Остался последний шаг — добавить его к экспортируемым элементам модуля (это позволит импортировать его в файле /bin/www).
Пути (Routes)
Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.
Путь определяет колбэк-функцию, которая будет вызвана, когда обнаружится HTTP GET-запрос корректного вида. Образец для сопоставления пути задаётся при импорте модуля — (‘ /users ‘) плюс что-то, определяемое в этом файле (‘ / ‘). Иными словами, этот путь будет использован, когда получен URL-запрос /users/ .
Примечание: запустите сервер и задайте в браузере URL http://localhost:3000/users/ . Вы должны увидеть сообщение: ‘respond with a resource’.
Стоит отметить, что колбэк-функция имеет третий аргумент — ‘ next ‘, т. е. является не простой колбэк-функцией, а колбэк-функцией промежуточного модуля. Пока третий аргумент не используется, но будет полезен в дальнейшем, если мы захотим создать несколько обработчиков пути ‘/’ .
Представления (шаблоны)
Файлы преставлений (шаблонов) хранятся в каталоге /views (это указано в app.js) и имеют расширение** .pug. Метод Response.render() выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из /routes/index.js (приводится ниже) можно увидеть, что роут отвечает, используя шаблон «index» с переданным значением переменной «title» из шаблона.
Шаблон для пути ‘/’ приведён ниже (файл index.pug). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением ‘Express’ помещена в определённое место шаблона.
Мини-тест
Создайте новый путь в /routes/users.js, чтобы выводить текст «You’re so cool» или «Ну, вы крутой!» по URL /users/cool/ . Проверьте его, запустив сервер и посетив в браузере http://localhost:3000/users/cool/ .
Итоги
Сейчас создан каркас проекта Local Library. Мы проверили, что он запускается с использованием Node. Но главное, что вы поняли структуру проекта, и знаете, где и как добавить пути и представления для нашей локальной библиотеки.
Далее мы изменим каркас, чтобы он работал как библиотечный веб-сайт
Смотрите также
Создать полноценный VEB-сайт полностью на языке JavaScript невозможно,да и ничего хорошего в этом нет.Надо создать HTML страницу а уже потом включать в него коды JavaScript.
Спецификация HTML 4 поддерживает атрибут type: <script type=»text/javascript»>
В HTML 4 если вы собираетесь использовать в файле только JavaScript можно прописать в мете-тегах указание на его использование:
<meta http-equiv=»Content-Script-Type» content=»text/javascript»>
При этом атрибуты language или type указывать не надо.Javascript подключается к HTML-странице и работает без компиляции. Чтобы подключить Javascript надо в странице указать:
<script language=»JavaScript»>
Здесь пишется содержимое JS
</script>Можно подключить и так:
<script language=»JavaScript»> </script>Запишем пример включения Javascript в страницу:
Размещайте JavaScript в самом конце страницы перед <body>
В качестве примера возьмем создание простейшего сайта на главной странице.
Это код данного сайта.
<html>
<head>
<title> Создание сайта </title>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″> </head>
<body>
Создание собственного сайта.
<img src=»images/com (8).gif» width=213 height=170 border=0>
</body>
</html>Теперь включим JavaScript в страницу
<html>
<head>
<title>Создание сайта </title>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″> </head>
<body>
Создание собственного сайта.
<img src=»images/com (8).gif» width=213 height=170 border=0><script language=»JavaScript»> document.write(«Это включение JavaScript») </script>
</body>
</html>В малом окне вы можете посмотреть результат включения JavaScript в HTML.
Создание собственного сайта.
В JavaScript 1.1 тег <script> поддерживает атрибут src. Если вы разместили скрипт в другом файле то надо указать путь к URL файлу, в котором содержится код:
This tutorial will show you how to convert a static website that uses HTML, CSS and JavaScript (JS) to a dynamic one using MongoDB, Express, Static HTML, CSS, JS, and Node.js.
Our tech stack will be similar to the popular MEAN/MERN stack (MongoDB, Express, Angular or React, and NodeJS). But instead of using Angular or React, we will use a templating engine called EJS (Embedded JavaScript.)
Other popular templating engines include Handlebars, Pug, and Nunjucks.
Afterwards, we will deploy our Node.js web app to DigitalOcean and cover domain names, SSL, reverse proxies, and process managers.
Learning a templating language can be easier than a JS framework. You can just write HTML, and it lets you insert the same piece of code in multiple locations (called partials) or pass server-side variables to be displayed on the front-end (such as a username).
Table of Contents
- Developing Your First Node.js Web App
- Installing Node.js
- Testing The Install
- Creating Your First Server
- Next Steps
- Templating Basics
- Passing Server-Side Data to the Front-End
- Setting Up DigitalOcean
- Connecting To Your Droplet
- Deploying Your Node.js Web App
- Configuring Your Domain Name
- Removing the Port Number From Your URL
- Running the App on Boot (Setting Up A Process Manager)
Developing Your First Node.js Web App
Installing Node.js
First, make sure you’ve installed Node.js on your local machine or VPS hosting provider. If you haven’t installed it, go to the Node.js website to do so.
With Node.js, you can write server-side code using a special form of JavaScript so you can use an already familiar language.
The Node.js installer comes bundled with the package manager NPM. NPM is a repository for Node Modules, reusable pieces of code that can extend the functionality of your server. It’s similar to a plugin repository, and Node Modules can be thought of as code snippets or libraries (depending on how large they are).
Windows Users: Need to add Node and NPM to their PATH so they can call them easily on the command line. For more in-depth instructions, see my guide here.
Testing the Install
To test that the installation has worked correctly, open a terminal window, and type node -v and npm -v . If the resulting message starts with a v and is followed by some numbers (indicating a version), then the installation has been successful. Now you’re ready to create your first server.
Creating Your First Server
Once you have created a static website, the first step in creating a Node.js app is to create an Express web server.
First, move all your website’s static files (HTML, CSS, JS, images, etc.) into a folder called public and create a file called server.js in the root directory of your website folder. In the server.js file type:
Then in the terminal, type: npm init . Press enter to accept the default parameters for all the following options, but make sure the entry point is server.js.
Finally, type: npm start and then go to the IP Address of your VPS host, or localhost:8080/index.html (or the name of one of your webpages) in the browser. The Express server you just created should now be serving your website’s static files.
Next Steps
Moving forward, we will discuss how to convert your static files to dynamic ones using the EJS templating engine. Then we’ll look at how to copy repeated code using partials and inject server-side variables to the front-end.
Templating Basics
Installing EJS
The first step to use EJS is to install it. A simple npm install ejs —save will do the trick. The —save parameter saves the module to the package.json file.
This makes it so anyone who clones the git repo (or otherwise downloads the site’s files) can install all the required Node modules for the project (called dependencies) using the npm install command instead. Then they don’t have to type npm install (module name) for however many modules they need.
Converting Static Pages to EJS Files
Next, you need to convert your static HTML files into dynamic EJS ones and set up your folder structure in the way EJS expects.
In the root directory of your website, create a folder called views. Inside that folder create two sub-folders called pages and partials. Move all your HTML files into the pages sub-folder and rename the .html file extensions to .ejs.
Your folder structure should look similar to the picture below.
Reusing Code — Creating Your First EJS Partial
When creating static sites, there’s often code that you repeat on every page such as the head (where the meta tags are located), header, and footer sections.
It’s inconvenient to change them on every page (especially on larger sites) if alterations are needed. But if you use EJS partials then you won’t have to. Editing one template (partial) file will update the code on every page that the file is included in.
We’ll take a typical part of a website to be templated, the header, as an example. Create a new file called header.ejs in the partials folder. Copy and paste all the code between the <header></header> tags on one of your EJS pages into it.
Finally, on all pages with a header delete the code between the <header></header> tags (the same code you copied to the header.ejs partial file) and replace it with <% include(‘../partials/header’) %> . Now, you’ve created your first EJS partial. Repeat the process for any other repetitive pieces of code such as the head and footer sections.
Small Tip: If you find it hard to differentiate between your pages and partials since they have the same .ejs file extension, it can be helpful to put an underscore _ in front of the names of partials (so _ header.ejs). This is a naming convention that some developers use that can be helpful.
Rendering EJS Pages
Now we get to the exciting part: making the server render the EJS pages and partials so you can see them on the front-end.
server.js Example
First, we need to add the EJS Node module to our server. So, in the server.js file (see example above), add const ejs = require(‘ejs’); .
Second, we need to tell our Express server to use EJS so add app.set(‘view engine’, ‘ejs’); .
Now, we need to configure routes. Routes tell the server what to do when a user goes to a certain URL in your website such as http://testapp.com/login .
There are two types of routes, GET and POST. GET routes display pages and POST routes upload data from the front-end to the server (usually via a form) typically before a page is rendered and the uploaded data is somehow used.
Since we only want to display our EJS pages, we will just use GET routes. Add them after the app.listen(8080) line in server.js . For the index page, the route will be:
The ‘/’ specifies the URL of the website the code will activate on, the req stands for request and res for response. So, the response returned when going to http://testapp.com is rendering (displaying to the browser) the pages/index.ejs page. Add similar routes for your other EJS pages.
Passing Server-Side Data to the Frontend
The main attraction of templating, apart from reusing code, is that you can pass server-side variables to the front-end. Either a single variable like the current user’s username, or an array, like the details of every registered user.
However, the real strength of passing server-side variables becomes apparent when using APIs or databases.
For a basic example, the below code will display «Louise» in the h2 tag of the index page:
server.js
The first name is the name of the EJS variable (the name for displaying it on the front-end), and the second is the variable that contains the data you want to send. (They don’t have to be identical.)
index.ejs
For a simple array, you can use this example instead, which will create a p tag for every name in the listnames variable:
server.js
index.ejs
Congratulations. You’ve finished developing your first Node.js web app. In the next part, we will see how we can make it live (deploy it) on the web so you can show it off.
Deploying Your First Node.js Web App
There are many hosting platforms you can use to deploy your Node.js web apps such as Section, Heroku, Vultr, Linode, Google Cloud Platform and Amazon Web Services.
In this walk-through, we will be using DigitalOcean to deploy our Node.js app.
Setting up DigitalOcean
First, create an account on the DigitalOcean platform. There are discount codes available to add free credit to your account such as the code available in the Github Student Developer Pack. Be aware that you can only redeem one code per account.
Second, you need to create a droplet. A droplet is a VPS (Virtual Private Server.) It’s similar to a Linux VM which is hosted on a server farm somewhere.
Once you’ve logged into your account, go to droplets under the Manage heading and click create and then droplets.
You can leave most of the settings as the default but change the plan to the basic $5 a month which contains enough resources for your app. You can scale this up later if needed.
Also, choose the datacenter closest to the target audience of your app and change the authentication to password. While password authentication is less secure (SSH Keys is recommended), it’s much easier to set up. So, for demonstration purposes, we’ll use this method.
All that’s left now is to pick a name (hostname) and click Create Droplet.
Connecting to your Droplet
Shortly afterward, you’ll receive an email containing the username and password of your droplet which you’ll use to login.
Back on the DigitalOcean website, under droplets, click the name of your newly created droplet, and then click on Console. This will open a new tab that will let you control your droplet.
Alternatively, you can use any SSH client with the IP address and user credentials contained in the email.
On your first login, since you used password authentication, it will prompt you to set a new password. A great way to generate secure passwords and store them is a password manager like LastPass.
Deploying Your Node.js Web App
First, you’ll need to copy the code for your web app to your droplet. If you’re using source control such as Git, then it’s as simple as installing git using apt-get install git -y and then using the git clone command git clone (link to your repository) , adding the link to your repository at the end.
Second, you’ll need to install Node. Type:
Third, you’ll need to navigate to the folder containing your web app. Type ls and then enter to view all the folders in your current working directory (location). This will look like the image below:
Type cd and then the name of the folder that appears. Type ls again and you should see the files in your web app’s root directory.
Next, you’ll need to install the node modules (dependencies) for your web app. If you installed all your modules with -save at the end, which saves them to the package.json file, then just type npm install and press enter.
If not, when you run npm start an error will appear with module not found. Type npm install (module name) and press enter and then try running npm start again. Repeat the process until the error disappears.
If you need to install MongoDB (if you’ve created a MongoDB database), then follow these instructions.
Finally, type npm start to start your web app. Now that your web app is running, in a new browser tab, type the IP Address of your droplet (found in the email that DigitalOcean sent when you created the droplet) followed by a colon and the port your app runs on. For example, 167.172.54.51:8080 .
If you’re using an Express web server (which if you followed my getting started with Node.js guide, you did), you’ll find the port number located in the app.listen() line inside the server.js file. For example, app.listen(8080) which is a common port used.
Congratulations, your first Node.js web app should be displayed in your web browser which is running on your DigitalOcean droplet.
Configuring Your Domain Name
You typed in an IP Address and port number to view your web app but, wouldn’t you prefer a custom domain name like yourapp.com?
Assuming you’ve already bought a domain, the first step is to add a DNS record so your domain name will resolve to the IP address of your DigitalOcean droplet. A DNS record tells your browser what to do when they load your domain. In this case, it should go to the IP address of your droplet.
If you’ve not bought a domain, domain registrars like Namecheap sell domain names and often other services such as email and static/CMS hosting, though there are benefits to going with a dedicated hosting and email provider.
Netlify offers hosting for static sites and SiteGround for CMS websites. Office365 and GSuite are the kings of custom email providers. See my guide for Setting Up a Professional Email to read a comparison of Office365 and GSuite.
Login to your domain registrar and go to the advanced DNS settings of your domain. For example, on Namecheap, it’s the Advanced DNS tab on the Manage Domain screen.
You want to add a new record as follows: the type should be set to A, the host should be either @ or blank (depending on your provider), and the value should be the IP Address of your droplet. Repeat the process for the host www which will do the same for the www version of your domain.
It can take up to 24-48hrs for the changes to process, but it’s usually between 15 minutes to an hour. A quick way to check when it’s done is to go to DNSChecker. Type in your domain name and make sure the type is set to A. When the result comes back as the IP Address of your droplet, then you’ve connected your domain successfully.
The final test is to type your domain name followed by a colon and then the port number (e.g. yourdomain.com:8080 ). You should now see your web app loading.
Removing the Port Number from your URL
Now that you’ve got a cool domain name hooked up to your web app, you’ll probably want to remove that pesky port number.
We can do this by setting up what’s called a reverse proxy. A reverse proxy will tell your droplet when a user goes to yourdomain.com, it should serve the site at yourdomain.com:8080. We will use the popular reverse proxy Nginx to do so.
The first step is to install Nginx. Type the following to update your package list (so you can get the latest version) and install Nginx:
Since DigitalOcean droplets are created with a firewall enabled, you’ll have to allow Nginx through it so it can work properly. sudo ufw allow ‘Nginx Full’ will do this.
To check the installation has gone smoothly, go to the http version of your domain name e.g. http://yourdomain.com . If you see a Welcome to Nginx landing page, then it’s been successful.
The second step is to secure your reverse proxy. Currently going to https://yourdomain.com won’t work. That’s because we haven’t configured SSL yet, and we need to install a package called Certbot to do so.
To install Certbot, type the following to ensure you get the latest version:
Next, you need to add your domain to Nginx so Certbot can generate a certificate to the correct domain. Open the configuration file using sudo nano /etc/nginx/sites-available/default and replace the underscores in the server_name line to your domain. For example, server_name yourdomain.com www.yourdomain.com; . Save the file and exit by typing CTRL+x, y and then enter.
To test that there are no errors in the file, type sudo nginx -t and if there’s none, type sudo systemctl reload nginx to reload Nginx so it will use the updated configuration.
Now we just need to generate the SSL certificate. sudo certbot —nginx -d yourdomain.com -d www.yourdomain.com will start the process. You should choose option 2 for the redirect process because it will forward anyone trying to access the insecure version of your site (http) to the secure (https) version instead.
To test this, go to https://yourdomain.com and you should see the Nginx Welcome screen again.
Finally, we’re onto the last step, adding the Nginx configuration for your web app. For demonstration purposes, we’ll just modify the default one instead of creating a new one specifically for your web app. If you need to host several web apps on one droplet, you’d need to add a new configuration for each site.
Type: sudo nano /etc/nginx/sites-available/default to edit the default configuration file.
You need to change the server_name parameter to the name of your domain. For example: yourdomain.com. Under location /, proxy_pass should be changed to http://localhost:(port name) . The ssl_certificate_key should be modified: /etc/letsencrypt/live/(domain name)/privkey.pem . Finally, add the code block below to the end of the file and then type CTRL+X, and then y to exit.
Here’s a complete example of what it should look like. Note: the server_name should be the name of your domain.
To test that there are no errors in the file, type sudo nginx -t . If there’s none, type sudo systemctl reload nginx to reload Nginx so it will use the updated configuration.
Finally, you should be able to go to yourdomain.com and your web app will be running.
Running the App on Boot (Setting up a Process Manager)
You’ve hooked your domain name up to your droplet and configured Nginx to serve your web app, but how do you keep it running all the time especially after restarting your droplet?
That’s where a process manager comes in. It will manage your Node.js web app, log any errors, and start/stop it as needed. We will be using the process manager called PM2.
The first step is to install PM2 using sudo npm install pm2@latest -g . Next, to run it on boot, run pm2 startup systemd . It should say to setup the startup script, copy and paste the following command which will be sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u (username) —hp /home/(username) .
If you’re using the default login that DigitalOcean provided, this will be root. Type this into the terminal and press enter. If it says command successfully executed (like below) then it has worked.
Using the cd command, navigate to the folder of your web app. Then type pm2 start server.js . This will start the web app using pm2. Afterward, type pm2 save which will save it to be started on boot. If it says successfully saved, then it’s been saved correctly.
Finally, type sudo systemctl start pm2-(username) .
Try restarting your droplet by typing reboot and after a few minutes, go to yourdomain.com . Your web app should be up and running like normal.
If you’re looking to build on the skills you’ve learned in this tutorial, I suggest using EJS templating to work with APIs and databases.
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started
This tutorial will show you how to convert a static website that uses HTML, CSS and JavaScript (JS) to a dynamic one using MongoDB, Express, Static HTML, CSS, JS, and Node.js.
Our tech stack will be similar to the popular MEAN/MERN stack (MongoDB, Express, Angular or React, and NodeJS). But instead of using Angular or React, we will use a templating engine called EJS (Embedded JavaScript.)
Other popular templating engines include Handlebars, Pug, and Nunjucks.
Afterwards, we will deploy our Node.js web app to DigitalOcean and cover domain names, SSL, reverse proxies, and process managers.
Learning a templating language can be easier than a JS framework. You can just write HTML, and it lets you insert the same piece of code in multiple locations (called partials) or pass server-side variables to be displayed on the front-end (such as a username).
Table of Contents
- Developing Your First Node.js Web App
- Installing Node.js
- Testing The Install
- Creating Your First Server
- Next Steps
- Templating Basics
- Passing Server-Side Data to the Front-End
- Setting Up DigitalOcean
- Connecting To Your Droplet
- Deploying Your Node.js Web App
- Configuring Your Domain Name
- Removing the Port Number From Your URL
- Running the App on Boot (Setting Up A Process Manager)
Developing Your First Node.js Web App
Installing Node.js
First, make sure you’ve installed Node.js on your local machine or VPS hosting provider. If you haven’t installed it, go to the Node.js website to do so.
With Node.js, you can write server-side code using a special form of JavaScript so you can use an already familiar language.
The Node.js installer comes bundled with the package manager NPM. NPM is a repository for Node Modules, reusable pieces of code that can extend the functionality of your server. It’s similar to a plugin repository, and Node Modules can be thought of as code snippets or libraries (depending on how large they are).
Windows Users: Need to add Node and NPM to their PATH so they can call them easily on the command line. For more in-depth instructions, see my guide here.
Testing the Install
To test that the installation has worked correctly, open a terminal window, and type node -v and npm -v . If the resulting message starts with a v and is followed by some numbers (indicating a version), then the installation has been successful. Now you’re ready to create your first server.
Creating Your First Server
Once you have created a static website, the first step in creating a Node.js app is to create an Express web server.
First, move all your website’s static files (HTML, CSS, JS, images, etc.) into a folder called public and create a file called server.js in the root directory of your website folder. In the server.js file type:
Then in the terminal, type: npm init . Press enter to accept the default parameters for all the following options, but make sure the entry point is server.js.
Finally, type: npm start and then go to the IP Address of your VPS host, or localhost:8080/index.html (or the name of one of your webpages) in the browser. The Express server you just created should now be serving your website’s static files.
Next Steps
Moving forward, we will discuss how to convert your static files to dynamic ones using the EJS templating engine. Then we’ll look at how to copy repeated code using partials and inject server-side variables to the front-end.
Templating Basics
Installing EJS
The first step to use EJS is to install it. A simple npm install ejs —save will do the trick. The —save parameter saves the module to the package.json file.
This makes it so anyone who clones the git repo (or otherwise downloads the site’s files) can install all the required Node modules for the project (called dependencies) using the npm install command instead. Then they don’t have to type npm install (module name) for however many modules they need.
Converting Static Pages to EJS Files
Next, you need to convert your static HTML files into dynamic EJS ones and set up your folder structure in the way EJS expects.
In the root directory of your website, create a folder called views. Inside that folder create two sub-folders called pages and partials. Move all your HTML files into the pages sub-folder and rename the .html file extensions to .ejs.
Your folder structure should look similar to the picture below.
Reusing Code — Creating Your First EJS Partial
When creating static sites, there’s often code that you repeat on every page such as the head (where the meta tags are located), header, and footer sections.
It’s inconvenient to change them on every page (especially on larger sites) if alterations are needed. But if you use EJS partials then you won’t have to. Editing one template (partial) file will update the code on every page that the file is included in.
We’ll take a typical part of a website to be templated, the header, as an example. Create a new file called header.ejs in the partials folder. Copy and paste all the code between the <header></header> tags on one of your EJS pages into it.
Finally, on all pages with a header delete the code between the <header></header> tags (the same code you copied to the header.ejs partial file) and replace it with <% include(‘../partials/header’) %> . Now, you’ve created your first EJS partial. Repeat the process for any other repetitive pieces of code such as the head and footer sections.
Small Tip: If you find it hard to differentiate between your pages and partials since they have the same .ejs file extension, it can be helpful to put an underscore _ in front of the names of partials (so _ header.ejs). This is a naming convention that some developers use that can be helpful.
Rendering EJS Pages
Now we get to the exciting part: making the server render the EJS pages and partials so you can see them on the front-end.
server.js Example
First, we need to add the EJS Node module to our server. So, in the server.js file (see example above), add const ejs = require(‘ejs’); .
Second, we need to tell our Express server to use EJS so add app.set(‘view engine’, ‘ejs’); .
Now, we need to configure routes. Routes tell the server what to do when a user goes to a certain URL in your website such as http://testapp.com/login .
There are two types of routes, GET and POST. GET routes display pages and POST routes upload data from the front-end to the server (usually via a form) typically before a page is rendered and the uploaded data is somehow used.
Since we only want to display our EJS pages, we will just use GET routes. Add them after the app.listen(8080) line in server.js . For the index page, the route will be:
The ‘/’ specifies the URL of the website the code will activate on, the req stands for request and res for response. So, the response returned when going to http://testapp.com is rendering (displaying to the browser) the pages/index.ejs page. Add similar routes for your other EJS pages.
Passing Server-Side Data to the Frontend
The main attraction of templating, apart from reusing code, is that you can pass server-side variables to the front-end. Either a single variable like the current user’s username, or an array, like the details of every registered user.
However, the real strength of passing server-side variables becomes apparent when using APIs or databases.
For a basic example, the below code will display «Louise» in the h2 tag of the index page:
server.js
The first name is the name of the EJS variable (the name for displaying it on the front-end), and the second is the variable that contains the data you want to send. (They don’t have to be identical.)
index.ejs
For a simple array, you can use this example instead, which will create a p tag for every name in the listnames variable:
server.js
index.ejs
Congratulations. You’ve finished developing your first Node.js web app. In the next part, we will see how we can make it live (deploy it) on the web so you can show it off.
Deploying Your First Node.js Web App
There are many hosting platforms you can use to deploy your Node.js web apps such as Section, Heroku, Vultr, Linode, Google Cloud Platform and Amazon Web Services.
In this walk-through, we will be using DigitalOcean to deploy our Node.js app.
Setting up DigitalOcean
First, create an account on the DigitalOcean platform. There are discount codes available to add free credit to your account such as the code available in the Github Student Developer Pack. Be aware that you can only redeem one code per account.
Second, you need to create a droplet. A droplet is a VPS (Virtual Private Server.) It’s similar to a Linux VM which is hosted on a server farm somewhere.
Once you’ve logged into your account, go to droplets under the Manage heading and click create and then droplets.
You can leave most of the settings as the default but change the plan to the basic $5 a month which contains enough resources for your app. You can scale this up later if needed.
Also, choose the datacenter closest to the target audience of your app and change the authentication to password. While password authentication is less secure (SSH Keys is recommended), it’s much easier to set up. So, for demonstration purposes, we’ll use this method.
All that’s left now is to pick a name (hostname) and click Create Droplet.
Connecting to your Droplet
Shortly afterward, you’ll receive an email containing the username and password of your droplet which you’ll use to login.
Back on the DigitalOcean website, under droplets, click the name of your newly created droplet, and then click on Console. This will open a new tab that will let you control your droplet.
Alternatively, you can use any SSH client with the IP address and user credentials contained in the email.
On your first login, since you used password authentication, it will prompt you to set a new password. A great way to generate secure passwords and store them is a password manager like LastPass.
Deploying Your Node.js Web App
First, you’ll need to copy the code for your web app to your droplet. If you’re using source control such as Git, then it’s as simple as installing git using apt-get install git -y and then using the git clone command git clone (link to your repository) , adding the link to your repository at the end.
Second, you’ll need to install Node. Type:
Third, you’ll need to navigate to the folder containing your web app. Type ls and then enter to view all the folders in your current working directory (location). This will look like the image below:
Type cd and then the name of the folder that appears. Type ls again and you should see the files in your web app’s root directory.
Next, you’ll need to install the node modules (dependencies) for your web app. If you installed all your modules with -save at the end, which saves them to the package.json file, then just type npm install and press enter.
If not, when you run npm start an error will appear with module not found. Type npm install (module name) and press enter and then try running npm start again. Repeat the process until the error disappears.
If you need to install MongoDB (if you’ve created a MongoDB database), then follow these instructions.
Finally, type npm start to start your web app. Now that your web app is running, in a new browser tab, type the IP Address of your droplet (found in the email that DigitalOcean sent when you created the droplet) followed by a colon and the port your app runs on. For example, 167.172.54.51:8080 .
If you’re using an Express web server (which if you followed my getting started with Node.js guide, you did), you’ll find the port number located in the app.listen() line inside the server.js file. For example, app.listen(8080) which is a common port used.
Congratulations, your first Node.js web app should be displayed in your web browser which is running on your DigitalOcean droplet.
Configuring Your Domain Name
You typed in an IP Address and port number to view your web app but, wouldn’t you prefer a custom domain name like yourapp.com?
Assuming you’ve already bought a domain, the first step is to add a DNS record so your domain name will resolve to the IP address of your DigitalOcean droplet. A DNS record tells your browser what to do when they load your domain. In this case, it should go to the IP address of your droplet.
If you’ve not bought a domain, domain registrars like Namecheap sell domain names and often other services such as email and static/CMS hosting, though there are benefits to going with a dedicated hosting and email provider.
Netlify offers hosting for static sites and SiteGround for CMS websites. Office365 and GSuite are the kings of custom email providers. See my guide for Setting Up a Professional Email to read a comparison of Office365 and GSuite.
Login to your domain registrar and go to the advanced DNS settings of your domain. For example, on Namecheap, it’s the Advanced DNS tab on the Manage Domain screen.
You want to add a new record as follows: the type should be set to A, the host should be either @ or blank (depending on your provider), and the value should be the IP Address of your droplet. Repeat the process for the host www which will do the same for the www version of your domain.
It can take up to 24-48hrs for the changes to process, but it’s usually between 15 minutes to an hour. A quick way to check when it’s done is to go to DNSChecker. Type in your domain name and make sure the type is set to A. When the result comes back as the IP Address of your droplet, then you’ve connected your domain successfully.
The final test is to type your domain name followed by a colon and then the port number (e.g. yourdomain.com:8080 ). You should now see your web app loading.
Removing the Port Number from your URL
Now that you’ve got a cool domain name hooked up to your web app, you’ll probably want to remove that pesky port number.
We can do this by setting up what’s called a reverse proxy. A reverse proxy will tell your droplet when a user goes to yourdomain.com, it should serve the site at yourdomain.com:8080. We will use the popular reverse proxy Nginx to do so.
The first step is to install Nginx. Type the following to update your package list (so you can get the latest version) and install Nginx:
Since DigitalOcean droplets are created with a firewall enabled, you’ll have to allow Nginx through it so it can work properly. sudo ufw allow ‘Nginx Full’ will do this.
To check the installation has gone smoothly, go to the http version of your domain name e.g. http://yourdomain.com . If you see a Welcome to Nginx landing page, then it’s been successful.
The second step is to secure your reverse proxy. Currently going to https://yourdomain.com won’t work. That’s because we haven’t configured SSL yet, and we need to install a package called Certbot to do so.
To install Certbot, type the following to ensure you get the latest version:
Next, you need to add your domain to Nginx so Certbot can generate a certificate to the correct domain. Open the configuration file using sudo nano /etc/nginx/sites-available/default and replace the underscores in the server_name line to your domain. For example, server_name yourdomain.com www.yourdomain.com; . Save the file and exit by typing CTRL+x, y and then enter.
To test that there are no errors in the file, type sudo nginx -t and if there’s none, type sudo systemctl reload nginx to reload Nginx so it will use the updated configuration.
Now we just need to generate the SSL certificate. sudo certbot —nginx -d yourdomain.com -d www.yourdomain.com will start the process. You should choose option 2 for the redirect process because it will forward anyone trying to access the insecure version of your site (http) to the secure (https) version instead.
To test this, go to https://yourdomain.com and you should see the Nginx Welcome screen again.
Finally, we’re onto the last step, adding the Nginx configuration for your web app. For demonstration purposes, we’ll just modify the default one instead of creating a new one specifically for your web app. If you need to host several web apps on one droplet, you’d need to add a new configuration for each site.
Type: sudo nano /etc/nginx/sites-available/default to edit the default configuration file.
You need to change the server_name parameter to the name of your domain. For example: yourdomain.com. Under location /, proxy_pass should be changed to http://localhost:(port name) . The ssl_certificate_key should be modified: /etc/letsencrypt/live/(domain name)/privkey.pem . Finally, add the code block below to the end of the file and then type CTRL+X, and then y to exit.
Here’s a complete example of what it should look like. Note: the server_name should be the name of your domain.
To test that there are no errors in the file, type sudo nginx -t . If there’s none, type sudo systemctl reload nginx to reload Nginx so it will use the updated configuration.
Finally, you should be able to go to yourdomain.com and your web app will be running.
Running the App on Boot (Setting up a Process Manager)
You’ve hooked your domain name up to your droplet and configured Nginx to serve your web app, but how do you keep it running all the time especially after restarting your droplet?
That’s where a process manager comes in. It will manage your Node.js web app, log any errors, and start/stop it as needed. We will be using the process manager called PM2.
The first step is to install PM2 using sudo npm install pm2@latest -g . Next, to run it on boot, run pm2 startup systemd . It should say to setup the startup script, copy and paste the following command which will be sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u (username) —hp /home/(username) .
If you’re using the default login that DigitalOcean provided, this will be root. Type this into the terminal and press enter. If it says command successfully executed (like below) then it has worked.
Using the cd command, navigate to the folder of your web app. Then type pm2 start server.js . This will start the web app using pm2. Afterward, type pm2 save which will save it to be started on boot. If it says successfully saved, then it’s been saved correctly.
Finally, type sudo systemctl start pm2-(username) .
Try restarting your droplet by typing reboot and after a few minutes, go to yourdomain.com . Your web app should be up and running like normal.
If you’re looking to build on the skills you’ve learned in this tutorial, I suggest using EJS templating to work with APIs and databases.
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started
- 22 янв 2020
- 16
Одностраничные приложения уже давно не в новинку, а скоро вообще станут стандартом веб-разработки. Узнайте, как их создавать, — пока не поздно.
Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.
SPA (англ. Single Page Application — одностраничное приложение) — это сайт, для работы которого не требуется обновление страницы, потому что все данные загружаются с помощью скриптов.
Принцип работы SPA прост: когда вы совершаете какое-то действие, например нажимаете на ссылку, скрипт перехватывает это событие. Он отменяет действие по умолчанию и вместо этого сам обменивается данными с сервером, а потом выводит их на странице.
Обычно такой сайт быстрее загружается, потому что ему нужно скачать только определённые данные, а не всю страницу. Также часть контента может быть закеширована, то есть загружена заранее. В этом случае обновление может произойти мгновенно.
Сайты-приложения, или SPA, совместимы с большим количеством устройств. Они быстро открываются и работают на стационарных ПК, ноутбуках, планшетах, смартфонах. Мы получаем универсальный инструмент веб-разработки.
SPA отлично подходит для интернет-магазинов: пользователь может нажать на кнопку «Добавить в корзину» и тут же продолжить смотреть другие товары. Но и для обычных блогов такая технология вполне уместна.
Создать что-то подобное можно и за час. Вы можете посмотреть репозиторий с полным кодом приложения.
Чтобы SPA было удобно пользоваться, нужно правильно выстроить обмен данными с сервером. Вот несколько рекомендаций.
- При обновлении контента должен меняться адрес страницы в браузере.
- Важно, чтобы любую внутреннюю ссылку на сайте можно было скопировать, а при переходе должна загружаться релевантная страница.
- Если страница не загружается слишком долго, нужно сообщить пользователю, что идёт загрузка или что произошла ошибка.
Это небольшой список, но он очень важен, потому что иначе ваше SPA станет менее удобным, чем обычный сайт.
Для начала нужно создать макет сайта:
Обратите внимание на ссылки с классом link_internal — они загружаются без обновления. Работу других ссылок менять не нужно.
В объектах с идентификаторами title и body контент будет меняться. Вы можете добавить панель навигации, корзину или любые другие функции, но простых ссылок достаточно, чтобы объяснить принцип работы сайта.
Серверная часть будет представлять собой PHP -скрипт, который получает запрос от клиента, обрабатывает его и возвращает какие-то данные в формате JSON. В нашем случае в клиентском запросе содержится раздел ( Main или Articles ) и идентификатор страницы.
Создадим файл core.php :
Получился небольшой скрипт, которого достаточно, чтобы проверить работу приложения. Позже этот скрипт можно будет усовершенствовать — например, добавить работу с базой данных.
Можно открыть скрипт и проверить его работу:
Серверная часть может быть написана на любом языке — главное, чтобы она возвращала данные в формате JSON.
Клиентский скрипт будет перехватывать нажатия по внутренним ссылкам, а потом получать из них параметры и отправлять их на сервер.
должны преобразовываться в следующий запрос:
Но чтобы они корректно открывались, нужно создать .htaccess-файл и добавить переадресацию для ошибки 404:
ErrorDocument 404 /spa/index.html
Теперь можно заняться самим скриптом:
Теперь можно смотреть, как работает сайт:
Видно, как меняется URL в поле с адресом сайта и сам контент на странице. Это происходит практически мгновенно, потому что пока сайт находится на локальном сервере. Но, учитывая его простоту, скорость почти не уменьшится, даже если загрузить сайт в интернет.
SPA может казаться чем-то сложным, но нам хватило небольшого скрипта, чтобы заставить всё работать. Даже не пришлось никакие фреймворки использовать.
Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.Участвовать
Научитесь: Профессия Frontend-разработчик
Узнать большеСКАЧАТЬ ИСХОДНЫЕ КОДЫ
В данной статье мы создадим полноценный сайт с контрольной панелью для управления контентом. Как вы можете догадаться, в итоговой версии проекта будет очень много различных файлов. Я писал данный мануал шаг за шагом, параллельно занимаясь разработкой. Весь исходный код доступен на GitHub , и я рекомендую вам пользоваться им в процессе работы.
- Введение
- Настройка
- FastDelivery
- Конфигурация
- Тестирование
- База данных
- MVC
- Модель (Model)
- Вид (View)
- Контроллер (Controller)
- Сайт FastDelivery
- Контрольная панель
- Защита административной панели
- Управление контентом
- Лицевая часть (Front-End)
- Развертывание
- Исходный код
Express это один из лучших фреймворков для Node . У него отличная поддержка со стороны разработчиков и множество возможностей. По Express имеется много информации в интернете, раскрывающей азы работы с ним. В этой статье я хочу копнуть немного глубже основ и поделиться своим опытом создания полноценного веб-сайта.
В целом, речь пойдет не только об Express – в работе используются и другие хорошие инструменты, находящиеся в арсенале Node-разработчика.
Предполагается, что вы знакомы с Node.js, имеете установленную копию на своем компьютере и определенный опыт разработки.
Сердцем Express является Connect . Это связующий фреймворк, содержащий много полезных вещей. Если вы не понимаете что из себя представляет связующий фреймворк (middleware framework), то взгляните на небольшой пример:
Middleware (промежуточное ПО) это функция, которая принимает запросы от объектов и отвечает на них. Каждое middleware может ответить, используя соответствующий объект или передать управление следующему middleware, используя функцию next() .
В примере выше, при удалении вызова метода next() во втором middleware, строка « Hello World! » никогда не будет передана браузеру. Так, в общих чертах, работает Express.
В составе фреймворка имеется несколько предопределенных middleware, что, несомненно, экономит время. Например, парсер Body, поддерживающий типы application/json, application/x-www-form-urlencoded и multipart/form-data , который обрабатывает тело запроса. Или парсер Cookie, обрабатывающий заголовки cookie и populatesreq.cookies с помощью объекта, ассоциированного с именем cookie.
Express дополняет Connect и добавляет в него новую функциональность, делающую разработку более удобной, например, функцию логики маршрутизации. Ниже дан пример управления запросом GET:
Есть два способа настройки Express. Первый – размещение файла package.json и запуск установки через пакетный менеджер npm .
Код фреймворка будет размещен папке node_modules , и вы сможете создать копию. Однако я предпочитаю альтернативный вариант – использование командной строки. Для этого нужно запустить команду npm install -g express . После чего, Express будет готов к работе. Для проверки запустите:
После чего Express создаст скелет предварительно сконфигурированного приложения. Вот список управляющих команд для команды express :
Пример использования: express [список параметров]
-h, —help вывод справки по параметрам;
-V, —version вывод номера версии;
-s, —sessions активация поддержки сессий;
-e, —ejs активация поддержки движка ejs (по умолчанию для Jade);
-J, —jshtml активация поддержки движка jshtml (по умолчанию для Jade);
-H, —hogan активация поддержки движка hogan.js;
-c, —css активация поддержки стилей (Less|Stylus) (по умолчанию для Plain CSS);
-f, —force принудительные непустые директории.Как видите, команд не так уж и много, но этого хватает. Обычно я использую CSS-препроцессоры less и hogan для шаблонизации.
В нашем примере, нам также понадобится поддержка сессий, в чем поможет аргумент —sessions . Когда команда, приведенная в листинге выше, выполнится, структура папок нашего проекта будет такой:
Если вы откроете файл package.json , то увидите, что все необходимые зависимости были добавлены, хотя они еще не были установлены. Чтобы сделать это, просто запустите установку через npm, и появится папка node_modules .
Я осознал, что метод, описанный выше, не всегда уместен. Возможно, вы захотите поместить свои обработчики маршрутов в другую папку или нужно будет сделать что-то еще. Но, как вы поймете из следующих нескольких глав, я внесу изменения в сгенерированные структуры, что достаточно легко сделать. Так что просто думайте о команде express как о шаблонизаторе.
Для этой статьи, я разработал простой сайт вымышленной компании FastDelivery . Вот скриншот, демонстрирующий законченный дизайн:
В конце статьи, у нас получится полноценное веб-приложение, с контрольной панелью. Основная идея, заключается в том, чтобы каждой частью нашего сайта можно было управлять по отдельности.
Шаблон был создан в Photoshop и оформлен в файлах CSS ( less ) и HTML ( hogan ). Я не буду показывать процесс создания шаблона, так как это не относится к теме нашей статьи. После создания шаблона, структура файлов нашего проекта должна быть следующей:
Мы собираемся администрировать следующие элементы сайта:
- Главная (баннер в центре – заголовок и текст);
- Блог (добавление, удаление и редактирование статей);
- Услуги;
- Карьера;
- Контакты.
До написания кода нам нужно сделать несколько вещей. Представим, что наш маленький сайт должен быть развернут в трех разных местах – на локальном, тестовом и производственном серверах. Конечно, для каждого из них настройки будут различаться и нужно реализовать достаточно гибкий механизм.
Как известно, каждый скрипт node.js запускается в виде консольной программы. Поэтому мы легко можем указать аргументы, которые будут определять текущую среду. Я оформил этот код в виде отдельного модуля, чтобы позже протестировать. Вот содержание файла /config/index.js :
Пока что тут у нас всего две настройки – mode и port . Как можно догадаться, наше приложение использует разные порты для разных серверов. По этой причине, нам нужно изменить точку входа на сайт в файле app.js .
Для переключения между конфигурациями, просто добавьте тип сервера в конец команды. Например:
Вот что произойдет:
Теперь, все наши настройки находятся в одном месте и ими легко управлять.
Я большой приверженец подхода test-driven development (разработка через тестирование) . Я попытаюсь рассказать обо всех основных классах, используемых в данной статье. Разумеется, тестирование абсолютно всего сделает статью неимоверно большой, и по этой причине я этого делать не буду.
Но в целом, у вас должно сложиться понимание, как это делается при создании собственных приложений. Одним из моих самых любимых фреймворков для тестирования является jasmine . Он также доступен для установки через npm :
Давайте создадим папку, в которой будут располагаться наши тесты. Первое, что мы собираемся проверить, это наш скрипт с конфигурацией. Spec-файлы должны оканчиваться на .spec.js , поэтому наш мы назовем config.spec.js .
Запускаем jasmine-node ./tests и видим следующую картину:
Итак, я сначала создал конфигурацию, а потом провел её тест. Это не слишком близко к подходу « разработка через тестирование », но далее, я буду более строго его придерживаться.
Очень рекомендуется уделить достаточное время тестированию. Нет ничего лучше, чем хорошо протестированное приложение.
Пару лет назад я понял нечто важное, что может помочь вам создавать более совершенные программы. Каждый раз, когда вы начинаете писать новый класс, модуль или любой другой логически законченный кусок кода, спросите себя: Как я могу его протестировать?
Ответ на этот вопрос поможет вам писать код более эффективно, создавать более качественные API и грамотно располагать части программы по отдельным блокам. Вы не сможете написать тест для кода, запутанного как спагетти. Например, в конфигурационном файле выше ( /config/index.js ), я добавил возможность передавать режим в конструктор модуля.
Вы, возможно, будете удивлены, почему я сделал так, когда изначально предполагалось получать режим через аргументы командной строки. Все просто — мне надо провести тестирование.
Представим, что месяцем позже мне нужно будет проверить что-нибудь в конфигурации для производственного сервера, но скрипт node запускается с параметрами командной строки. Я вряд ли смогу вспомнить все настройки. Поэтому, отход от первоначальной идеи поможет в будущем избежать проблем.
После того, как мы создали динамический сайт, необходимо сохранить данные в базе. Для примера в данной статье, я буду использовать базу данных mongodb . Mongo это документо-ориентированная СУБД без поддержки SQL. Инструкции по её установке можно найти здесь .
Так как я использую Windows, то мне понадобятся инструкции по установке для Windows . После окончания установки, запустите демон MongoDB, который по-умолчанию слушает порт 27017. Теоретически, мы можем подключиться к этому порту и взаимодействовать с сервером mongodb.
Чтобы сделать это из node-скрипта , нам понадобится модуль/драйвер mongodb . Если вы скачаете исходные файлы к этой статье, то этот модуль в них уже включен в файле package.json. В противном случае, просто добавьте « mongodb»: «1.3.10 » в список зависимостей и запустите установку через npm.
Далее, мы напишем тест, проверяющий запущен ли сервер mongodb, который будет располагаться в файле ./tests/mongodb.spec.js :
Callback -вызов в методе .connect клиента mongodb, посылает объект db . Мы будем использовать его позже для управления нашими данными. Это означает, что мы должны получать доступ к этим данным внутри нашей модели.
Создавать новый объект MongoClient каждый раз, когда нам нужно сделать запрос к базе данных это не самая лучшая идея. Вот почему я переместил запуск сервера Express в callback -вызов внутрь функции connect :
Даже лучше, что вместо параметров командной строки мы использовали конфигурационный файл. Мы поместили туда имя хоста и номер порта mongodb, а затем изменили URL-адрес в функции connect на:
Обратите особое внимание на middleware под названием attachDB, которое я добавил сразу после вызова функции http.createServer .
Спасибо выбору в пользу конфигурационного файла, благодаря которому мы можем заполнить свойство .db для запрашиваемого объекта. Хорошая новость в том, что мы можем присоединить несколько функций при определении маршрута.
Этим кодом, Express заранее вызывает функцию attachDB , чтобы запустить наш обработчик маршрута. После того, как это случилось, объект request получит значение свойства .db , которое мы сможем использовать для доступа к базе данных.
Скорее всего, вы знакомы с MVC . Задача состоит в применении этой схемы к Express. Более или менее, это вопрос интерпретации. В следующих нескольких главах, я создам модули, которые будут взаимодействовать по схеме: модель-представление-контроллер.
Модель управляет данными в нашем приложении. Она должна иметь доступ к объекту db , который возвращается MongoClient. Наша модель также должна иметь метод для расширения этого объекта, потому что, возможно, мы захотим создать различные типы моделей.
Например, мы можем создать модель BlogModel или ContactsModel. Поэтому нужно создать новый spec-файл: /tests/base.model.spec.js , для тестирования двух этих будущих моделей. Помните, что определяя этот функционал ДО начала реализации в виде кода, мы гарантируем, что наш модуль будет делать только то, что от него ожидается.
Вместо реального объекта db , я решил передать объект mockup. Это сделано потому, что позже, я, возможно, захочу сделать специфический тест, в зависимости от информации, поступающей из базы данных. Будет проще определить эти данные вручную.
Реализация расширенного метода немного более хитрая, потому что нам нужно изменить прототип module.exports , но сохранить оригинальный конструктор. Благодаря тому, что мы ранее написали хороший тест, который подтверждает работоспособность нашего кода. Код, представленный выше, будет выглядеть так:
Вот два наших helper-метода : первый инициализирует объект db , а второй получает collection из базы данных.
Вид отображает информацию на экране. По сути, вид это класс, который посылает ответ браузеру. Express предоставляет удобный способ сделать это:
Объект response является оберткой (wrapper), которая имеет хороший API, делающий нашу жизнь проще. Однако я предпочитаю создать модуль, который будет инкапсулировать данный функционал. Сменим стандартную папку для видов на templates и создадим новый вид, который будет базовым классом (base view class).
Это маленькое изменение влечет за собой еще одно — нам нужно уведомить Express о том, что файлы нашего шаблона теперь размещены в другой папке:
Итак, для начала я определю то, что мне нужно, напишу тест, после чего, создам реализацию. Нам нужен модуль, который должен удовлетворять следующим требованиям:
- Его конструктор должен получать объект response и имя шаблона;
- Он должен иметь метод render, который выводит объект data;
- Он должен быть расширяемым.
Вы возможно удивлены тем, что я расширил класс View. Не проще ли просто вызвать метод response.render? На практике возникают случаи, когда вам нужно послать другой заголовок или определенным образом манипулировать объектом response . Например, имеются такие данные JSON:
Вместо того чтобы делать это каждый раз, намного проще иметь классы HTMLView и JSONView. Или даже класс XMLView для отсылки XML-данных браузеру. Особенно это полезно, когда вы создаете большой сайт – у вас есть шаблоны и вам не нужно много раз копировать-вставлять один и тот же код.
Вот spec для /views/Base.js :
Чтобы протестировать вывод, мне пришлось создать объект mockup. В данном случае, я создал объект, который имитирует Express’овский объект response. Во второй части теста, я создал другой класс View, который наследует модель Base и применяет кастомный метод render. Вот это класс — /views/Base.js .
Теперь у нас есть три spec’а в папке tests и, если мы запустим команду jasmine-node ./tests , результат будет следующим:
Помните маршруты (routes) и как мы их определили?
Символ ‘/’, в примере выше, это и есть контроллер. Это middleware-функция, которая принимает request, response и next .
В примере выше показано, как должен выглядеть ваш контроллер, в контексте Express. Команда express создает папку с именем routes , но в нашем случае, лучше назвать её controllers . Поэтому я переименовал её таким образом, чтобы отразить используемую нами схему MVC.
Так как создаваемое нами приложение является достаточно серьезным, будет мудрым решением создать класс base , который затем может быть расширен. Если нам когда-нибудь понадобиться передать некоторую функциональность другим контроллерам, то этот класс сослужит нам большую пользу. И снова, я сначала напишу тест, так что давайте определимся, что нам нужно от класса:
- Он должен иметь метод nextend, который принимает объект и возвращает новый дочерний экземпляр;
- Дочерний экземпляр должен иметь метод run, являющийся старой middleware-функцией;
- Класс должен содержать в себе свойство name, которое идентифицирует контроллер;
- Мы должны иметь возможность создавать независимые объекты, основанные на этом классе.
Не такие уж большие возможности, но ведь мы сможем добавить новую функциональность позже. Тест будет выглядеть следующим образом:
А вот реализация /controllers/Base.js :
Разумеется, каждый дочерний класс должен определять собственный метод run, который имеет собственную логику.
Отлично, теперь у нас есть достаточный набор классов для реализации архитектуры MVC. Также мы создали тест к каждому модулю. Мы готовы продолжить создание сайта вымышленной компании FastDelivery. Представим, что сайт разделен на две части – лицевая ( front-end ) и административная ( back-end ).
Лицевая будет использоваться для отображения пользователям информации, имеющейся в базе данных. Административная панель же будет использоваться для управления этими данными. Начнем с административной (контрольной) панели.
Для начала, давайте создадим простой контроллер, который будет обслуживать административную страницу и находиться в файле ./controllers/Admin.js :
Используя заранее написанные базовые классы для контроллеров и видов, мы легко можем создать точку входа в административную панель. Класс View принимает имя файла шаблона. Согласно коду, приведенному выше, файл должен быть назван admin.hjs и расположен в папке /templates/ . Его содержимое должно быть следующим:
Чтобы статья не увеличивалась в объеме, я не буду выкладывать каждый отдельный шаблон вида. Вы можете просмотреть их исходный код на GitHub.
Чтобы сделать контроллер видимым, нам нужно добавить в него маршрут в файле app.js :
Заметьте, что мы не посылаем метод Admin.run напрямую в middleware , чтобы не нарушить контекст. Если мы сделаем так:
То слово this в административном модуле будет вести в другое место.
Каждая страница, начинающаяся с /admin должна быть защищена. Для этого, нам нужно использовать middleware, встроенное в Express, под названием Sessions . Этот инструмент просто прикрепляет объект к запросу названному session. Теперь нам нужно изменить контроллер нашей административной панели таким образом, чтобы он делал две вещи:
- Проверял, доступна ли сессия. Если нет, то отобразить форму логина;
- Принимал данные, посланные через форму логина и авторизовывал пользователя при совпадении логина и пароля.
Вот небольшая helper -функция, которую мы можем использовать, чтобы реализовать это:
В этом листинге сначала идет выражение, которое пробует распознать пользователя через объект session . Далее, мы проверяем, была ли отправлена форма. Если да, то данные из формы становятся доступны через объект request.body,который заполняется при помощи middleware bodyParser. Наконец, мы проверяем имя пользователя и пароль.
А теперь, реализуем метод контроллера run , который использует наш новый хелпер. Если пользователь авторизован, то отображаем административную панель, иначе – панель логина:
Как я пояснил выше, у нас есть много объектов, которые нужно администрировать. Чтобы упростить этот процесс, давайте оставим все данные в одной коллекции. Каждая запись будет иметь название, произвольный текст, картинку и свойство type.
Свойство type будет определять владельца данной записи. Например, для страницы « Контакты » будет нужна только одна запись type: ‘contacts’ , в то время как страница «Блог» потребует большее количество записей. Поэтому, нам нужно три новых страницы для добавления, редактирования и вывода записей.
Но перед тем как мы приступим непосредственно к реализации новых шаблонов, стилей и функционала контроллера, нам нужно написать класс нашей модели, которая располагается между сервером MongoDB и приложением, и предоставляет API.
Модель берет на себя ответственность за генерацию уникального ID для каждой записи. Это потом понадобится нам для обновления информации.
Если мы хотим добавить новую запись на страницу « Контакты », то просто делаем следующее:
Итак, у нас есть отличный API для управления данными в нашей коллекции mongodb. Теперь мы готовы к созданию пользовательского интерфейса для имеющейся функциональности. Для этого нужно будет немного изменить контроллер административной панели.
Для упрощения задачи я решил совместить список добавленных записей и форму для их добавления/редактирования. Как вы можете увидеть на скриншоте ниже, левая часть страницы зарезервирована под список, а правая – под форму.
Расположив все на одной странице, мы сможем сфокусироваться на реализации вывода страницы и других специфических вещах, например, данных пересылаемых в шаблон. По этой причине, я создал несколько helper-функций, объединенных между собой вот так:
Наша административная панель выглядит очень угловато, но работает именно так, как задумывалось. Первая helper-функция это метод del , который проверяет текущие параметры GET и, если находит строку action=delete&id=[id записи] , то удаляет данные из коллекции.
Вторая функция называется form и отвечает в основном за отображение формы в правой части страницы. Она проверяет, отправлена ли форма, и обновляет/создает записи в базе данных. В конце, метод list выбирает информацию и подготавливает HTML-таблицу, которая будет послана шаблону. Реализацию трех этих хелперов можно найти здесь .
В статье же, я решил показать функцию, которая управляет загрузкой файла:
Если файл отправлен, то свойство .files объекта request заполняется данными. В нашем случае, у нас есть следующий HTML-элемент:
Это значит, что мы можем получить доступ к отправленным данным через req.files.picture . В коде, приведенном выше, req.files.picture.path используется, чтобы получить необработанное содержимое файла.
Позже, в те же данные записывается новый каталог и в конце возвращается URL-адрес. Все эти операции синхронны, но очень полезно использовать асинхронные версии readFileSync, mkdirSync и writeFileSync.
Самая сложная часть работы выполнена. Административная панель работает и у нас есть класс ContentModel, который дает доступ к информации, сохраненной в базе данных. Теперь нам нужно реализовать контроллеры фронт-энда и привязать их к сохраненному содержимому.
Ниже представлен контроллер для домашней страницы — /controllers/Home.js :
Домашняя страница требует одной записи типа home и четырех типа blog. После создания контроллера, нам нужно добавить маршрут в файл app.js :
И вновь, мы добавляем объект db к request . Это практически то же самое, что мы делали для административной панели.
Остальные страницы для нашего фронт-энда (клиентской части) идентичны: все они имеют контроллер, который извлекает данные с помощью класса модели и определяет маршрут. Есть пару моментов, которые я бы хотел пояснить. Первый касается страницы « Блог ».
Она должна уметь отображать не только все статьи, но и каждую из них по отдельности. Поэтому, мы должны зарегистрировать два маршрута:
Обе функции используют один и тот же контроллер Blog, но вызывают метод run по-разному. Обратите внимание на строку /blog/:id . Этот маршрут будет совпадать с URL-адресами вида /blog/4e3455635b4a6f6dccfaa1e50ee71f1cde75222b , а длинная хеш-функция будет доступна через req.params.id. Другими словами, мы можем определить динамические параметры.
В данном случае, это ID записи. После получения этой информации, мы можем создать уникальную страницу для каждой статьи.
Вторым интересным моментом является то, каким образом я создал страницы « Услуги », « Карьера » и « Контакты ». Ясно, что они используют только одну запись из базы данных. Если нам нужно создать разные контроллеры для каждой страницы, то необходимо скопировать/вставить тот же код и изменить поле type .
Это оптимальный способ, когда имеется только один контроллер, который принимает значение type в методе run . Итак, вот маршруты:
А вот как будет выглядеть контроллер:
Процедура развертывания сайта на базе Express аналогична, развертыванию любого другого Node.js-приложения:
- Перемещение файлов на сервер;
- Остановка процесса node (если он запущен);
- Запуск команды npm install для установки новых зависимостей;
- Запуск node.
Надо понимать, что Node это достаточно молодая платформа, и не все может работать, как ожидается, но улучшения делаются постоянно. Например, CLI-инструмент forever гарантирует, что ваше Node.js-приложение будет запущено вечно. Это делается командой:
Я использую это на всех своих серверах. Это отличный инструмент, решающий множество проблем. Если вы запускаете свою программу с помощью node yourapp.js , то после неожиданного завершения её работы, сервер упадет. Forever, просто перезапускает приложение в этом случае.
Я не системный администратор, но у меня есть желание поделиться своим опытом интеграции node-приложений с Apache и Nginx, потому что я считаю, что это часть рабочего процесса и помогает развитию программного обеспечения в принципе.
Как вы знаете, Apache нормально работает на 80 порту, а это означает, что если вы перейдете по адресу http://localhost или http://localhost:80 , то увидите страницу Apache-сервера. Чаще всего, ваш node-скрипт слушает другой порт.
Поэтому, вам нужно добавить виртуальный хост, который будет принимать запросы и направлять их на нужный порт. Представим, что я хочу расположить созданный нами сайт, на своем локальном Apache-сервере по адресу expresscompletewebsite.dev . Для этого, первым делом нужно добавить наш домен в файл hosts:
После чего, надо отредактировать файл httpd-vhosts.conf , расположенный в папке с конфигурационными файлами Apache, добавив в него:
Сервер все еще посылает запросы на порт 80, но перенаправляет их на порт 3000, где их слушает node.
Настройка Nginx проще и, честно говоря, он лучше подходит для Nodejs-приложений. Первым шагом все также нужно добавить наш домен в файл hosts. После чего, просто создайте новый файл в папке /sites-enabled в директории с установленным Nginx. Содержимое файла должно выглядеть следующим образом:
Вы не сможете запустить Apache и Nginx с настройками hosts-файлов, приведенными выше, потому что они требуют порт 80. Также, если вы системный администратор, то, скорее всего, захотите поэкспериментировать с настройками для улучшения производительности. Но повторюсь, я не эксперт в этой области.
Express это замечательный фреймворк, который хорошо подходит для того, чтобы начать создавать свои веб-приложения. И, как вы могли заметить, результат будет зависеть от того, каким образом вы построите его, и что будете использовать при создании.
Express упрощает решение рутинных задач, он предоставляет отличное middleware и, в то же время, оставляет реализацию ответственных частей кода разработчику.
Исходные коды для данной статьи доступны на GitHub . Используйте их и экспериментируйте.
JavaScript
Видеокурс рассчитан на новичков, которые хотят научиться работать с JavaScript и понять как создать сайт на JavaScript. В ходе курса будут рассмотрены технологии: HTML, CSS, JavaScript, библиотека jQuery и технология Ajax. Вами будет создано 5 мини-программ на чистом JS, а также в конце курса будет создан полноценный одностраничный веб сайт на ДжаваСкрипт на базе HTML, CSS, JavaScript, jQuery и с добавлением специального постороннего плагина
Курс в цифрах
<Что будет в курсе>
Теоретическая база
В курсе есть специальные теоретические лекции, в которых вы сможете ознакомится со всем необходим в теории, прежде чем приступать к практике и изучать JavaScript для сайта
Практическая часть
Все полученные знания рассматриваются на практике. Вами будут созданы различные мини приложения, а также в конце курса вы создадите полноценный веб сайт
Домашние задания
Помимо теории и практики в каждом уроке даются домашние задания на закрепление полученных знаний. На основе знаний вы сможете приступить к JavaScript разработке сайтов
От новичка до профи
Курс идет от переменных и простых операций до ООП, JSON, событий и многого другого. По прохождению курса вы будете уметь создавать и писать веб программы на JS
Программа обучения
Основы JavaScript
Описание
Первая лекция будет полностью теоретической. В ней вы познакомитесь с основными понятиями в JavaScript, рассмотрите различные примеры и все это в формате интересной презентации.
Вы узнаете из чего состоит язык, зачем он используется, какие функции выполняет. После теоретической лекции вы сможете приступить к практическому применению JS.
1 час Задания Исходники
HTML + JavaScript
Описание
Чтобы работать с HTML при помощи JavaScript, вам необходимо хорошо разбираться в общей структуре HTML документа.
В ходе урока вы познакомитесь с понятием «окружения» и изучите основные объекты, что входят в окружение BOM.
14 минут Задания Исходники
jQuery
Описание
В ходе первой лекции вы изучите всю необходимую теорию относительно библиотеки jQuery. Вы узнаете на что она способна, какие функции в ней есть и зачем вообще её использовать.
В ходе последующих лекций вы изучите все полученные материалы на практике.
40 минут Задания Исходники
Отзывы
В нашей группе Telegram вы найдете отзывы от учеников, что прошли данный курс. Некоторые из отзывов представлены ниже:
Наши курсы
У нас один из наиболее крупных YouTube каналов в сфере программирования. Вы можете ознакомится с манерой подачи материала на наших каналах в YouTube: « Гоша Дударь » и « Школа itProger ». Наши платные курсы намного больше и намного более информативны, нежели курсы на YouTube.
Выдача сертификата
После прохождения курса, каждый ученик купивший курс с типом «Наилучший» или «Всё включено» сможет получить сертификат об успешном прохождении онлайн видеокурса. Сертификаты помогают при дальнейшем трудоустройстве, так как работодатель сразу же видит что перед ним человек, проходивший курсы по определенным языкам и технологиям Размер сертификата — А4
Формат — PDFСтоимость курса
Все видео уроки
Исходники к урокам
Подписка на сайте
Если вы плохо знаете программирование, то лучше приобрести курс «Наилучший», тогда вы получите консультации от лектора, а также весь исходный материал по видео курсу. Если знаний достаточно и вы уже не новичок, то можете смело брать курс «Стандарт».
Программа обучения
Вы можете приобрести полноценную программу обучения, которая будет включать в себе несколько видео курсов связанных одной сферой. При покупке программы обучения вы экономите 20% от общей стоимости курсов
Частые вопросы
Какие знания необходимы?
Видеокурс рассчитан на новичков, поэтому вам не нужно обладать специальными знаниями. Вы можете приступить к курсу будучи полным новичком в сфере программирования
Что входит в уроки?
Каждый урок состоит из теоретической и практической части. Весь материал, что вы изучите будет подкрепляться практикой для лучшего понимания. К каждому уроку также прилагается готовый код, который вы можете скачать для дальнейшего изучения
Где проходит обучения по курсу?
После покупки курса всё обучение будет проходить на сайте в удобной форме. Вы сможете просматривать материалы в любое удобное для вас время, а также проходить домашние задания, практические задания, тесты и многое другое здесь на сайте. Видеокурс можно будет скачать к себе на компьютер по необходимости.
Что входит в видеокурс?
Видеокурс состоит из 24 уроков, каждый из которых по 20-30 минут в среднем. Общая длина курса более 10,5 часов обучения. Дополнительно в курс входят учебные материалы при покупке курса от 25$.
Что вы получите в конце курса?
В курсе вы создадите полноценный одностраничный веб сайт на HTML, CSS, JavaScript и jQuery. Сайт будет обладать красивым дизайном и большим набором функций. После курса вы научитесь создавать сайты с использованием JS и jQuery.
Что такое подписка на сайте?
Подписка на сайте даст вам дополнительные домашние задания. Если у вас уже есть подписка, то она будет продлена дополнительно. Прочитать более детально про подписку можно здесь.
Что такое практические задачи?
Практические задачи это дополнительные задания на закрепления знаний. Они представлены на сайте в разделе «Тесты и практика». Там вы найдете более 300 дополнительных заданий по JS, jQuery, HTML и CSS.
Как выбрать видеокурс?
Видеокурс необходимо выбирать исходя из тех знаний, что вы имеете на данный момент. Если вы плохо знаете программирование, то лучше приобрести курс «Наилучший», тогда вы получите консультации от лектора, а также весь исходный материал по видеокурсу. Если знаний достаточно и вы уже не новичок, то можете смело брать курс «Стандарт».
Зачем нужны консультации?
Консультации это отличная помощь вам, ведь если вы чего-либо не будете знать, то всегда сможете задать вопрос лектору и получить ответ на свой вопрос. Это поможет вам в решение спорных вопросов, а также позволит быстрее изучить необходимый материал.
Зачем покупать курс «Всё включено»?
Если вы планируете изучить JavaScript идеально, то практические задания, а также тесты вам в этом отлично помогут. Выбирая этот тип курса вы получаете полностью весь набор необходимых знаний для полного изучения JavaScript от нуля и до профи.
Нужно ли докупать подписку?
Нет, подписку дополнительно приобретать не нужно. Она выдается автоматически при покупке курса на сайте. Просмотр курса на сайте осуществляется на время подписки. Продление подписки не обязательное. Также все уроки вы сможете скачать с сайта.