Перейти к основному содержимому

Vite — сборка и dev-server

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Архитектору

Vite — сборка и dev-server​

Vite — инструмент сборки и dev-server для современного фронтенда. В разработке отдаёт модули браузеру через native ESM (нативные ES-модули); в production собирает бандл через Rollup. Используется в Vue, React, Svelte, Astro из коробки.

Заменяет медленный старт Webpack на проектах с сотнями модулей: первый запуск и HMR (hot module replacement — горячая замена модулей без полной перезагрузки) обычно заметно быстрее.

ШагРезультат
1npm create vite — React или Vue
2Структура index.html + src/
3vite.config.js — proxy, alias
4.env и VITE_* переменные
5build + preview — production
6TypeScript и CI
МатериалЗачем
npm — команды и lock-файлыinstall, scripts
Первая программа на Node.jsbackend API :3000
FullstackCORS, два порта
Express — middlewareCORS на API
TypeScriptшаблоны react-ts

Навигация по фронтенду​

Два режима Vite

Dev — ESM и esbuild, почти мгновенный старт. Build — Rollup, минификация и code splitting для production.

Как работает Vite​

РежимИнструментОсобенность
npm run devesbuild + native importHMR, без полного бандла
npm run buildRollupTree-shaking, chunks

Vite отвечает только за сборку клиентского кода. Серверную часть запускает Node.js.

Когда использовать Vite​

СценарийViteАльтернатива
SPA на React/Vue/Svelte✓Webpack вручную
Библиотека UI✓ vite build --libtsup, Rollup
Legacy IE11осторожноWebpack + polyfills
Монорепо✓ + pnpm workspacesTurborepo, Nx
Node backendне цель Vitetsc, tsx, esbuild

Шаг 1 — быстрый старт React​

node -v
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Структура:

my-react-app/
  index.html          ← точка входа (не public/index.html как в CRA)
  vite.config.js
  src/
    main.jsx
    App.jsx
    index.css
  package.json

index.html:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Разбор:

  • Vite читает index.html как entry point.
  • type="module" — native ESM в браузере.
  • npm run dev → http://localhost:5173.

Production:

npm run build    # каталог dist/
npm run preview  # локальный просмотр dist

Шаг 2 — быстрый старт Vue​

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

src/App.vue — тот же цикл, что в Первая программа на Vue.js, только без create vue (без Router/Pinia из коробки).

Шаблоны Vite:

  • react, react-ts
  • vue, vue-ts
  • svelte, svelte-ts
  • vanilla, vanilla-ts

Флаг --template выбирает шаблон. Список: npm create vite@latest -- --help.

Шаг 3 — vite.config.js​

Базовый конфиг для React:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});
ОпцияСмысл
pluginsReact, Vue, Svelte — через официальные плагины
server.portПорт dev-server
build.outDirКуда класть production
build.sourcemapКарты для отладки prod

Шаг 4 — прокси к API​

При разработке фронт на 5173, API на 3000 — браузер блокирует cross-origin без CORS. Прокси в Vite:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

В коде:

const res = await fetch('/api/notes');
const notes = await res.json();

Запрос уходит на dev-server Vite, тот проксирует на Node — CORS не мешает. Подробнее — Fullstack на JavaScript — API и фронтенд. Альтернатива — CORS в Express.

Шаг 5 — переменные окружения​

Файлы .env, .env.local, .env.production:

VITE_API_URL=http://127.0.0.1:3000
VITE_APP_TITLE=Notes App

В коде только с префиксом VITE_:

const base = import.meta.env.VITE_API_URL;
const title = import.meta.env.VITE_APP_TITLE;
ФайлКогда загружается
.envВсегда
.env.localЛокально, в gitignore
.env.productionПри vite build
Секреты

Не кладите API-ключи в VITE_* — они попадают в клиентский бандл. Секреты только на сервере (262, 269).

Шаг 6 — алиасы путей​

import { defineConfig } from 'vite';
import path from 'node:path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});
import Button from '@/components/Button.jsx';

Для TypeScript добавьте в tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Шаг 7 — TypeScript​

Шаблон react-ts:

npm create vite@latest my-app -- --template react-ts

Скрипты в package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  }
}

Vite не проверяет типы при сборке — только транспиляция через esbuild. CI добавляет tsc --noEmit. Подробнее — TypeScript.

Шаг 8 — статика и public​

Файлы в public/ копируются as-is:

public/
  favicon.ico
  robots.txt

В HTML: <img src="/favicon.ico" /> — путь от корня dev-server.

Импорт из src/assets/ — с hash в имени после build:

import logo from './assets/logo.svg';

Vite и Webpack — сравнение​

Vite devWebpack dev
СтартESM + esbuild pre-bundleполный граф зависимостей
HMRточечная замена модулейпересборка чанков
Конфигобычно корочегибче, сложнее
Экосистемарост с 2020legacy-проекты

Новые учебные проекты в JS-экосистеме — почти всегда Vite (SvelteKit, Astro, create vite).

Полный walkthrough — fullstack dev​

Терминал 1 — API (262):

cd notes-api
npm run dev
# слушает :3000

Терминал 2 — фронт:

cd my-react-app
npm run dev
# слушает :5173, proxy /api → :3000

Проверка в браузере: http://localhost:5173 — список заметок без CORS-ошибок.

Упражнения​

  1. Добавьте второй proxy /health → http://127.0.0.1:3000/health.
  2. Настройте base: '/app/' и проверьте deploy в подкаталог.
  3. Подключите vite-plugin-pwa для offline (по документации плагина).
  4. Сравните время npm run dev Vite и старого CRA на том же железе.
  5. Добавьте ESLint через npm create vite опции или вручную.

Частые ошибки и troubleshooting​

СимптомПричинаРешение
Failed to resolve importНеверный путь или aliasПроверьте resolve.alias
Пустая страница после buildbase не совпадает с URLbase: '/repo-name/' для GitHub Pages
import.meta.env.X undefinedНет префикса VITE_Переименуйте переменную
CORS в devFetch на :3000 напрямуюProxy в server.proxy
HMR не работаетСинтаксическая ошибкаOverlay в браузере
port 5173 is in useЗанят портserver.port: 5174
Типы не проверяютсяТолько vite buildДобавьте tsc --noEmit в CI
Старый кэшService worker / браузерHard reload, incognito

FAQ​

Vite заменяет Node.js?

Нет. Vite — только фронтенд. Backend — Node, NestJS.

Create React App ещё актуален?

CRA в maintenance mode. Новые проекты — Vite или Next.js.

Можно ли Vite для библиотеки?

Да: build.lib в config — entry, форматы ESM/UMD.

SvelteKit / Astro нужен отдельный Vite config?

Обычно нет — meta-framework генерирует конфиг; расширяют через vite.config merge.

Production и деплой​

Сборка​

npm run build

Артефакт — dist/ со статикой. Загрузите на Netlify, Vercel, S3+CloudFront, nginx.

base для подкаталога​

export default defineConfig({
  base: '/my-app/',
});

Ссылки и assets получат префикс — важно для GitHub Pages.

Preview перед деплоем​

npm run preview

Локально проверяет dist/ на порту 4173.

nginx для SPA​

location / {
  try_files $uri $uri/ /index.html;
}

Нужно для client-side routing React Router.

Production

Включите gzip/brotli на CDN. Cache-busting через hash в именах файлов — Vite делает автоматически. API URL для prod — через VITE_API_URL на этапе build CI.

Шаг 9 — CSS и PostCSS​

Vite поддерживает CSS modules из коробки:

// Button.module.css
.primary { background: #646cff; }
import styles from './Button.module.css';
// <button class={styles.primary}>

PostCSS (Tailwind):

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

vite.config.js подхватывает postcss.config.js автоматически.

Шаг 10 — code splitting и lazy routes​

React lazy:

import { lazy, Suspense } from 'react';

const NotesPage = lazy(() => import('./pages/Notes.jsx'));

function App() {
  return (
    <Suspense fallback={<p>Загрузка…</p>}>
      <NotesPage />
    </Suspense>
  );
}

Vite создаёт отдельный chunk — загружается по demand. Rollup анализирует dynamic import при build.

Шаг 11 — Vitest в том же проекте​

npm i -D vitest jsdom @testing-library/react

vite.config.js:

/// <reference types="vitest" />
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
});

package.json:

"scripts": {
  "test": "vitest",
  "test:run": "vitest run"
}

Один конфиг для dev, build и test — преимущество Vite-экосистемы.

Шаг 12 — сборка библиотеки​

vite.config.js:

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'MyLib',
      fileName: 'my-lib',
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
    },
  },
});
npm run build
# dist/my-lib.js, dist/my-lib.umd.cjs

Публикация в npm — см. npm — команды и lock-файлы.

Шаг 13 — monorepo (кратко)​

packages/
  ui/          ← vite build --lib
  app/         ← vite SPA, depends on ui

Корневой pnpm-workspace.yaml. Vite в каждом пакете свой; общие зависимости hoisted через pnpm.

Оптимизация production build​

ОпцияЭффект
build.minify: 'esbuild'Быстрая минификация (default)
build.rollupOptions.output.manualChunksРазделение vendor
build.chunkSizeWarningLimitПорог предупреждения
@rollup/plugin-visualizerКарта размера бандла
import { visualizer } from 'rollup-plugin-visualizer';

plugins: [
  react(),
  visualizer({ open: true }),
],

GitHub Actions CI​

name: ci
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npx tsc --noEmit
      - run: npm run test:run
      - run: npm run build

TypeScript check + tests + build — стандартный pipeline для Vite SPA.

Деплой сценарии​

ХостингНастройка
Netlifypublish: dist, build command
Vercelauto-detect Vite
GitHub Pagesbase: '/repo/'
nginxroot /var/www/dist; try_files

API остаётся на Node или NestJS — отдельный сервис.

Расширенный troubleshooting​

СимптомДетали
Dynamic import failedНеверный путь, typo
SCSS не работаетnpm i -D sass
Worker не бандлится?worker suffix import
SSR neededVite SSR mode — advanced
Duplicate Reactdedupe в resolve

Дополнительные упражнения​

  1. Настройте manualChunks для react vendor bundle.
  2. Добавьте @/ alias и path в tsconfig.
  3. Lighthouse CI на npm run preview.
  4. PWA manifest через vite-plugin-pwa.
  5. Подключите Svelte template и сравните config.

Production checklist​

ПунктДействие
VITE_* в CIBuild-time env
Cache bustingHash в filenames (default)
CSPОграничить script-src
API URL prodОтдельный домен или path
Error trackingSentry browser SDK

Pre-bundling dependencies (dev)​

Vite сканирует imports и pre-bundle через esbuild в node_modules/.vite. Если пакет ломает ESM:

export default defineConfig({
  optimizeDeps: {
    include: ['some-cjs-package'],
  },
});

При странных ошибках dev — удалите node_modules/.vite и перезапустите.

Legacy browsers​

npm i -D @vitejs/plugin-legacy
import legacy from '@vitejs/plugin-legacy';

plugins: [
  react(),
  legacy({ targets: ['defaults', 'not IE 11'] }),
],

Добавляет polyfills и отдельный legacy bundle — редко нужно для внутренних admin-панелей.

SSR mode (продвинутое)​

Vite поддерживает SSR entry:

// server.js
import { createServer } from 'vite';

const vite = await createServer({ server: { middlewareMode: true } });

Используется meta-frameworks (SvelteKit, Astro server). Для plain SPA достаточно static dist/.

Сравнение dev-server портов​

ИнструментПорт по умолчанию
Vite5173
Astro4321
Express (262)3000
Prisma Studio5555

При одновременном запуске конфликтов нет — порты разные.

npm scripts — типовой набор​

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview",
    "lint": "eslint src",
    "test": "vitest run"
  }
}

См. npm — команды и lock-файлы про npm run и lockfile.

Второй проход — расширенный практикум (Vite)​

Серия мини-туториалов​

Туториал 1 — React plugin​

Команда или API: @vitejs/plugin-react.

Детали: Fast Refresh.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить React plugin
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Туториал 2 — Vue plugin​

Команда или API: @vitejs/plugin-vue.

Детали: SFC support.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить Vue plugin
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Туториал 3 — CSS modules​

Команда или API: import styles from './x.module.css'.

Детали: scoped class names.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить CSS modules
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Туториал 4 — PostCSS​

Команда или API: postcss.config.js.

Детали: autoprefixer pipeline.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить PostCSS
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Туториал 5 — SVGR​

Команда или API: vite-plugin-svgr.

Детали: import Logo as ReactComponent.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить SVGR
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Туториал 6 — Legacy browser​

Команда или API: @vitejs/plugin-legacy.

Детали: polyfills IE edge case.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить Legacy browser
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Туториал 7 — Library mode​

Команда или API: build.lib entry.

Детали: publish npm component lib.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить Library mode
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Туториал 8 — SSR Vite​

Команда или API: vite build --ssr.

Детали: server entry manual.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить SSR Vite
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Туториал 9 — Vitest​

Команда или API: vitest.config merge vite.

Детали: unit tests same config.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить Vitest
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Туториал 10 — Inspect plugin​

Команда или API: vite-plugin-inspect.

Детали: debug transform pipeline.

// пример шага
console.log('ok');
ШагПроверка
1Выполнить Inspect plugin
2Перезапустить dev-сервер
3Убедиться в отсутствии ошибок в консоли

Расширенные упражнения (второй проход)​

  1. Second proxy /health to backend.

Подсказка к упражнению 13: Начните с минимального изменения, затем добавьте тест. Тема: Second.

  1. base /app/ GitHub Pages deploy test.

Подсказка к упражнению 14: Начните с минимального изменения, затем добавьте тест. Тема: base.

  1. vite-plugin-pwa offline shell.

Подсказка к упражнению 15: Начните с минимального изменения, затем добавьте тест. Тема: vite-plugin-pwa.

  1. Compare dev start CRA vs Vite timer.

Подсказка к упражнению 16: Начните с минимального изменения, затем добавьте тест. Тема: Compare.

  1. ESLint flat config integration.

Подсказка к упражнению 17: Начните с минимального изменения, затем добавьте тест. Тема: ESLint.

  1. Manual chunks vendor split react.

Подсказка к упражнению 18: Начните с минимального изменения, затем добавьте тест. Тема: Manual.

  1. env.production.local override.

Подсказка к упражнению 19: Начните с минимального изменения, затем добавьте тест. Тема: env.production.local.

  1. Dynamic import lazy route.

Подсказка к упражнению 20: Начните с минимального изменения, затем добавьте тест. Тема: Dynamic.

  1. HTTPS dev server mkcert.

Подсказка к упражнению 21: Начните с минимального изменения, затем добавьте тест. Тема: HTTPS.

  1. Analyze bundle rollup visualizer.

Подсказка к упражнению 22: Начните с минимального изменения, затем добавьте тест. Тема: Analyze.

Расширенный FAQ (второй проход)​

Vite 6 changes?

Следите changelog ecosystem plugins.

Monorepo alias?

resolve alias to workspace packages.

require in deps?

Prefer ESM; vite-plugin-commonjs fallback.

Jest или Vitest?

Vitest native Vite config reuse.

SCSS global?

additionalData in css preprocessorOptions.

Public dir cache?

public copied as-is no hash.

Preview CORS?

preview server same origin dist.

WSL file watch?

server.watch usePolling true Windows.

Tree shaking lodash?

import … from 'lodash/es/…'.

Build target browserslist?

build.target es2020 adjust.

Production — дополнительные рекомендации​

#ПрактикаЗачем
1CICI npm run build artifact dist
2SourceSource maps hidden production Sentry upload
3CDNCDN immutable cache hashed assets
4VITE_VITE_ vars at build time CI inject
5nginxnginx try_files SPA fallback
6BrotliBrotli gzip double compress avoid
7BundleBundle budget CI fail if > 500kb
8PreviewPreview job GitHub Actions artifact

Troubleshooting — расширенная таблица​

СимптомВероятная причинаДействие
Сборка падает без текстаКэш или версия NodeОчистить node_modules, lock-файл, переустановить
Тесты flakyПорядок или timingИзолировать example, убрать sleep, добавить wait matchers
Production 502Process не слушает PORTПроверить env PORT и health endpoint
Данные пропали после deployIn-memory store или migrateПодключить БД, migrate deploy
CORS в браузереПрямой URL APIProxy dev или enableCors origin
Медленный первый запросCold start DB poolWarmup health check после deploy
Ошибка подписи iOSCertificate expiredRenew в Developer portal, download profiles
Turbo frame blankId mismatchСверить turbo-frame id в request и response
Prisma client outdatedSchema changednpx prisma generate после migrate
Vite blank prodНеверный base pathПроверить base и URL деплоя

Пошаговый walkthrough — контрольный список​

День 1​

  1. Шаг 1 дня 1: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 2 дня 1: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 3 дня 1: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 4 дня 1: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 5 дня 1: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check

День 2​

  1. Шаг 1 дня 2: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 2 дня 2: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 3 дня 2: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 4 дня 2: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 5 дня 2: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check

День 3​

  1. Шаг 1 дня 3: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 2 дня 3: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 3 дня 3: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 4 дня 3: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 5 дня 3: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check

День 4​

  1. Шаг 1 дня 4: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 2 дня 4: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 3 дня 4: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 4 дня 4: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 5 дня 4: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check

День 5​

  1. Шаг 1 дня 5: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 2 дня 5: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 3 дня 5: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 4 дня 5: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 5 дня 5: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check

День 6​

  1. Шаг 1 дня 6: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 2 дня 6: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 3 дня 6: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 4 дня 6: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 5 дня 6: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check

День 7​

  1. Шаг 1 дня 7: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 2 дня 7: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 3 дня 7: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 4 дня 7: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check
  1. Шаг 5 дня 7: закрепить часть стека Vite. Запишите результат в README проекта.
# checkpoint
npm test || bundle exec rspec || echo manual check

Чек-лист самопроверки перед сдачей практикума​

  • Проект создаётся с нуля по статье без пропусков шагов

  • CRUD или эквивалентный сценарий работает end-to-end

  • Есть обработка ошибок валидации или 404

  • Данные переживают перезапуск там, где это требуется темой

  • Написан минимум один автоматический тест или system check

  • Production-секция прочитана и применена к деплою или Docker

  • FAQ просмотрен — типичные ошибки воспроизведены и исправлены

  • Связанные материалы открыты для следующего шага обучения

Связанные материалы​

ТемаМатериал
npmnpm — команды, зависимости и lock-файлы
Node APIПервая программа на Node.js
Express CORSExpress — middleware, маршруты и ошибки
FullstackFullstack на JavaScript — API и фронтенд
ReactПервая программа на React
VueVue — Router, Pinia и Vite
SvelteПервая программа на Svelte
AstroПервая программа на Astro
TypeScriptПервая программа на TypeScript
CLI экосистемыСправочник CLI
Содержание