Starting a project with Svelte and Azure Static Web Apps
Tags: web, javascript, svelte
Published: 2021-08-20 17:47:26

---
title: Starting a project with Svelte and Azure Static Web Apps

description: Azure Static Web Apps is a hosting service built specifically for full-stack applications. Let's see how to get started with a Svelte project and Static Web Apps.

published: true

tags:
- web
- javascript
- svelte
---

I love [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/overview?WT.mc_id=academic-39081-chrhar). Yes, I know, I work for Microsoft, so you're probably thinking I would say that regardless. However I really do use what I feel works best for me, and Static Web Apps absolutely fits the bill. It's a wonderful service for hosting full-stack web applications. Static Web Apps uses [Azure Functions](https://docs.microsoft.com/azure/azure-functions/functions-overview?WT.mc_id=academic-39081-chrhar) for server-side code, and provides wonderful functionality including [authentication](https://docs.microsoft.com/azure/static-web-apps/authentication-authorization).

When it comes time to start doing local development, the initial setup can require a couple of steps as there's a fair bit being provided to you by the service. I want to explore how to setup a project for Azure Static Web Apps. I'm going to use [Svelte](https://svelte.dev), my current favorite front-end framework, but the steps are similar to any other framework you may choose.

> This blog assumes you have [Node.js](https://nodejs.org/) and [Visual Studio Code](https://code.visualstudio.com) already installed.

## Install Azure Functions Core Tools

Azure Functions is the serverless offering from Azure. By using Azure Functions Core Tools, you can run the service locally on your system for development. The docs show how to [install Azure Functions Core Tools](https://www.npmjs.com/package/azure-functions-core-tools). I personally use [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/windows/wsl/about?WT.mc_id=academic-39081-chrhar) for all my development. I was able to install by opening a terminal for WSL (Ubuntu in my case) and running the NPM command:

```bash
npm i -g azure-functions-core-tools@3 --unsafe-perm true
```

## Bootstrap the project

It seems every front-end framework has its own bootstrapping tool. Svelte is no different. To create the project we'll use [degit](https://github.com/Rich-Harris/degit) and the template provided by Svelte. In a terminal window, execute the following:

```bash
npx degit sveltejs/template svelte-static-web-apps
cd svelte-static-web-apps
npm install
```

## Create the API

With the front-end project created, let's create the back-end. We'll do this by using `func`, which is the command-line tool for managing Azure Functions, and was installed with the core tools. The two commands we'll use are `func init` to create the project, and `func new` to create a new Azure Function. While we won't use the function, I want to at least demo the process.

Typically, Azure Functions are stored in a folder named *api*. To create the folder and project, run the following in the same terminal window.

```bash
func init api
```

You can then select the runtime and language. Choose *Node* (option 3) and *JavaScript* (option 1).

To create the first function, run the following:

```bash
cd api
func new
```

Select *HTTP trigger* (option 10) for the template, and specify *sample* for the name of the trigger.

You have now setup Azure Functions for the project.

## Add Azure Static Web Apps CLI

As highlighted earlier, Static Web Apps includes some neat functionality including authentication. If you are going to develop for the platform you'll very likely want to take advantage of this. In addition, because the server-side is running in Azure Functions, local development can be a little trickier because of how the services will run on your system. Fortunately [Azure Static Web Apps CLI](https://github.com/Azure/static-web-apps-cli#readme) will manage all of this for us, including giving us a great utility to mock the authentication process.

You can install it as a dev dependency using npm:

```bash
npm install --save-dev @azure/static-web-apps-cli
```

## Update the start script

Finally we'll need to update the *dev* script. Traditionally *dev* or *start* scripts launch the project for development purposes. We're going to update the *dev* script to start everything we need - Svelte's dev server, our Azure Function, and Azure Static Web Apps to tie everything together.

Open the project directory in Visual Studio Code by returning to the terminal window and running the following commands:

```bash
cd .. # To return to the root folder of the project
code .
```

Inside Visual Studio Code, open *package.json*. Replace the *dev* script with the following:

```json
"dev": "rollup -c -w & swa start http://localhost:5000 --api ./api",
```

Save the file, and your project is now ready to go!

## Run the project

With everything setup, the last thing to do is run the project! Inside of Visual Studio Code, you can open a terminal window by selecting *Terminal* > *New Terminal*. In the newly opened terminal, run the following to start the server:

```bash
npm run dev
```

## Summary

You have now setup a project to use Svelte and Azure Static Web Apps with Azure Functions. If you want to continue to explore, you can see how to [deploy the app](https://docs.microsoft.com/learn/modules/publish-app-service-static-web-app-api/?WT.mc_id=academic-39081-chrhar) and [manage authentication](https://docs.microsoft.com/learn/modules/publish-static-web-app-authentication/?WT.mc_id=academic-39081-chrhar). You can also checkout [the sample](https://github.com/GeekTrainer/svelte-static-web-apps?WT.mc_id=academic-39081-chrhar) I built while putting together this blog. And of course we're doing plenty of other [fun stuff with JavaScript](https://docs.microsoft.com/javascript/?WT.mc_id=academic-39081-chrhar).