# How to build with Svelte

import Tag from '~/components/webkit/Tag.vue';

<Tag severity="info">
  Static application
</Tag>

Svelte is a free and open-source component-based front-end software framework which allows for the creation of applications with a very small size once compiled.

Learn more about [Svelte](https://svelte.dev/docs/introduction).

---

## Requirements

Before getting started, you must have:

- An [Azion platform account](/en/documentation/products/accounts/creating-account/) with [Functions](/en/documentation/products/build/applications/functions/) enabled.
- [The latest version of Azion CLI installed](/en/documentation/products/azion-cli/overview/).
- Code editor.
- Access to the terminal.
- Node.js ≥ 18.

---

## Initializing an Svelte project on the edge

1. Initialize the project:

```sh 
  azion init
```

2. Give your project a name, or press `enter` to accept the given suggestion:

```sh 
? Your application's name:  (black-thor)
```

3. Choose the Svelte preset: 

```sh 
? Choose a preset:  [Use arrows to move, type to filter]
  Angular
  Astro
  Docusaurus
  Eleventy
  Emscripten
  Gatsby
  Hexo
  Hono
  Hugo
  Javascript
  Jekyll
  Next
  React
  Rustwasm
> Svelte
  Typescript
  Vitepress
  Vue
```

4. Choose one of the available templates.

5. With the template fetched and configured, you can choose to start a local development server.

```sh 
Do you want to start a local development server? (y/N) 
```

The following steps are based on the answer you gave. 

- [If you chose to have a local development server running](/en/documentation/products/cli/frameworks/svelte/#answering-yes-to-local-dev).
- [If you chose not to have a local development server running](/en/documentation/products/cli/frameworks/svelte/#answering-no-to-local-dev).

### Answering yes to local dev

1. Install the project dependencies. Input `y` when the interaction prompts:

```sh 
  Do you want to install project dependencies? This may be required to start local development server (y/N)
```

Wait until the installation is complete.

Output:

```sh
Your Application was built successfully
[Azion] [Server] › ✔  success   Function running on port 0.0.0.0:3333, url: http://localhost:3333
```

2. On the browser, go to `http://localhost:3333/` and you can see your Svelte project running.

#### Deploying the project

When your project is running locally, you're still able to deploy it to the edge. To do so:

1. Stop the terminal execution with `control + c`. 

2. Access the project folder:

```sh
cd [your-project-name] 
```

3. Deploy the project: 

```sh
azion deploy
```

4. Wait while the project is built and deployed to the Azion Web Platform.

:::note 
Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn't open automatically, just click on the provided link.
::: 

After the deployment is complete, you'll receive a Workload to access your Svelte project on the Azion's platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided Workload, which should be similar to `https://xxxxxxx.map.azionedge.net`.

### Answering no to local dev

After indicating you don't want to have a local server running, deploy the Svelte project to the edge.

1. Enter `y` to the following interaction, indicating you want to deploy the project:

```sh
   Do you want to deploy your project? (y/N) 
```

2. Install the project dependencies. Input `y` when the interaction prompts:

```sh 
  Do you want to install project dependencies? This may be required to deploy your project (y/N)
```

3. Wait while the project is built and deployed to the Azion Web Platform.

:::note 
Once the deployment is triggered, Azion will open the browser and take the user to a page on Azion Console where the deployment logs and process can be monitored. If it doesn't open automatically, just click on the provided link.
::: 

After the deployment is complete, you'll receive a Workload to access your Svelte project on the Azion Platform.

Wait a few minutes so the propagation takes place, and then access your application using the provided Workload, which should be similar to `https://xxxxxxx.map.azionedge.net`.