Build with Svelte

Create a Svelte project with the Azion CLI, build it, and deploy it to an Azion domain.

Last updated

View as Markdown Agent setup

With the Azion 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 that holds the server code. An application delivers the files and runs the function. For the other frameworks that Azion builds, refer to Frameworks compatibility.

Prerequisites

  • An Azion account. To create one, refer to Create an account.
  • The Azion CLI, installed and logged in. To set it up, refer to Azion 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:

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. The picker lists three Svelte templates. With SvelteKit Boilerplate, the output is:

Text
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

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.

To build the project, go to its folder and run azion build:

Shell
01cd my-app
02azion 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
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

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:

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.

To test the project on your computer first, refer to Azion CLI dev. 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.

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 compatibilitySee which frameworks and presets Azion builds.Azion CLI deployRead the deploy output and the flags that change a deploy.Azion CLI devRun the Svelte project on your computer before the deploy.azion.config.jsChange the bucket, function, cache, and rules of the Svelte preset.