В задании будем делать серверную часть и клиенсткие запросы для приложения SpaceY. Приложение представляет собой SPA (Single Page Application), которое умеет работать без перезагрузки страниц браузером.
В SPA серверу достаточно возвращать единственную html страницу, на которой подключаются скрипты и стили приложения.
Эти скрипты определят, какой контент нужно показать пользователю, сделают запросы к серверу, получат данные и сформируют страницу "на лету".
Все запросы на сервер приложение будет посылать через файл client.mjs
.
Код приложения лежит в папке spa
, собранная версия уже лежит в папке spa/build
. Для выполнения задания трогать код приложения не потребуется, но если захочешь что-то поменять, не забудь установить зависимости (npm install
в папке spa
) и собрать новую версию приложения (npm run build
).
-
- Поставь зависимости и запусти сервер.
- Для этого перейди в директорию задачи и выполни команду
npm install
. - После установки зависимостей, выполни команду
npm run start
. - После запуска, перейди по адресу localhost:3000
-
- Сделай так, чтобы сервер смог отдавать статические файлы из директории
spa/build
. В express для этого есть middlewareexpress.static
. Подробнее можно прочитать здесь
- Сделай так, чтобы сервер смог отдавать статические файлы из директории
-
- Сделай так, чтобы при заходе на любой неизвестный адрес, сервер возвращал файл
spa/build/index.html
. В этом помогут специальные символы в путях
- Сделай так, чтобы при заходе на любой неизвестный адрес, сервер возвращал файл
-
- Сделай так, чтобы наш сайт работал по https. В этом поможет этот небольшой пост. Сертификат уже сгенерирован и лежит в папке
/certs
.
- Сделай так, чтобы наш сайт работал по https. В этом поможет этот небольшой пост. Сертификат уже сгенерирован и лежит в папке
Обрати внимание, что придётся разрешить Chrome работать с само-подписанными сертификатами для localhost. Это можно сделать включив флаг chrome://flags/#allow-insecure-localhost
.
-
- Изучи файл
client.mjs
. В нём лежит заготовка клиента, который будет делать запросы на сервер.
- Изучи файл
Сделай так, чтобы работали методы, работы с пользователем (.getUser()
, .loginUser()
, .logoutUser()
). На этом этапе имя пользователя можно хранить на сервере.
Все адреса, по которым этот клиент будет слать запросы лучше начинать с /api/...
, чтобы показать, что они являются частью API, к которому делают AJAX запросы.
Если в методе .loginUser()
будешь посылать имя пользователя в теле запроса, то не забудь подключить express.json
middleware или body-parser
middleware.
Отправлять ответ можно с помощью res.json.
-
- Сохрани имя пользователя в cookie (не забудь подключить
cookie-parser
middleware).
- Сохрани имя пользователя в cookie (не забудь подключить
Сделай так, чтобы методы .getUser()
, .loginUser()
, .logoutUser()
работали с cookie
-
- Сделай так, чтобы cookie с именем пользователя была
HttpOnly
,Secure
, и имелаSameSite
политикуStrict
. В этом помогут дополнительные опции res.cookie.
- Сделай так, чтобы cookie с именем пользователя была
-
- Сделай так, чтобы при заходе на любой роут приложения, кроме api, статики и
/login
без cookie происходил редирект на страницу/login
.
- Сделай так, чтобы при заходе на любой роут приложения, кроме api, статики и
Для этого придётся написать middleware
и проверять наличие cookie в запросе. Как написать узнай здесь.
Сделай так, чтобы middleware применялось только для путей, которые непосредственно отдают index.html
-
- Оживи остальные страницы кроме
/sendToMars
. А именноAbout
,History
,Rockets
+-,Roadster
.
- Оживи остальные страницы кроме
В качестве источника данных используй публичное API. Методы в нём названы похожим образом.
Посылать с сервера запросы к публичному API можно с помощью https.request или, как в браузере, с помощью fetch
. Так этот это браузерный стандарт, его нет в стандартной библиотеке node.js, но существует реализация node-fetch, которая уже подключена в качестве зависимости в package.json
.
По возможности, не запрашивай лишних данных из API и не возвращай лишних данных на клиент.
Формат данных, который ожидает клиент описан в файле client.mjs
в формате JSDoc.
- * Оживи страницу
/sendToMars
. Объект каждого предмета посылай в теле запроса в формате json. Для того, чтобы прочитать и распарсить тело запроса придётся подключитьexpress.json
middleware. Храни данные в памяти на сервере, придумай как гарантировать уникальность полейid
для каждого предмета.