Статические файлы и Vite

Кроме HTML странице нужны стили, скрипты и картинки. В AdonisJS для них два пути: готовые файлы, которые отдаются как есть, лежат в папке public/, а CSS и JavaScript, которые нужно собирать, проходят через Vite — сборщик фронтенда, встроенный в набор Web.

Папка public

Всё, что лежит в public/, доступно по адресу от корня сайта. Положите туда картинку public/logo.png и выведите её в макете:

{{-- resources/views/components/layout.edge --}}
<header>
  <a href="/"><img src="/logo.png" alt="Мой блог" width="120"></a>
</header>

Картинка откроется и напрямую по адресу http://localhost:3333/logo.png. Отдачей файлов занимается пакет @adonisjs/static, его настройки — в config/static.ts.

Стили и скрипты через Vite

Исходники стилей и скриптов лежат в resources/css/app.css и resources/js/app.js. Какие файлы собирать, указано в vite.config.ts в корне проекта:

// vite.config.ts
import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'
 
export default defineConfig({
  plugins: [
    adonisjs({
      entrypoints: ['resources/css/app.css', 'resources/js/app.js'],
      reload: ['resources/views/**/*.edge'],
    }),
  ],
})

entrypoints — входные файлы сборки. reload говорит Vite перезагружать страницу в браузере, когда меняется любой шаблон Edge.

Подключение в шаблоне

В <head> макета добавьте тег @vite:

{{-- resources/views/components/layout.edge --}}
<head>
  <meta charset="utf-8">
  <title>{{ title ?? 'Мой блог' }}</title>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

В режиме разработки тег подключает файлы с сервера Vite, который запускается вместе с node ace serve --hmr. Измените цвет в app.css — страница обновится сама.

Напишите в resources/css/app.css пару правил:

/* resources/css/app.css */
body {
  font-family: system-ui, sans-serif;
  max-width: 720px;
  margin: 0 auto;
}
 
.post-card {
  border-bottom: 1px solid #ddd;
  padding: 16px 0;
}

Список статей станет узкой колонкой по центру, а карточки разделятся линиями.

Сборка для сервера

Перед выкладкой файлы собираются в готовые бандлы:

node ace build

Vite сложит результат в public/assets/ внутри папки сборки, а тег @vite на сервере сам подставит имена файлов с хешами вроде app-3f2a1c.css. Ничего менять в шаблонах не нужно.

Частая ошибка

Не подключайте исходники напрямую тегом <link href="/resources/css/app.css">. Папка resources не отдаётся как статика, и в браузере будет ошибка 404, а после сборки исходников на сервере и вовсе нет. Стили и скрипты из resources подключайте только через @vite, а напрямую — только файлы из public/.