--- name: azion-desenvolva-com-svelte description: >- Crie um projeto Svelte com a Azion CLI, faça o build e o deploy dele em um domínio da Azion. --- # Desenvolva com Svelte Com a [Azion CLI](/pt-br/documentacao/devtools/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](/pt-br/documentacao/plataforma/functions/) com o código de servidor. Uma [aplicação](/pt-br/documentacao/plataforma/applications/) entrega os arquivos e executa a function. Para os outros frameworks de que a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- ## Pré-requisitos - Uma conta na Azion. Para criar uma, consulte [Criar uma conta](/pt-br/documentacao/fundamentos/criar-uma-conta/). - A Azion CLI instalada e com login feito. Para configurá-la, consulte [Primeiros passos com a Azion CLI](/pt-br/documentacao/devtools/cli/primeiros-passos/). - 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: ```bash 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](/pt-br/documentacao/devtools/cli/init/). O seletor lista três templates Svelte. Com *SvelteKit Boilerplate*, a saída é: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: Svelte ? Choose a template: [Use arrows to move, type to filter] > Neon (Postgres) SvelteKit Starter SvelteKit Boilerplate SvelteKit Commerce ? Choose a template: SvelteKit Boilerplate Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies added 365 packages, and audited 366 packages in 18s 102 packages are looking for funding run `npm fund` for details 6 vulnerabilities (2 low, 4 high) To address all issues possible (including breaking changes), run: npm audit fix --force Some issues need review, and may require choosing a different dependency. Run `npm audit` for details. … [Azion] [Build] › ℹ info Using preset: svelte [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your 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](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build do projeto, entre na pasta dele e execute `azion build`: ```bash cd my-app azion 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`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset svelte … [Azion] [Build] › ℹ info Using preset: svelte [Azion] [Pre-Build] › ℹ info Starting pre-build... … [SvelteKit] › ℹ info > sveltekit-boilerplate@0.0.1 build > vite build [SvelteKit] › ℹ info ▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json] tsconfig.json:2:12: 2 │ "extends": "./.svelte-kit/tsconfig.json", ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [SvelteKit] › ℹ info vite v7.3.6 building ssr environment for production... ... (118 more lines) [SvelteKit] › ℹ info ✓ built in 2.41s [SvelteKit] › ℹ info Run npm run preview to preview your production build locally. [SvelteKit] › ℹ info > Using sveltejs/adapter-azion [SvelteKit] › ℹ info ✔ done [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using preset default entry: .svelte-kit/azion/_worker.js [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json Your 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: ```bash 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](/pt-br/documentacao/devtools/cli/deploy/). Para testar o projeto no seu computador antes, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). 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](/pt-br/documentacao/devtools/cli/link-comando/). --- ## 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 frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks.md): Veja de quais frameworks e presets a Azion faz o build. - [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy.md): Leia a saída do deploy e as flags que alteram um deploy. - [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando.md): Execute o projeto Svelte no seu computador antes do deploy. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, a function, o cache e as regras do preset Svelte.