Build your first static web app #tuto1
Tags: cloud, azure, beginners, github
Published: 2023-04-15 14:56:15

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.

**<u>Prerequisites</u>**

❑ 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3n3y9qo5xssjb227qjv.png)

**Step 2:** Create the web app


![Create button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8smbjt5ksdp1091rz007.png)

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


![Form filling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mhqiwyv9qcrh208crss.png)

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


![Choose GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uq2fucu21uttarzt54l.png)


![Login to GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr840lv5k4gc353fcoe9.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdihlwji4d7907nyjlmv.png)

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

 
![Resource review](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g31sh5riwlay2jfobm32.png)

**Step 6:** Click the create button.


![Create button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gm9a39spaxp60mbbjqdp.png)

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


![Go to resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h1f7w1ggd95mq45jcqv.png)

**Step 8:** Click on the URL.


![App's URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5urs6yrrcc0t17c230pp.png)

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


![Deployed static app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5moe4pe4zhn40e5968at.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xx1x1s3g05n466diccv7.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oydbgoziuga78rlrcug8.png) 

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlx51u0h2d591yhf42gu.png)

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. :)