Развертывание простого приложения

Svelte — это современный JavaScript-фреймворк, который позволяет создавать высокоэффективные веб-приложения с минимальными усилиями. Основное отличие Svelte от других фреймворков заключается в том, что он не использует виртуальный DOM и не требует большого количества библиотек для работы. Вместо этого он компилирует компоненты в оптимизированный JavaScript-код на этапе сборки, что позволяет добиться высокой производительности.

В этом разделе рассмотрим процесс развертывания простого приложения на Svelte, начиная от установки и настройки проекта, до деплоя на сервер.

Установка и настройка проекта

Для начала необходимо установить Node.js, если он ещё не установлен. Он потребуется для работы с пакетным менеджером npm, который используется для установки зависимостей в Svelte.

1. Инициализация проекта

Для создания нового проекта на Svelte можно использовать шаблон, который предоставляет сам фреймворк. В терминале выполните следующую команду:

npx degit sveltejs/template svelte-app

Эта команда создаст новую директорию svelte-app с базовой структурой проекта. Важно отметить, что команда degit используется для клонирования репозитория без истории версий, что минимизирует размер проекта.

Перейдите в каталог с проектом:

cd svelte-app

2. Установка зависимостей

Теперь нужно установить все необходимые зависимости. Для этого в директории проекта выполните команду:

npm install

Эта команда скачает и установит все библиотеки, указанные в файле package.json.

3. Запуск локального сервера

После того как все зависимости будут установлены, можно запустить локальный сервер для разработки:

npm run dev

По умолчанию приложение будет доступно по адресу http://localhost:5000. Откройте его в браузере, и вы увидите приветственную страницу от Svelte.

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

Структура созданного приложения выглядит следующим образом:

svelte-app/
├── public/
│   └── global.css
│   └── index.html
├── src/
│   └── App.svelte
│   └── main.js
├── package.json
├── rollup.config.js
└── node_modules/
  • public/ — статические файлы, такие как HTML и CSS. Это то, что будет доступно клиенту.
  • src/ — исходный код приложения, включая компоненты Svelte и JavaScript-файлы.
  • package.json — файл конфигурации проекта, содержащий зависимости и скрипты.
  • rollup.config.js — конфигурация сборщика Rollup, который используется для сборки проекта.

Основы Svelte-компонентов

Компоненты в Svelte — это основной строительный блок приложения. Они представляют собой файлы с расширением .svelte, которые содержат HTML, CSS и JavaScript.

Пример простого компонента:

<script>
  let name = 'Мир';
</script>

<style>
  h1 {
    color: red;
  }
</style>

<h1>Привет, {name}!</h1>

В этом примере:

  • <script> — блок для логики компонента. Здесь определена переменная name, которая будет использоваться в разметке.
  • <style> — блок для стилей, применяемых только к текущему компоненту.
  • Разметка компонента записана в обычном HTML-формате. В Svelte все переменные, вставленные в разметку, обрабатываются с помощью фигурных скобок {}.

Для динамического изменения содержимого в Svelte достаточно изменять переменные в блоке <script>, и приложение автоматически обновит DOM.

Создание простого приложения

Для создания простого приложения, отображающего список элементов, создадим новый компонент и добавим его в главный файл App.svelte.

  1. В файле App.svelte удалите стандартную разметку и замените её следующим кодом:
<script>
  let items = ['Яблоки', 'Бананы', 'Груши'];
</script>

<style>
  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    margin: 5px 0;
    font-size: 1.2em;
  }
</style>

<h1>Список фруктов</h1>
<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

В этом коде:

  • Используется директива {#each} для итерации по массиву items и вывода каждого элемента в <li>.
  • Для каждого элемента списка генерируется отдельный элемент списка (<li>).
  1. Для запуска приложения снова выполните команду:
npm run dev

Теперь на странице будет отображаться список фруктов, переданных в массив items.

Деплой на сервер

После того как приложение готово, следующим шагом является его развертывание на сервере.

1. Сборка проекта

Для создания production-версии приложения необходимо выполнить сборку с помощью команды:

npm run build

Эта команда создает оптимизированную версию приложения в папке public/, которую можно развернуть на сервере.

2. Выбор хостинга

Для хостинга можно использовать различные решения, такие как:

  • Netlify — один из самых популярных сервисов для хостинга статических сайтов.
  • Vercel — еще одна популярная платформа, поддерживающая серверлесс-приложения.
  • GitHub Pages — для небольших проектов можно использовать GitHub Pages.

Для развертывания на Netlify или Vercel достаточно просто подключить репозиторий и указать команду сборки (npm run build), после чего платформа автоматически выполнит деплой.

3. Настройка сервера

Если планируется деплой на собственный сервер, можно использовать такие инструменты, как Nginx или Apache для обслуживания статических файлов. Пример настройки Nginx:

server {
  listen 80;
  server_name yourdomain.com;
  root /path/to/your/project/public;
  index index.html;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
}

Эта конфигурация позволяет серверу правильно обрабатывать запросы и отдавать статические файлы.

Заключение

Развертывание приложения на Svelte — это быстрый и удобный процесс. Благодаря минимистичной структуре и высокой производительности, Svelte становится отличным выбором для создания современных веб-приложений.

Оглавление