Coding, Tech and Developers Blog
With the new Static Web Apps service on Microsoft Azure, deploying your side or even enterprise projects and applications has never been easier. You can try that out in just a couple of clicks. And the best: It's free for personal use and small projects. Let's see how that works.
I have worked with both Microsoft Azure and Amazon Web Services extensively lately, but Azure's recent service Static Web Apps has caught me off guard: Never has it been easier to deploy simple applications to the cloud, all in a matter of minutes. And for small and personal-use projects it's completely free.
In this article, I will show you the basics of how you can start deploying to the cloud immediately.
I will demonstrate how to build and deploy a Blazor Web Assembly application to Azure Static Web Apps (SWA). If you want to follow along, you will need an active Azure and GitHub account; everything else will be provided by this tutorial.
The Azure SWA service provides you with an environment to deploy your static web applications with
You can have a look at the official documentation. The current pricing plans support a free and a professional option, depending on what your application might need. For our purposes, the free plan is more than enough.
Let's get started. The first we'll have to do is create a new dotnet solution and a Blazor Web Assembly project. You can do this with both Visual Studio and JetBrains Rider (which I am a fan of), but for the purpose of this post, we'll use the dotnet command line (that's fewer screenshots for me 😉).
We head over to our repository folder on our disk, which is
D:\repos in my case.
dotnet list new you can see a list of all the templates that are installed on your machine. We'll use
First, we create a new folder for the solution,
cd into it and create a new solution file:
dotnet new sln --name Sandbox.BlazorStaticWebApp
Now, we create a Blazor Web Assembly project and associate it with the solution:
dotnet new blazorwasm --name Client
dotnet sln add .\Client\Client.csproj
And last, since we know that we will use git in the process, we create a
.gitignore file. And you know what? The dotnet CLI can do this for us as well:
dotnet new gitignore
We now already have a working application. We can start it by
cding into its directory and executing it:
The terminal will display the URL on your machine, that is
http://localhost:5037 in my case.
If we navigate to this we'll the familiar Blazor template with which we can now work.
Actually, in order to show you how to deploy this application to Azure, we don't need to do anything else with our app. The only thing we'll change, because it's fun, is adding some more information to the index page
Welcome to your new app.
Processor count: @Environment.ProcessorCount
OS Version: @Environment.OSVersion
Now, we are ready to put our application out into the world. To do this, we navigate to our GitHub account and create a new repository. You can name it whatever you like. I will, obviously, stick to the name of the solution and also make it public so that you can access the code later. All of the other options need not be touched. We are initializing a completely empty repository.
On the following page, GitHub is nice enough to tell you how to proceed when pushing an existing repository to GitHub.
So, we go back to the terminal on our machine and navigate to the root directory of the solution. From there, we execute the following commands:
git add .
git commit -m "This is the first commit"
git remote add origin https://github.com/FoxDawg/Sandbox.BlazorStaticWebApp.git
git branch -M main
git push -u origin main
Make sure that you change the 4th line to whatever GitHub tells you to use in your case.
Once you refresh your GitHub page, you should be able to see your code.
Easy, right? And we are already finished in GitHub. Let's head over to Azure for the final step.
Navigate to the Azure Portal and log in (or create a new subscription if you have none).
From the search bar, you should be able to find the Static Web Apps service.
Once there, you can hit the Create button right away.
In the following screenshot, you will see the complete setup for my application, but let's pick that apart.
Client in our case.
That's it. Now hit
Review + Create and Azure will start deploying the application.
In fact, Azure will go into your GitHub repository and commit an automated workflow file, set up a few secrets, and configure all of the necessary Azure resources for you. It is pretty much a no-brainer.
Once finished, hit
Go to resource and find the value for the URL.
In my case, the GitHub deploy action actually failed and that might be the case for you as well. If you navigate to the workflow file in your repository, you might notice a line
api_location: "" # Api source code path - optional
We do not have an API, so we can simply delete that line (Just hit the pen in the top right and commit your changes). Since we committed to
main, GitHub will start deploying your application again.
Give it a few minutes, after which you should be able to navigate to the URL Azure provided you with:
Sad though, we didn't learn anything interesting from the additional code...
But still, that was pretty easy, wasn't it?
The Azure + GitHub integration (and Azure DevOps, of course) comes with more features. For example, if you or one of your colleagues creates a pull request to main in your repository, Azure will automatically deploy a staging site. That way, reviewers can actually see your changes live and play with it. Once merged, the staging site will automatically be destroyed again. How do you get the URL, you might ask? Azure will add it to the pull request's discussion, and you can also see the list of deployed environments from Azure itself.
Also, authorization options between client application and API (if present) can be easily configured as well, making the experience as smooth as possible.
You can also link your client to already deployed containerized applications in Azure.
I hope you'll have some fun building your own applications and deploying them to the cloud!
As usual, you can find the code on GitHub
Be the first to know when a new post was released