Desenvolva com Svelte

Crie um projeto Svelte com a Azion CLI, faça o build e o deploy dele em um domínio da Azion.

Última atualização

Ver como Markdown Configurar agente

Com a Azion CLI, você inicia um projeto Svelte a partir de um template SvelteKit, faz o build e o deploy dele. Depois do deploy, o projeto roda na Azion e responde em um domínio da Azion.

Um projeto Svelte na Azion tem duas partes: arquivos estáticos em um bucket de armazenamento e uma function com o código de servidor. Uma aplicação entrega os arquivos e executa a function. Para os outros frameworks de que a Azion faz o build, consulte Compatibilidade com web frameworks.

Pré-requisitos

  • Uma conta na Azion. Para criar uma, consulte Criar uma conta.
  • A Azion CLI instalada e com login feito. Para configurá-la, consulte Primeiros passos com a Azion CLI.
  • Node.js 18 ou posterior e o npm.
  • Um terminal e um editor de código.

Faça o deploy do projeto

Você cria o projeto com azion init, faz o build com azion build e o envia para a Azion com azion deploy.

Para criar o projeto, passe um nome para azion init. Selecione Svelte no seletor de presets e depois um template no seletor de templates:

azion init --name my-app --auto -y

A flag -y instala as dependências do projeto. A flag --auto pula as perguntas sobre um servidor de desenvolvimento local e sobre um deploy. Para as perguntas que o comando faz sem essas flags, consulte Azion CLI init. O seletor lista três templates Svelte. Com SvelteKit Boilerplate, a saída é:

Texto
01? Choose a preset: [Use arrows to move, type to filter]
02> AI Studio
03 Angular
04 Astro
05 Docusaurus
06 Eleventy
07 Emscripten
08 Gatsby
09 Hexo
10 Hono
11 Hugo
12 Javascript
13 Jekyll
14 Next
15 Nuxt
16 OpenNextJS
17 Preact
18 Qwik
19 React
20 Rustwasm
21 Stencil
22 Svelte
23 Typescript
24 Vitepress
25 Vue
26 Vuepress
27? Choose a preset: Svelte
28? Choose a template: [Use arrows to move, type to filter]
29> Neon (Postgres) SvelteKit Starter
30 SvelteKit Boilerplate
31 SvelteKit Commerce
32? Choose a template: SvelteKit Boilerplate
33
34Fetching selected template...
35
36Template successfully fetched
37Template successfully configured
38Installing application dependencies
39added 365 packages, and audited 366 packages in 18s
40102 packages are looking for funding
41run `npm fund` for details
426 vulnerabilities (2 low, 4 high)
43
44To address all issues possible (including breaking changes), run:
45 npm audit fix --force
46
47Some issues need review, and may require choosing
48a different dependency.
49
50Run `npm audit` for details.
51…
52[Azion] [Build] › ℹ info Using preset: svelte
53[Azion] [Build] › ✔ success Build completed successfully with only azion.config
54[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-app/.edge/manifest.json
55If you want to start a local development server later, run 'azion dev'
56Make sure to change to the new working directory before running building or deploying your project
57If you want to deploy your application later, run 'azion deploy'
58Make sure to change to the new working directory before running building or deploying your project
59Your application my-app was initialized successfully

O comando grava o projeto em uma pasta my-app. O arquivo azion.config.mjs dessa pasta define o preset svelte e declara os recursos do deploy:

  • Um bucket de armazenamento que recebe ./build, com acesso somente leitura para os workloads.
  • Uma function gerada a partir do código de servidor do SvelteKit.
  • Regras da aplicação que entregam, a partir do bucket, os arquivos em /_app/immutable e os arquivos com extensões estáticas.
  • Uma regra da aplicação chamada Execute Svelte Function que executa a function.

Para todas as configurações desse arquivo, consulte azion.config.js.

Para fazer o build do projeto, entre na pasta dele e execute azion build:

Shell
01cd my-app
02azion build

O Azion Bundler executa o build do SvelteKit com o preset svelte e o adaptador sveltejs/adapter-azion. A entrada da function vem de .svelte-kit/azion/_worker.js:

Texto
01Building your Application. This process may take a few minutes
02Running build step command:
03
04$ npx --yes @aziontech/bundler@1.1.4 build --preset svelte
05…
06[Azion] [Build] › ℹ info Using preset: svelte
07[Azion] [Pre-Build] › ℹ info Starting pre-build...
08…
09[SvelteKit] › ℹ info
10> sveltekit-boilerplate@0.0.1 build
11> vite build
12
13[SvelteKit] › ℹ info ▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]
14
15 tsconfig.json:2:12:
16 2 │ "extends": "./.svelte-kit/tsconfig.json",
17 ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
18
19[SvelteKit] › ℹ info vite v7.3.6 building ssr environment for production...
20... (118 more lines)
21
22[SvelteKit] › ℹ info ✓ built in 2.41s
23
24[SvelteKit] › ℹ info
25Run npm run preview to preview your production build locally.
26
27[SvelteKit] › ℹ info
28> Using sveltejs/adapter-azion
29
30[SvelteKit] › ℹ info ✔ done
31
32[Azion] [Pre-Build] › ℹ info Pre-build completed successfully
33[Azion] [Build] › ℹ info Using preset default entry: .svelte-kit/azion/_worker.js
34[Azion] [Build] › ℹ info Starting build...
35[Azion] [Build] › ✔ success Build completed successfully
36[Azion] [Post-Build] › ℹ info Starting post-build...
37[Azion] [Post-Build] › ✔ success Post-build completed successfully
38[Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX
39[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-app/.edge/manifest.json
40Your Application was built successfully

O build imprime um aviso sobre ./.svelte-kit/tsconfig.json e mesmo assim termina com Your Application was built successfully.

Para fazer o deploy do projeto, execute azion deploy na pasta do projeto:

azion deploy

A CLI envia o projeto para a Azion e abre uma página do Console que acompanha o deploy. A CLI também imprime a URL dessa página, para o caso de nenhum navegador abrir. No final, ela imprime a URL do domínio do projeto. Para a saída completa e as flags que alteram um deploy, consulte Azion CLI deploy.

Para testar o projeto no seu computador antes, consulte Azion CLI dev. Para fazer o deploy de um projeto Svelte que você já tem, execute azion link na pasta dele e selecione svelte na lista de presets. Para mais informações, consulte Azion CLI link.

Verifique o projeto

Quando o azion deploy termina, ele imprime a URL do domínio da Azion do projeto, no formato https://xxxxxxxxxx.map.azionedge.net. Abra a URL em um navegador para ver o projeto Svelte.

O primeiro deploy pode levar vários minutos para responder em todas as localidades; os deploys seguintes levam cerca de dois minutos. Uma localidade que ainda não tem o projeto retorna uma página 404 com o texto There's nothing here yet. Quando você vir essa página, aguarde e carregue a URL novamente.

Próximos passos

Compatibilidade com frameworksVeja de quais frameworks e presets a Azion faz o build.Azion CLI deployLeia a saída do deploy e as flags que alteram um deploy.Azion CLI devExecute o projeto Svelte no seu computador antes do deploy.azion.config.jsAltere o bucket, a function, o cache e as regras do preset Svelte.