Шаблон для создания Svelte-приложений с применением SCSS

Заготовка полноценного проекта с маршрутизацией.

Структура папок

Исходные файлы находятся внутри папки /src. Готовый бандл попадает в папку /dist.

src/
  pages/ — отдельные страницы приложения
  components/ — более мелкие компоненты
  scss/ — глобальные стилей для всего приложения
  img/ и fonts/ — статические файлы, которые при сборке копируются в соответствующие папки внутри /dist

  App.svelte — основной компонент приложения
  index.html — базовая html-страница, в которую встраивается приложение
  main.js — entry-point для Вебпака; инициализирует основной компонент приложения и интегрирует его в index.html

Маршрутизация

В качестве роутера используется svelte-routing. Пути настраиваются в файле src/App.svelte c помощью компонентов <Router> и <Route>:

<Router>
  <Route path="/"><Index /></Route>
  <Route path="/about/"><About /></Route>
  <Route path="*"><NotFound /></Route>
</Router>

Для навигации между страницами приложения вместо нативных ссылок <a href="…"></a> используются компоненты <Link>:

<Link to="/">Главная</Link>
<Link to="about">О компании</Link>
<Link to="contacts">Контакты</Link>

Пути к статическим файлам должны начинаться со слеша: например, src="/img/logo.jpg". Это необходимо, чтобы приложение обращалось к одной и той же папке с любой страницы сайта. Если не добавить слеш, браузер будет учитывать вложенность УРЛ: например, искать изображения по адресу example.com/subfolder/img вместо example.com/img. В результате ни один из статических файлов не будет найден — даже main.js, файл самого приложения: пользователь увидит пустую страницу.

Адрес папки со статическими файлами указывается в переменной STATIC_BASE="/assets/ — со слешами в начале и в конце. Это значение используется приложением внутри тега <base href="…"> на каждой странице.

В переменной ROUTER_BASE указывается путь, содержащийся в УРЛ приложения. Например, если сайт работает по адресу example.com/my-app, в качестве значения указывается ROUTER_BASE="my-app". Этот параметр передается в качестве basepath для роутера.

Это необходимо для корректной обработки статических файлов у страниц с вложенными УРЛ-ами: например, чтобы изображения на странице example.com/subfolder/about запрашивались сервером с адреса example.com/subfolder/img, а не example.com/subfolder/about/img (если <base> не указан) или example.com/img (если <base href="/">).

Бэкенд

В качестве сервера используется sirv-cli. Перед запуском необходимо собрать бандл с помощью npm run build и указать значение переменной окружения PORT: PORT=3000 npm start.

Сборка бандла

Проект собирается с помощью Вебпака. Переменные окружения, необходимые при сборке, указываются в .env-файле, расположенном в корне проекта. Переменные, которые необходимо передать в сам код приложения, дополнительно отмечаются в настройках плагина webpack.DefinePlugin({…}) внутри файла webpack.config.js.