Deploy your Blazor app to Azure now for free! — dateo. software
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.
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. PrerequisitesI 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. What is Azure Static Web Apps?The Azure SWA service provides you with an environment to deploy your static web applications withglobally-distributed hosting,build and deployment automation,domains and SSL certificates,authentication options,staging environments,CLI support,support for Blazor, Vue, React, Angular, Svelte, and other frontend frameworks,support to hook up to Azure functions and containerized apps. You can have a look at theofficial documentation. The currentpricing planssupport a free and a professional option, depending on what your application might need. For our purposes, the free plan is more than enough. Getting started: Create a projectLet'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 isD:\reposin my case. Withdotnet list newyou can see a list of all the templates that are installed on your machine. We'll useblazorwasmhere. First, we create a new folder for the solution,cdinto it and create a new solution file:md Sandbox. BlazorStaticWebApp cd . \Sandbox. BlazorStaticWebApp\ dotnet new sln --name Sandbox. BlazorStaticWebAppNow, we create a Blazor Web Assembly project and associate it with the solution:dotnet new blazorwasm --name Client dotnet sln add . \Client\Client. csprojAnd last, since weknowthat we will use git in the process, we create a. gitignorefile. And you know what? The dotnet CLI can do this for us as well:dotnet new gitignoreWe now already have a working application. We can start it bycding into its directory and executing it:cd . \Client\ dotnet runThe terminal will display the URL on your machine, that ishttp://localhost:5037in 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 pageIndex. razor:@page "/" Index Hello, world! Welcome to your new app. Processor count: @Environment. ProcessorCount OS Version: @Environment. OSVersion Create a repository on GitHubNow, 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 init 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 mainMake 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. Create a static web app on AzureNavigate to theAzure Portaland 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. Subscription: You need to assign your work to a subscription. Resource Group: All resources related to this application will be assigned to a group. If you leave this field out, Azure will automatically create a new one for you. Name: Give your application a name. Plan Type: The free plan really is free, so don't worry. Region: You can pick a region that is located near your hometown or whatever you like. This is only relevant for the Azure Functions backend if you have one. Your static content will be globally distributed to sit where your users are. Source: We obviously choose GitHub, but you can also hook up to an Azure DevOps subscription. Azure will also ask you to log in to your account from here. You can then choose the corresponding repository and branch. Build Presets: You'll find a list of all the frameworks that are supported out of the box. Pretty impressive, if you ask me. App location: This is the folder of your client app within your solution directory. Clientin our case. Api location: If you start with a template that supports Azure Functions as a backend, you can specify the folder here as well. We have no such thing, so it can stay empty. That's it. Now hitReview + Createand 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, hitGo to resourceand 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 theworkflow filein your repository, you might notice a lineapi_location: "" # Api source code path - optionalWe 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 tomain, GitHub will start deploying your application again. Give it a few minutes, after which you should be able to navigate to theURLAzure provided you with:Sad though, we didn't learn anything interesting from the additional code. . . But still, that was pretty easy, wasn't it?What else is there?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. ConclusionIn terms of user experience, deploying simple projects and applications has probably never been easier and I have to say that I am very impressed by how well-integrated Azure has become with external service providers. I hope you'll have some fun building your own applications and deploying them to the cloud!As usual, you can find the code onGitHub