Many times when we want to deploy something to the cloud, we need it to be a controlled process. We need to know what is going to be deployed, when and how. Also, we need to be able to rollback if something goes wrong. Other times we want a simpler and more stream lined process, the fewer clicks the better. In this post I will show you how to deploy a simple web application to Azure using nothing but Azure Static Apps and Visual Studio Code.
References
Deploying using Azure Static Apps
Deploying a web application to Azure Static Apps using Visual Studio Code can be done via the command palette. You're asked to choose Azure account, subscription, resource group and name of the app. The extension will then create a GitHub Action workflow file and deploy the application to Azure. As for how it's being deployed, there's different presets/templates you can use, so if you have an Angular app, or React for example, you can use the corresponding template.
Making deployment even simpler
All the templates that exist for various application types are great, I don't need to remember where the build directory and other artefacts are places etc, the extension keeps track of that for me, I just need to remember what framework I'm using.
However, if I have a simpler app, for example a resume, I want a way to deploy that without being asked a bunch of questions on where's my API, where's my build directory (as I'm not using a SPA framework that needs to build my files before they can be deployed).
Presenting HTML preset, as simple as it gets
On 28th June, we released the HTML preset, which is a great choice if all you have are static pages that don't need to be built, if all you have is HTML, CSS and JavaScript, then this is what you need.
Let's deploy
Now that we talked about this new preset/template, let's see how we can use it to deploy a simple web application to Azure Static Apps.
1. Open Visual Studio Code.
2. Create a new folder.
3. Create a file called index.html and add the following content:
<!-- create a resume page with sections, experiences, education and skills -->
<html>
<head>
<title>Resume</title>
<link rel="stylesheet" href="css/style.css">
<style>
.container {
width: 80%;
margin: 0 auto;
}
.header {
text-align: center;
}
.content {
display: flex;
justify-content: space-between;
}
.section {
width: 30%;
}
.job,
.school,
.skill {
margin-bottom: 20px;
}
.job h3,
.school h3,
.skill h3 {
margin: 0;
}
.job p,
.school p,
.skill p {
margin: 0;
}
/* make it single column for mobile */
@media (max-width: 768px) {
.content {
flex-direction: column;
}
.section {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Resume</h1>
</div>
<div class="content">
<div class="section">
<h2>Experience</h2>
<div class="job">
<h3>Job Title</h3>
<p>Job Description</p>
</div>
<div class="job">
<h3>Job Title</h3>
<p>Job Description</p>
</div>
</div>
<div class="section">
<h2>Education</h2>
<div class="school">
<h3>School Name</h3>
<p>School Description</p>
</div>
<div class="school">
<h3>School Name</h3>
<p>School Description</p>
</div>
</div>
<div class="section">
<h2>Skills</h2>
<div class="skill">
<h3>Skill Name</h3>
<p>Skill Description</p>
</div>
<div class="skill">
<h3>Skill Name</h3>
<p>Skill Description</p>
</div>
</div>
</div>
</div>
</body>
4. Next, open the command palette and search for `Azure Static Web Apps: Create New Static Web App`.
5. Select subscription, resource group and name of the app.
6. Select the HTML preset from this list presets/templates.
7. Select the location of your source code, in this case it's the current folder.
8. Select the location of your build artifacts, in this case it's the current folder.
Now you should see your app being deployed to Azure Static Apps.
And that's it, now you have a simple web application deployed to Azure Static Apps. You can see the deployed app if you -right-click your app in the Azure Static Apps extension and select `Browse Website`.
Wasn't that simple? I think it was, and I hope you do too. If you want to learn more about Azure Static Apps, check out the documentation Azure Static Apps .
Updated Jul 17, 2023
Version 2.0
Chris_Noring
Microsoft
Microsoft
