Новости

Разработка LiteFlow CMS. Часть 1.

Данный проект CMS, будет разрабатываться в формате необходимости по функционалу, удобству использования, мониторинга, безопасности и пожелания сообщества которое будет сформировываться вокруг проекта. В этим цикле статей будет подробно рассматриваться вся CMS. И скорее всего не один раз переделываться некоторые модули по ходу работы.

Разрабатываться Lite Flow CMS будет на node.js. Дефолтный шаблон будет использовать Bootstrap 5, но до этого ещё доберёмся.

Для начала надо создать проект. Для его работы необходимо поставить node.js, вместе с ним поставляется пакетный менеджер npm. Npm позволяет легко устанавливать все необходимые пакеты, запускать приложения. Но в данном проекте для работы с пакетами будем использовать его улучшенную версию под названием pnpm. Установка производиться командой

npm install -g pnpm

Далее в проекте для работы с пакетами будет использоваться пакетным менеджером pnpm. В JavaScript в целом и в node.js в частности, вся работа от создания проекта до его запуска осуществляется через пакетные менеджер. Для инициализации проекта перейдём в директорию где будет находиться проект и выполним следующую команду:

pnpm init

В результате выполнения команды в консоли отобразиться минимальная информация о созданном проекте, которая будет записана package.json.

pnpm init
pnpm init

Открываем package.json и изменяем на следующие параметры:

{
     "name": "lfcms",
     "version": "0.0.0",
     "description": "create lite flow cms",
     "main": "app.js",
     "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
     },
     "keywords": [
          "cms"
     ],
     "author": "",
     "license": "ISC",
}

Проект начинается с 0 версии, также были изменены некоторые другие параметры, такие как файл который отвечает за точку входа в систему, описание и ключевые слова от проекта. Во время разработки будет использоваться Visual Studio Code. В кратком варианте проект будет называться lfcms.

 

И начнём мы разработку с создания нашего основного файла app.js, который будет создан в корне проекта. Но перед тем как напишем наши первые строчки кода в проект, нам необходимо добавить пакет Express который является веб сервером. Установка производиться следующей командой:

pnpm I express

Результат выполнения установки представлен ниже

Результат pnpm i express
pnpm i express

После установки пакета появляется директория node_modules, в которой находятся все установленные пакеты и файл pnpm-lock.yaml, в котором храниться подробная информация о установленном паке.

Проверить список установленных пакетов можно также через файл package.json, в разделе dependencies. Там будут отображаться все необходимые пакеты для работы проекта. Далее будет добавлена еще одна директива devDependencies, в которой прописываются пакеты, которые используются в разработке. Такой пакет будет установлен чуть позже.

Установив Express.js перейдём к созданию простого веб-сервера. Создаём минималистичный сервер как показано на листенге ниже.

const express = require("express");

const app = express();
app.listen(8000, () => {
     console.log(`Сервер запущен на 8000 порту.`);
});

Для запуска сервера добавим в package.json в секции script еще один параметр, что бы выглядело так:

{
     "name": "lfcms",
     "version": "0.0.0",
     "description": "create lite flow cms",
     "main": "app.js",
     "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
         + "dev":"node ./app.js"
     },
     "keywords": [
          "cms"
     ],
     "author": "",
     "license": "ISC",
}

После чего выполним:

pnpm run dev 

И мы увидим как запускается сервер на порту 8000:

Запуск pnpm run dev
pnpm run dev

И перейдём в браузер на localhost:8000

Страница в браузере localhost:8000
Страница в браузере localhost:8000

Сервер работает на 8000 порту, но у нас отображается ошибка отсутствующего обработчика на маршруте / с типом запроса GET. Так и было задумано, сейчас мы займёмся созданием нашего первого обработчика, который будет обрабатывать любые типы запросов по любому адресу.

const express = require("express");

const app = express();

+ app.use("*", (req, res)=>{
+      res.send(200).send("OK!")
+ })
app.listen(8000, () => {
     console.log(`Сервер запущен на 8000 порту.`);
});

После добавления обработчика необходимо перезапустить наше приложение, иначе информация не обновиться! Решением проблемы автоматического перезапуска займёмся в следующем части. А сейчас посмотрим результат наших действий.

localhost:8000 ok
localhost:8000 ok

И вот у нас получился минималистичный сервер с простым обработчиком запросов.

В следующей части займёмся автоматическим перезапуском проекта при сохранение, а также создадим возможность задавать динамически порт сервера и посмотрим на работу маршрутов.

 

Добавить комментарий