In this post I'm going to talk about why I'm glad I set up my blog/portfolio website with Azure Static Web Apps.
Here are a few terms you should know about before reading this article.
Azure - Microsoft’s cloud services platform.
CI/CD - This stands for continuous integration and continuous deployment. The idea is to automate and integrate source control, testing, delivery, and deployment of your application.
Static Web Apps - An application for the web that relies on your HTML/CSS/Javascript files and the browser to run your application. More traditional applications have a server that renders and serves those assets when a client makes a request.
Azure Functions - Microsoft’s serverless solution where you can host event-driven applications. You can use the HTTP trigger option to build a serverless API with Azure Functions.
This week Microsoft unveiled a new product during its annual build conference, Azure Static Web Apps. A product designed to give you an easy way to deploy javascript applications to the web. The static assets of your application are served to the client on the webpage. You can create a backend for your application by making an Azure Function and putting it in the same repository as the rest of your web app. For more information check out John Papa’s introduction to the product with a simple demo here. After watching it, I’m sure you will be as excited as I am!
I decided to give it a try myself and deploy the portfolio site I’ve been working as a Static Web App in Azure. You can check out my in-progress portfolio and blog here. I used React for this project, but this isn't limited to React, you can use any front end javascript framework. You can even use it to host a plain HTML and javascript site (but who does that when there are 100s of frameworks to chose from).
Before I continue: it’s important to remember this product is in preview and was released less than a week ago. Everything could change in the future. It’s a great product that had worked perfectly for me, but it's not ready for production applications. I’m using it for my blog because it’s simple and I don't expect much traffic.
Here are 6 things that I love about Azure Static Web Apps.
1) You get a CI/CD Pipeline built for you
An entire pipeline is automatically created for you with Github Actions when you create your web app. All you need to do is specify the repository and the location of your assets. As someone who has invested a lot of time customizing build pipelines, having one set up at the push of a button is really refreshing. Also, you don’t need to know anything about GitHub Actions to have this set up and working. Just add the repository and Github Actions will redeploy your code each time you push to master. This is perfect for side projects where you don't have the time to set one up yourself.
2) You can do everything in Visual Studio Code
Microsoft released a new extension that lets you create the static web app without needing to interact with the Azure portal. Check it out here. If you use Visual Studio Code’s GitHub extension you can continuously push and deploy your code to Azure all in the comfort of your code editor. The less I have to leave the editor the more I can focus on programming.
3) SSL/TLS is setup out of the box
Setting up an SSL certificate can be a pain, but Azure will do the hard work for you. After your application is deployed for the first time, it will be deployed as an https website. Additionally the process for adding your own domain is simple and took me just a few seconds to set up. This is the first time I've set up https and connected my domain without any hiccups.
4) Azure Functions Support
Functions can act as the back end of your application. All you do is specify the folder where the function’s code resides in your repository. I converted my old express code into an azure function. The setup was quick and easy. Since my application is so small I appreciate having it all in one repository. Functions are great for tasks like sending emails or pulling data from a database.
5) A Staging Environment for Pull Requests
A staging environment is temporarily built when you create a pull request. This is great for collaboration. In addition to seeing the code changes on GitHub your collaborators can see the application running in a live environment. You could even set up tests to run on the staging environment before allowing someone to approve the PR. By taking a look at your application before merging into master and deploying it, you can catch bugs before your users do.
6) Authorization and Authentication built-in
I haven’t personally tried this out yet but I'm looking forward to using it when I need it. Azure currently supports using the following providers: Twitter, Facebook, Github, Google, and Azure Active Directory.
Conclusion
This tool is a great addition to Azure’s many useful products and I’m excited to see how it evolves over time. I’d be interested to try it out for a larger product with a team to see how it goes. Microsoft did not recommend using this product in production, but one day it may be the norm to use this for simple web applications.
The best part about Azure Static Web Apps is that it saves you a lot of time. I took an existing GitHub repository, and within minutes I had a CI/CD pipeline and my web app hosted on my domain. The speed at which you can deploy your application allows you to focus on what’s most important: the code and the product itself.
I recommend giving it a try to see if you like it; here’s Microsoft's helpful guide to get you started.
Top comments (0)