Starting a project with Svelte and Azure Static Web Apps

I love Azure Static Web Apps. 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 for server-side code, and provides wonderful functionality including authentication.

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, 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 and Visual Studio Code 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. I personally use Windows Subsystem for Linux (WSL) for all my development. I was able to install by opening a terminal for WSL (Ubuntu in my case) and running the NPM command:

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 and the template provided by Svelte. In a terminal window, execute the following:

npx degit sveltejs/template svelte-static-web-appscd svelte-static-web-appsnpm 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.

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:

cd apifunc 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 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:

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:

cd .. # To return to the root folder of the projectcode .

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

"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:

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 and manage authentication. You can also checkout the sample I built while putting together this blog. And of course we're doing plenty of other fun stuff with JavaScript.