--- name: azion-build-with-svelte description: >- Create a Svelte project with the Azion CLI, build it, and deploy it to an Azion domain. --- # Build with Svelte With the [Azion CLI](/en/documentation/devtools/cli/), you start a Svelte project from a SvelteKit template, build it, and deploy it. After the deploy, the project runs on Azion and answers on an Azion domain. A Svelte project on Azion has two parts: static files in a storage bucket and a [function](/en/documentation/platform/functions/) that holds the server code. An [application](/en/documentation/platform/applications/) delivers the files and runs the function. For the other frameworks that Azion builds, refer to [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility/). --- ## Prerequisites - An Azion account. To create one, refer to [Create an account](/en/documentation/fundamentals/creating-account/). - The Azion CLI, installed and logged in. To set it up, refer to [Azion CLI quickstart](/en/documentation/devtools/cli/quickstart/). - Node.js 18 or later, and npm. - A terminal and a code editor. --- ## Deploy the project You create the project with `azion init`, build it with `azion build`, and send it to Azion with `azion deploy`. To create the project, pass a name to `azion init`. Select *Svelte* in the preset picker, then a template in the template picker: ```bash azion init --name my-app --auto -y ``` The `-y` flag installs the project dependencies. The `--auto` flag skips the questions about a local development server and a deploy. For the questions that the command asks without these flags, refer to [Azion CLI init](/en/documentation/devtools/cli/init/). The picker lists three Svelte templates. With *SvelteKit Boilerplate*, the output is: ```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 ``` The command writes the project to a `my-app` folder. The `azion.config.mjs` file in that folder sets the `svelte` preset and declares the resources of the deploy: - A storage bucket that receives `./build`, with read-only access for workloads. - A function built from the SvelteKit server code. - Application rules that deliver files under `/_app/immutable` and files with static extensions from the bucket. - An application rule named `Execute Svelte Function` that runs the function. For every setting in that file, refer to [azion.config.js](/en/documentation/devtools/cli/azion-config-js/). To build the project, go to its folder and run `azion build`: ```bash cd my-app azion build ``` Azion Bundler runs the SvelteKit build with the `svelte` preset and the `sveltejs/adapter-azion` adapter. The function entry comes from `.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 ``` The build prints a warning about `./.svelte-kit/tsconfig.json` and still ends with `Your Application was built successfully`. To deploy the project, run `azion deploy` in the project folder: ```bash azion deploy ``` The CLI sends the project to Azion and opens a Console page that tracks the deploy. The CLI also prints the URL of that page, for when no browser opens. At the end, it prints the URL of the project's domain. For the full output and the flags that change a deploy, refer to [Azion CLI deploy](/en/documentation/devtools/cli/deploy/). To test the project on your computer first, refer to [Azion CLI dev](/en/documentation/devtools/cli/dev-command/). To deploy a Svelte project that you already have, run `azion link` in its folder and select *svelte* in the preset list. For more information, refer to [Azion CLI link](/en/documentation/devtools/cli/link-command/). --- ## Check the project When `azion deploy` ends, it prints the URL of the project's Azion domain, in the form `https://xxxxxxxxxx.map.azionedge.net`. Open the URL in a browser to see the Svelte project. The first deploy can take several minutes to answer from every location; later deploys take about two minutes. A location that does not have the project yet returns a `404` page with the text `There's nothing here yet`. When you see that page, wait, and then load the URL again. --- ## Next steps - [Frameworks compatibility](/en/documentation/devtools/runtime/frameworks/frameworks-compatibility.md): See which frameworks and presets Azion builds. - [Azion CLI deploy](/en/documentation/devtools/cli/deploy.md): Read the deploy output and the flags that change a deploy. - [Azion CLI dev](/en/documentation/devtools/cli/dev-command.md): Run the Svelte project on your computer before the deploy. - [azion.config.js](/en/documentation/devtools/cli/azion-config-js.md): Change the bucket, function, cache, and rules of the Svelte preset.