SpaceY

В задании будем делать серверную часть и клиенсткие запросы для приложения SpaceY. Приложение представляет собой SPA (Single Page Application), которое умеет работать без перезагрузки страниц браузером.

В SPA серверу достаточно возвращать единственную html страницу, на которой подключаются скрипты и стили приложения.

Эти скрипты определят, какой контент нужно показать пользователю, сделают запросы к серверу, получат данные и сформируют страницу "на лету".

Все запросы на сервер приложение будет посылать через файл client.mjs.

Код приложения лежит в папке spa, собранная версия уже лежит в папке spa/build. Для выполнения задания трогать код приложения не потребуется, но если захочешь что-то поменять, не забудь установить зависимости (npm install в папке spa) и собрать новую версию приложения (npm run build).

0. Поставь зависимости и запусти сервер.

• Для этого перейди в директорию задачи и выполни команду npm install.
• После установки зависимостей, выполни команду npm run start.
• После запуска, перейди по адресу localhost:3000

1. Сделай так, чтобы сервер смог отдавать статические файлы из директории spa/build. В express для этого есть middleware express.static. Подробнее можно прочитать здесь

2. Сделай так, чтобы при заходе на любой неизвестный адрес, сервер возвращал файл spa/build/index.html. В этом помогут специальные символы в путях

3. Сделай так, чтобы наш сайт работал по https. В этом поможет этот небольшой пост. Сертификат уже сгенерирован и лежит в папке /certs.

Обрати внимание, что придётся разрешить Chrome работать с само-подписанными сертификатами для localhost. Это можно сделать включив флаг chrome://flags/#allow-insecure-localhost.

4. Изучи файл client.mjs. В нём лежит заготовка клиента, который будет делать запросы на сервер.

!!! В этом интенсиве сначала надо реализовать логинизацию. Без этого остальные странички не будут отображаться

Сделай так, чтобы работали методы, работы с пользователем (.getUser(), .loginUser(), .logoutUser()). На этом этапе имя пользователя можно хранить на сервере.

Все адреса, по которым этот клиент будет слать запросы лучше начинать с /api/..., чтобы показать, что они являются частью API, к которому делают AJAX запросы.

Если в методе .loginUser() будешь посылать имя пользователя в теле запроса, то не забудь подключить express.json middleware или body-parser middleware.

Отправлять ответ можно с помощью res.json.

5. Сохрани имя пользователя в cookie (не забудь подключить cookie-parser middleware).

Сделай так, чтобы методы .getUser(), .loginUser(), .logoutUser() работали с cookie

6. Сделай так, чтобы cookie с именем пользователя была HttpOnly, Secure, и имела SameSite политику Strict. В этом помогут дополнительные опции res.cookie.

7. Сделай так, чтобы при заходе на любой роут приложения, кроме api, статики и /login без cookie происходил редирект на страницу /login.

Для этого придётся написать middleware и проверять наличие cookie в запросе. Как написать узнай здесь.

Сделай так, чтобы middleware применялось только для путей, которые непосредственно отдают index.html

8. Оживи остальные страницы кроме /sendToMars. А именно About, History, Rockets, Roadster.

В качестве источника данных используй публичное API. Методы в нём названы похожим образом.

Посылать с сервера запросы к публичному API можно с помощью https.request или, как в браузере, с помощью fetch. Так этот это браузерный стандарт, его нет в стандартной библиотеке node.js, но существует реализация node-fetch, которая уже подключена в качестве зависимости в package.json.

По возможности, не запрашивай лишних данных из API и не возвращай лишних данных на клиент.

Формат данных, который ожидает клиент описан в файле client.mjs в формате JSDoc.

9. * Оживи страницу /sendToMars. Объект каждого предмета посылай в теле запроса в формате json. Для того, чтобы прочитать и распарсить тело запроса придётся подключить express.json middleware. Храни данные в памяти на сервере, придумай как гарантировать уникальность полей id для каждого предмета.