Deploy Your Website In Azure Static Web App For Free

Azure has many ways to deploy website on the cloud, a quick and easy way is to deploy it to Azure Static Web Apps. This website can also be deployed for free for personal and development versions to test.

Below are the steps to deploy the azure static web apps.

Create a sample next JS app using below commands.

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --ts

Note
Any web app can be used to deploy like angular, react, vue, etc. I use react next js with typescript for development.

Step 1

Build the website and make sure to execute “Yarn export”. Make sure index.html is created in “out” folder.

Step 2

Push the code to your github repository

Step 3

Then login to https://portal.azure.com and search for Static Web Apps

Step 4

Click create and fill the following information

Step 5

I have selected to deploy the free version for demo, but you can choose paid version for production which has additional features.

Step 6

Login to Github by clicking on “Sign in with git hub”.

Once signed in, you will get below option to select the git hub repository where the nextjs web app code is present.

Step 7

Make sure you select the appropriate build preset for deployment. I have Next JS APP, so I have selected it below. There are many options as shown below

Step 8

Since “yarn export” creates a “out” folder where the index.html is present, I have configured the output location as below.

Step 9

Verify all the inputs and click “Review+Create”

Step 10

No other inputs are required and Final page looks as below.

Step 11

Click create and switch to github code repository for web app. And navigate to “Actions”

Step 12

Azure creates a YML file for CICD which will build the app and deploy to azure static web app. You can click on the file to check the code

Step 13

Once the build is completed the website will be deployed and URL will be available in the portal as below. This is auto-generated URL, you can configure custom domains to get your URL.

Conclusion

In this article, we have learnt how to create website and deploy static website to Azure Static Web App using the free plan. For the production version, you can get up to 5 domains and own functions. Also, the paid version support higher bandwidth.