Svelte is only growing in popularity, but some of us are using it and having the time of our life, wondering if you can use it in production.

Yes, you can use it in production, and yes, you can do it with Azure. This tutorial will show you how.

If you just want to use a template, I have created one here:

Github template: SvelteAzureTemplate

Tl;dr at bottom 🔽 🔽 🔽

Step 1: Create the SvelteKit App

The first step is to create the Svelte app. To do this, run the following command:

npm create svelte@latest

This will create a new Svelte application in the current directory.

Then, install the dependencies like so:

npm install

Step 2: Install TailwindCSS

Next, we need to install TailwindCSS, which will make it possible to enhance our code with god-like powers.

npm install -D tailwindcss autoprefixer postcss

Step 3: Set Up TailwindCSS

We now need to set up TailwindCSS. To do this, create a new file called tailwind.config.js in the root of the project, we can do this by running:

npx tailwindcss init -p

This will generate the TailwindCSS configuration files.

In the tailwind.config.js, we need to let Tailwind know where to look when looking for changes. By including ts, js, css, html, etc, it will look in files ending with those extensions.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{ts,js,css,html,svelte,md,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now, create app.css in the src folder, and add in

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, create +layout.svelte under src/routes and add in this code:

<script>

import "../app.css"

</script>

<slot/>

At this point, you can test to see everything works by adding this in the app.css file.

/* app.css */

body {
  @apply bg-blue-400
}

If the background is blue, then tailwind is in place.

Step 4: Install Svelte Adapter for Azure

We now need to install the Svelte adapter for Azure. To do this, run the following command:

npm install svelte-adapter-azure-swa

Step 5: Add the Azure Adapter

The final step is to deploy the application to Azure. To do this, add the following code to your app.js file:

import adapter from 'svelte-adapter-azure-swa';

This will enable the adapter to be used in the application.

Step 6: Deploy

Go to your Azure Dashboard and create a Static Web App.

Set the name, and connect it to your Github where you should have pushed your code.

In the options, set it like so:

app_location: /build
api_location: /server
output_location: /static

Create the project, and wait for it to deploy. Check the Github Actions to see that it is running correctly. If not, check the logs and see what is missing.

tl;dr

npm create svelte@latest

npm install

npm install -D tailwindcss autoprefixer postcss

// tailwind.config.js

export default {
  content: ["./src/**/*.{ts,js,css,html,svelte,md,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

npx tailwindcss init -p

npm install svelte-adapter-azure-swa

// tailwind.config.js
import adapter from 'svelte-adapter-azure-swa';
app_location: /build
api_location: /server
output_location: /static

Or, if you want to just use a template, get the template here:

P.S. I am making more tutorials on Svelte, so make sure to follow me to get all the secret tricks!

Github template: SvelteAzureTemplate

Good luck with your development!

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Interested in scaling your software startup? Check out Circuit.