Блог на NodeJS Express MongoDB ( I ).

С этого поста начинаем разработку блога с использованием fullstack - технологий.

Все материалы по ES6

Самое простое объяснение, что такое fullstack - разработка клиентской и серверной частей. Разработка идет двух этих сущностей независимо друг от друга, а потом мы их связываем в единый блок.

В этих трех постах мы создадим блог, где мы сможем создавать посты, выводить их и удалять.

Сервер мы напишем на NodeJS с использованием фреймворка Express. Плюс, мы будем связываться с фронтэндом, который будет написан на нативном JavaScript через REST.API

1. Создадим папку нашего проекта. Я создал папку - fs-blog.



2. Нам потребуется установленная NodeJS.
   
   Проверить очень просто. В КС (здесь и далее - командная строка) нужно ввести:
   
   
   node -v
   
   
   Enter
   
   Если NodeJS установлена, то уведите ее версию, а если нет, то ее стоит установить с официального сайта. Это очень просто и я останавливаться на этом не буду.



3. Инициализация проекта.
   
   Эту необходимо сделать для автоматической генерации файла package.json, где будут храниться все зависимости нашего проекта.
   
   Переходим в КС в папку проекта. Для этого можно использовать команду
   
   
   cd NameFolder
   
   
   Можно просто перетащить папку в КС и получить путь, можно начать вводить имя папки и нажать Tab.
   
   После того, как вы оказались в папке проекта, в КС вводите:
   
   
   npm init
   
   
   Здесь мы можем ввести необходимые данные в файл package.json - зависимости и настройки нашего проекта.
   
   Можно добавить описание - description: simple blog
   
   entry point - это основной файл (точка входа в проект). Я укажу app.js
   
   keywords: blog, node.js, fullstack
   
   Avtor: Your Name
   
   y
   
   Enter
   
   Теперь в корне проекта мы получим файл package.json где хранятся все данные, которые мы добавляли через КС.



4. Создание точки входа app.js
   
   В этом файле мы будем вести разработку нашего сервера.



5. Устанавливаем фреймворк Express.

npm install express

В современных npm версиях указывать флаг --save не нужно. Зависимости и так пропишутся автоматически в файле package.json.

Если посмотреть, то в файле package.json появится ваша версия "express" в разделе "dependencies"

В папке node_modules хранятся файлы библиотеки, и появится файл pachage-lock.json, который служит для разруливания различных зависимостей и версий пакетов. Его трогать не нужно. Он генерируется автоматически.

Создание и запуск сервера.

Давайте разберемся - с чего начинается разработка сервера на Express.

1. - Нам нужно подключить сам Express к нашему проекту.
   
   const express = require('express')
   
   Создали одноименную фреймворку переменную, куда с помощью глобальной для Node.js функции require() положили фреймворк, а точнее содержимое папки express, которая находится в node_modules.Указываем не путь, а название пакета и NodeJSпонимает, что данный пакет нужно брать из папки node_modules.



2. -создаем сервер в переменной, которая будет отвечать за наше приложение - app.
   
   const app = express()
   
   Таким образом мы получили объект app, который будет ключевым для нашего сервера.



3. - для запуска сервера нужно указать Экспресу о том, что мы будем что-то слушать :-)

Создадим переменную const port = 5000

Для запуска сервера нам нужно обратиться к объекту app, его методу listen()-с помощью этого метода мы можем запускать прослушку всего сервера. Первым параметром в этот метод мы передадим номер порта где мы хотим все это слушать ( наша переменная port). Вторым параметром - callback-функцию, которая будет вызвана, когда сервер заработает.

Для порта допишем функциональность. Обычно, мы можем передавать различные переменные, информацию через консоль в NodeJS и обычно порт передается через консоль, например, если мы будем куда-то выкладывать наш проект. Поэтому нам нужно проверить - если у нас указана системная переменная, которая содержит номер порта, тогда мы будем использовать её, а если нет, то порт 5000. Для того, чтобы в NodeJS обратиться к каким-то системным переменным, мы обращаемся к глобальному объекту process. У него есть объект environment (окружение) и название параметра, если он существует. А если его нет, то порт 5000:

const port = process.env.PORT || 5000

Таким образом мы получили файл app.js

const express = require('express')

const port = process.env.PORT || 5000

const app = express()

app.listen(port,()=>{
	console.log(`Server run on ${port} port`)
})

Запустим сервер:

node app.js

В консоли мы увидим Server run on 5000 port

Перейдем по адресу localhost:5000

Если мы увидим вот такое сообщение - Cannot GET /, значит сервер запущен и все работает правильно.

Давайте еще подготовим наше окружение для работы.

Переходим в файл package.json и напишем два скрипта в поле "scripts". Сейчас здесь есть один тестовый скрипт. Он нам не нужен и мы его удалим. Вместо него запишем скрипт, который будет запускать весь наш сервер:

  "scripts": {
    "start": "node app.js"
  },

Теперь в консоли (КС) мы можем для запуска приложения (сервера) написать команду:

npm run start

И нажать Enter.

Отдаем html-страницу.

В корне нашего проекта создадим папку, которая будет отвечать за клиентскую часть - client.

Внутри нее создадим файл - index.html.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>FS-Blog</title>
   <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
</head>
<body>
	<h1>FS-BLOG</h1>
</body>
</html>

Теперь нам нужно указать серверу, что при запросе на корневой роут, нам нужно запускать именно index.html

По сути - это сделать папку client публичной, статической. И когда мы будем делать запрос на сервер, то будем оказываться в папке client и по умолчанию отдавать файл index.html.

Для этого мы в файле арр подключим новый модуль path. Данный модуль входит в состав NodeJS и потому не требует дополнительной установки.

const path = require('path')

С помощью него можно очень удобно работать с разными путями.

Создадим новую переменную const clientPath, куда мы положим абсолютный путь до папки client. Воспользуемся методом join() модуля path.

В NodeJS есть глобальная переменная - __dirname, которая отвечает за абсолютный путь к текущей папке. Так, как мы сейчас в корневой папке нашего блока. то в __dirname мы получим абсолютный путь в папке fs-blog.

И чтобы теперь указать путь к папке client, нам нужно просто указать папку вторым параметром в методе join(). Вот так:

const clientPath = path.join(__dirname, 'client')

Теперь, когда мы получили путь до нужной нам папки, нам нужно сделать её статической.

Статической она делается довольно просто. После того, как мы с вами определим объект app, мы можем "оповестить" Экспресс о том. что хотим с помощью метода use(), добавить некий функционал серверу. Внутри метода указываем статическую, публичную папку. Для этого мы обращаемся к статическому методу экспреса и указываем путь до этой папки - clientPath:

app.use(express.static(clientPath))

Теперь, если мы будем делать запрос на сервер, он должен отдавать нам файл index.html.

Запуск рабочего процесса сервера - настройка окружения

Для остановки сервера нам приходится нажать Ctrl + C, потом ввест y и нажать Enter. Запуск его требует введения в КС:

npm run start

и опять Enter

Дело в том, что при внесении изменений в файлы, нам нужно постоянно перезапускать сервер, чтобы изменения вступили в силу (пересобрался сервер). делать это постоянно не очень удобно. Для того, чтобы сервер перезапускался автоматически после внесенных изменений мы установим пакет nodemon.

Чтобы его установить нам нужно ввести команду:

npm install nodemon -D

Enter

Здесь -D флаг, который указывает, что данная зависимость нужна нам только для разработки (development).

Проверим файл package.json. Там нас интересует поле

  "devDependencies": {
    "nodemon": "^1.18.4"
  }

Значит все прошло правильно. Остается только добавить еще один пользовательский скрипт в это файл:

  "scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js"
  },

Он будет делать тоже самое, что start но через пакет nodemon.

Теперь запуск сервера будет происходить командой:

npm run dev

База данных

Подключение MongoDB

Для этих целей нам потребуется локальный пакет mongoose, с помощью которого мы сможем делать очень удобные запросы к MongoDB. С помощью него мы сможем создавать модели, которые в последствии будут сущьностями в БД (база данных - здесь и далее.)

Установка пакета:

npm install mongoose

Есть разные возможности работы с БД - MongoDB. Можно её установить на компьютер локально. Плюсом такого подхода - это очень быстрое взаимодействие между сервером и БД. Минус - сложности установки MongoDB на комп. У всех разные системы, версии и пр. Для того, чтобы не отвлекаться на локальную установку, мы можем воспользоваться сервисом, который предоставляет полный API для MongoDB. Это сервис mLab.

Как можно предположить, это сервис который является удаленной версией MongoDB. Плюсы: простота использования, удобсвто настроек, бесплатно. Минусы - немного потеряем в скорости.

Нужно зарегистрироваться (создать аккаунт). Регистрация обычная. С подтверждением на почту.

Посте того, как залогинетесь появится окно с базами. Нам нужна кнопка - "Создать"

Выбираем Amazon и Бесплатную версию и нажимаем "Продолжить".

Выбрать точку поближе к себе на карте ( из предложеного и нажать "Продолжить"

Выбираем и вводим название:

Готовый чек - проверяем. Все действительно бесплатно и соглашаемся.

Происходит создание базы. Это может занять некоторое время и далее вы увидете:

База создана и готова к работе.

Переходим в нее (просто нажать на нее). и ...

Копируем эту строчку и возвращаемся в проект (редактор).

Давайте создадим некторую конфигурацию для наешего проекта, путем создания нового файла в корне приложения и назовем его keys.js

Здесь мы будем хранить некоторые константы, которые нужны для работы нашего приложения. Мы будем формировать здесь объект и экспортировать его наружу, чтобы другие файлы могли получать доступ к этим данным.

module.exports = {
	mongoURI: 'mongodb://<dbuser>:<dbpassword>@ds121413.mlab.com:21413/fs-blog'
}

Значением данного свойства мы вставили скопированную ссылку. В ней нам интересуют две вещи (отмечено красным).

Именно эти теги user и password нас интересуют.

Их нужно получить. В данном сервисе (mLab) нам нужно создать пользователя, который получит права доступа к БД. На записаь, на чтение и на удаление записей.

Выбираем "Users" "Add database user"

В сплывающем окне вводим имя и пароль. Галочку "read only" - НЕ СТАВИМ !

потому что мы хотим изменять базу данных

Данными имения и пароля мы заменяем теги user и password вместе с угловыми скобками.

После того, как мы получили ключи от БД мы идем в app.js и здесь мы подключаем mongoose

const express = require('express')
const mongoose = require('mongoose')
const path = require('path')
const port = process.env.PORT || 5000
const clientPath = path.join(__dirname, 'client')
const app = express()
app.use(express.static(clientPath))
app.listen(port,()=>{
	console.log(`Server run on ${port} port`)
})

теперь в этом файле нам необходимо подключиться к MongoDB

Подключение к MongoDB.

Сделаем это после подключения констант. Для этого мы обращаемся к пакету mongoose и вызываем у него метод - connect(). Первым параметром нам нужно передать адрес БД к которой мы хотим подключиться. Для этого нам нужно подключить файл констант, подключить переменную keys из файла который лежит на одном уровне с файлом app.js, потому пишем './keys.js':

const keys = require('./keys')

.js можно не указывать, потому что NodeJS понимает, что по умолчанию это .js- файл.

Таким образом мы передаем первым параметром переменную keys.mongoURI

Метод connect() возвращает нам промис.

Мы можем использовать два метода .then() и .catch().

В случае успеха передадим в консоль 'MongoDB connected', а в случае неудачи выведем в консоль ошибку.

const express = require('express')
const mongoose = require('mongoose')
const path = require('path')
const keys = require('./keys')

const port = process.env.PORT || 5000
const clientPath = path.join(__dirname, 'client')

mongoose.connect(keys.mongoURI)
			.then(() => console.log('MongoDB connected'))
			.catch(err => console.error(err))	
const app = express()
app.use(express.static(clientPath))
app.listen(port,()=>{
	console.log(`Server run on ${port} port`)
})

Запустим сервер

npm run dev

и в консоли увидим:

Теперь нам предстоит создать модель, для того, чтобы определить некоторую сущность в БД.

Наше приложение это блог, и по сути, мы будем работать с постами.

В корне проекта создадим новую папку, которая будет отвечать только за модели models.

Файлы этой папки (модели) в NodeJS принято называть с заглавной буквы.

Для работы с постом. создадим файл, в этой папке - Post.js

Теперь нам нужно описать модель, то есть какие сущьности будут у определенной модели в БД для поста.

первое что мы будем делать - это подключим mongoose, потому что с помощью него мы и будем описывать это все.

И далее. как это принято в мангусе. Мы создаем определенную схему, описываем поля,типы, описываем дефолтные значения, и после этого мы регистрируем нужную нам модель.

Первый шаг - это создание схемы!

Создание схемы

. Создаем переменную Schema она определяется из переменной mongoose и у нее есть класс Schema.

const Schema = mongoose.Schema

Теперь мы создаем схему нашего поста то есть - описание модели. Назовем её postSchema, например.

Она является экземпляром класса Schema, где в конструктор мы передаем объект конфигурации.

Давайте решим. что у нашего поста может быть?

 const mongoose = require('mongoose')

 const Schema = mongoose.Schema

 const postSchema = new Schema({
 	
 })

Во-первых - уникальный id, но его будет выдавать сама БД (MongoDB), поэтому нам его описывать необязательно.

У поста будет название, текст и дата создания.

Начнем с описания названия поста. Допустим, что это будет title и это объект. Так как мы описываем схему.

Какого типа будет у нас заголовок? Мы описываем его как строку - String и говорим, что заголовок для каждого поста нам нужен обязательно :

 const postSchema = new Schema({
 	title: {
 		type: String,
 		required: true
 	}

 })

Далее описываем контент поста - точно так же.

Еще одно поле date - дата когда был создан пост. По сути, было бы логично, если бы сервер при создании поста сделал это за нас.

Тип переменной будет Date, потому что мы будем работать с датой. И так как сервер у нас будет сам выдавать дату создания, то вместо флага required - default

default: Date.now

Важно без скобок, чтобы не вызывать эту функцию.

С помощью метода мы экспортируем наружу данную модель и экспортируем мы результат регистрации данной модели в базе. То есть говорим mongoose о том, что с помощью метода model() мы хотим зарегистрировать в БД новую коллекцию - posts и модель каждого поста будет являться схемой которую мы создали.

module.exports = mongoose.model('posts', postSchema)

Файл Post.js

 const mongoose = require('mongoose')

 const Schema = mongoose.Schema

 const postSchema = new Schema({
 	title: {
 		type: String,
 		required: true
 	},
 	text: {
 		type: String,
 		required: true
 	},
 	date: {
 		type: Date,
 		default: Date.now
 	}

 })

 module.exports = mongoose.model('posts', postSchema)

База подключена и осталось разработать на сервере роуты, которые будут работать с разными постами.