Как написать свое веб-приложение. Часть 1

В этом курсе статей (надеюсь она будет не одна) хочу описать решения задач для создания веб-приложения начиная от пользовательского интерфейса и заканчивая настройкой серверного окружения.
При разработке приложения будут рассмотрены следующие задачи:

• разработка SPA (Single Page Application) на React
• работа с базой данной (PostgreSQL)
• разработка бекэнда на node.js для общения с базой данных
• работа с системой контроля версий git

Готовим инструменты

В качестве редактора кода я использую Atom (https://atom.io), в нем есть много плагинов, которые помогают писать код быстрее и удобнее.
Так же нужно установить Node.js (https://nodejs.org), все инструкции по установке можно найти на сайте, лучше выбрать версию LTS.
Для хранения кода приложения нужно завести репозиторий. Бесплатный git репозиторий можно завести на SourceForge (https://sourceforge.net/).

Если возникнут проблемы с установкой и настройкой, задавайте вопросы в комментариях 😉

Пишем код

Для начала создадим репозиторий в папке с проектом. git-репозиторий — это возможность вернуться к предыдущим этапам разработки, а еще вы сможете получить доступ к вашему коду на любом устройстве. Самый простой способ создать репозиторий — создать его в SourceForge, а затем склонировать в папку с проектом:

# создим папку проекта
mkdir MyAwesomeProject
# перейдем в эту папку
cd MyAwesomeProject
# инициализируем git-репозиторий
git init
git add .
git commit -a -m 'Initial commit'
git remote add origin ПУТЬ_К_ВАШЕМУ_РЕПОЗИТОРИЮ
git push -u origin master

Теперь нужно создать nodejs проект:
npm init

Эта команда создаст файл конфигурации package.json

Далее установим Express.js (https://expressjs.com) — фреймворк для разработки приложений на nodejs, предоставляет удобные инструменты для маршрутизации, интеграции с базами данных и ещё много полезных штук
npm install --save express

Эта команда сделает следущее:

1. создаст папку node_modules — в этой папке хранятся все устанавливаемые в проекте зависимости
2. добавит в файл с конфигурацией проекта package.json в пункт dependencies строку с названием библиотеки (express) и номером версии этой библиотеки. В будущем перенеся проект на другой компьютер можно будет выполнить команду npm install и все зависимости, перечисленные в разделе  dependencies установятся в папку node_modules

Теперь напишем код простого сервера, который будет принимать  GET-запросы на 127.0.0.1:8080:

const express = require('express');

// Инициализируем приложение
const app = express();

// Добавляем обработчик для GET-запроса пути '/'
app.get('/', (req, res) => {
  res.send('Hello!')
})

// Добавляем "слушателя" на порт 8080 (сервер будет доступен по адресу 127.0.0.1)
app.listen(8080, function () {
  console.log('Example app listening on port 8080!');
});

Запускаем сервер:

node index.js

Проверяем http://127.0.0.1:8080. Так же можно добавить в файл конфигурации (package.json) в пункт scripts команду для запуска и запускать сервер командой npm start:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4"
  }
}

Для того чтобы не потерять изменения, загрузим их в гит-репозиторий, но сначала создадим файл .gitignore в папке проекта и добавим следующую строку:

node_modules

Таким образом мы исключим папку node_modules из списка загружаемых на сервер. Теперь загрузим файлы в репозиторий:

git add .
git commit -m "first app"
git push

Код первой части вы можете найти в репозитории на SourceForge