DEV Community

Cover image for Build your first static web app #tuto1
Jaël Kalvin
Jaël Kalvin

Posted on

Build your first static web app #tuto1

Today, we are going to learn how to deploy your first static web app on Microsoft Azure. What is a static web app/website? A static website consists of a series of HTML files, each one representing a physical page of a website. These sites are often used to build portfolios or what french people call site vitrine. Trêve de bavardage, let's go.

Prerequisites

❑ A Microsoft Azure account ( A free one :) for tests)
❑ A Github repository containing your source files. You are free to use a framework or not. Just make sure you have an index.html file in the source folder. Why? Why? Why not?? ;)

Now let's go......

Step 1: Search for the term "static web" in the search bar of the azure portal.

Azure Portal

Step 2: Create the web app

Create button

Step 3: Fill the form and choose the free hosting plan.

Form filling

Step 4: Choose GitHub as deployment model and sign-in.

Choose GitHub

Login to GitHub

Step 5: Choose the repository, the branch and the build presets. Now note this if you have a simple folder structure, just choose HTML but if it is any type of custom folder structure, choose structure. Actually, choose any structure that suits your project.
Now, don't forget to select as file location the folder with your index.html file. The root folder is generally presented by /, but depending on your folder it can be /src etc.

Repository choice

Now, let's Azure review your resource. Boom pa Boom pa............

Resource review

Step 6: Click the create button.

Create button

Step 7: Now that your resource is created, inspect it.

Go to resource

Step 8: Click on the URL.

App's URL

It is done :). You have just created your first static web app. Let's have a look a it okay?

Deployed static app

But, this is not our app. Why are we seeing this. The reason is simple. If you go to your GitHub repo you will discover the created GitHub action is still running. It will look like something like this:

GitHub action

So hmmm, a bit of patience. All will be fine. If you are sure the repo selected is the one containing your index.html, just give it a bit of time. So yeah, let's wait.
Tic toc, Tic toc, Tic toc....... Do it a couple of times and Boom. This is your newly deployed site.

Deployed site

Well done, you have just created and deployed your first Microsoft Azure static web app. Now that this is done, don't forget to delete your resource. Yes, I will always remind you to delete your created resource. Well done.

Delete action

Have you encountered any problem following any of these steps? If yes, leave your problem in the comments section. If not, like share and don't forget to follow to be notified of each amazing article I publish. :)

Top comments (0)