Шаблон проекта

Шаблон SvelteKit проекта для курса ITAM по Frontend-разработке.

О шаблоне

Этот шаблон содержит проект на фреймворке SvelteKit, который вы можете использовать во время прохождения курса и для своих будущих проектов.

Если вы оставляли заявку в форме регистрации, то на основе данного шаблона для вас будет создан репозиторий внутри организации.

В ином случае, вы можете использовать этот шаблон и создать свой репозиторий - нажмите на кнопку "Use this template" на Гитхабе.

Что такое Svelte?

Svelte - это библиотека/фреймворк для фронтенд-разработки на JavaScript.

Что такое SvelteKit?

SvelteKit - это фреймворк, расширяющий возможности Svelte. В частности, он предоставляет следующий функционал:

• Роутинг
• Server Side Rendering (отправка в браузер готового HTML-кода страницы)
• Удобная загрузка данных для страницы
• Написание простого бекенд-кода
• И многое другое :)

Что такое NodeJS?

NodeJS - это интерпретатор Javascript. Он позволяет запускать код на JS не только в браузере, но и вне него, что необходимо для современной фронтенд-разработки.

Что такое npm?

npm - это пакетный менеджер, входящий в состав NodeJS. В основном при работе вы будете использовать именно его.

Основными файлами для npm являются package.json и package-lock.json, а также папка node_modules.

package.json - это манифест вашего проекта, содержащий метаданные (название, автор и тд), зависимости проекта, скрипты и прочее.

package-lock.json - это автоматически генерируемый файл, хранящий метаданные реально установленных зависимостей проекта. Т.е. в package.json мы говорим, какие версии приемлимы (например, ^1.2.0 - любая версия >= 1.2.0 и < 2.0.0), а в package-lock.json - какая реально установлена (например, 1.3.5). Это необходимо для упрощения совместной работы и воспроизводимости результатов, иначе при каждой установке могли бы установить разные версии (например, 1.3.5 и 1.3.6, если первый разработчик выполнил npm install когда 1.3.6 ещё не вышла).

node_modules - js-файлы всех установленных зависимостей. Эта папка не включается в git-репозиторий из-за большого размера и возможных проблем, а вместо этого создаётся при запуске npm install.

Вот некоторые полезные команды npm, которые пригодятся вам во время работы:

• npm install - установить зависимости, указанные в package.json. Это обязательно нужно сделать после клонирования репозитория и перед любыми другими командами
• npm install abc - установить зависимость abc и добавить её в package.json
• npm remove abc - удалить зависимость abc
• npm run - выводит все скрипты из раздела scripts файла package.json
• npm run abc - запускает конкретный скрипт. Вот список добавленных скриптов (вы можете добавлять свои!):
  • npm run dev - запуск dev-сервера. Вы сможете открыть свой сайт в браузере, а все внесённые изменения в файлы будут мгновенно отображаться (так называемый hot reloading).
  • npm run check - Проверка кода на корректность. Не поймает все ошибки, но очень многие, особенно если вы используете Typescript. Обязательно запускайте перед коммитом.
  • npm run format - форматирование кода по стилю. Обязательно запускайте его перед коммитом, чтобы избежать лишних изменений в будущем (и поберечь глаза преподавателей).
  • npm run build - создание production-версии вашего кода, которую можно запустить на сервере.
  • npm run preview - локально запустить production-версию для финального тестирования.