This article covers :
- Creating a GitHub repository and cloning it using Visual Studio.
- How to create an Azure Static Web App and configure it to pull from your GitHub repository.
- Creating an Uno Platform WebAssembly application and committing it to your repository.
Note: A shorter Version of this article for those with more experience with Azure is available here in Uno Platform’s documentation.
Suppose you have an idea for an Uno Platform WebAssembly application and you’re also thinking about how you could host it.
In the past you may have used CDNs (Content Delivery Networks) for things like JavaScript libraries because the network distributes the files around the world. Being distributed around the world, the files are physically closer to your users which speeds up a browser’s request for the file compared to if the file was served from a single server on the other side of the world for example.
Because an Uno Platform WebAssembly application is all client-side (all the work happens in the browser), what you have is a static web app.
While you could host your static web application with a traditional hosting service, that would limit its potential. That’s because one of the main advantages of static web apps is that they don’t have a traditional web server backend. This allows static web apps to be distributed around the world in a similar manner that a CDN is used to distribute a JavaScript library for example.
In this article you’re going to look into a hosting service designed for static web apps called Azure Static Web Apps.
Azure Static Web Apps
Microsoft’s Azure Static Web Apps service is designed for static web apps and offers a lot of features to make deploying and configuring your app seamlessly. Some of the features include free SSL certificates, custom domains, a seamless security model, the ability to generate staging versions, and more. A complete list of features can be found here: https://docs.microsoft.com/en-us/azure/static-web-apps/overview
As shown in the following image, in this article you’ll be using GitHub as your code repository and GitHub Actions to deploy your code to Azure Static Web Apps. For this article, you won’t be using the Azure Functions but they’re available to your web application, if needed, for your serverless API endpoints.
As the following image shows, the steps for this article will be:
1. Create a GitHub repository
2. Create an Azure Static Web App and link it to the GitHub repository
3. Create an Uno Platform WebAssembly application and check it into GitHub
1. Create a GitHub repository
As shown in the following image, the first thing you need to do is create a GitHub repository that you’ll connect to the Azure Static Web App.
To create a new GitHub repository, go to your repository list and click the New button.
Give the new repo a name. I’ve named mine: demo
Check the Add a README file checkbox and then press the Create repository button.
Next, create a file in the repository so there’s something displayed in the Azure Static Web App before you create the Uno Platform WebAssembly application. This will allow you to see the Azure Static Web App pull the latest changes from the GitHub repository automatically.
To add a new file directly to your repository, click on the Add file button and choose Create new file from the drop-down menu.
Name the file index.html and then add the following HTML tags to the file, as shown in the following image:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>initial page</title> </head> <body> This is the initial page created directly in the repository. </body> </html>
Scroll down until you see the Commit new file button and press it.
With the GitHub repository, and an initial HTML file now created, you can move to your next step.
2. Create an Azure Static Web App
As shown in the following image your next step is to create an Azure Static Web App and link it to your GitHub repository.
Click the following link and press the Start for free button you see on the web page: https://azure.microsoft.com/en-ca/services/app-service/static/
Once you sign in, you’re brought to the Microsoft Azure dashboard. In the search box, start typing Static Web Apps in the search bar and then select it from the drop-down.
You should now be in the Static Web Apps dashboard. Once there, to create a new static web app, click the New link.
As shown in the following image, to create the static web app, you need to choose which Azure subscription and resource group to use.
Then, you need to specify a name and region. I’ve used demo for the name.
Next press the Sign in with GitHub button to sign into GitHub and give the Azure Static Web App permission to access your GitHub repositories.
Once you sign into GitHub, the dialog will expand allowing you to choose which repository and branch to use.
Choose the organization that your new GitHub repository is in, choose the new repository, and choose the branch.
For the Build presets drop-down, choose Custom and then leave the rest of the values at their defaults.
With everything now specified, press Review + create button.
You’re now presented with a list of all the settings that were selected. If something doesn’t look right, click the Previous button to correct it.
If everything looks good, press the Create button.
The static web app will be created and, once complete, you should see the view shown in the following image.
Click the Go to resource button.
You should now see the details of your static web app.
To view your static web app, containing what’s currently being pulled from your GitHub repository, click the URL that’s about halfway down just below the Subscription ID in the following image.
You should see the content of the index.html page that you created in the GitHub repository.
While the default build process works fine for pulling in the HTML page from GitHub, there are a few modifications that you need to make so that this works with the Uno Platform’s WebAssembly application that you’re about to create.
Click on the link below Edit workflow in the Static Web App’s properties. That link will bring you to your GitHub repository and a YML file that was created by the Static Web App to control GitHub Actions. Click the edit this file button that’s next to the trash can on the right.
Under jobs, build_and_deploy_job, steps, there’s a uses property with a value of actions/checkout@v2. After that block’s submodules: true property, add the following values. The location for the following values in the file is also highlighted in the following image.
- name: Setup dotnet uses: actions/setup-dotnet@v1.7.2 with: dotnet-version: '5.0.103' - run: | cd demo/demo.Wasm dotnet build -c Release
Further down in the file, find the app_location property and change its value to the following:
"demo/demo.Wasm/bin/Release/net5.0/dist"
Click the Start Commit button and then the Commit button to save your changes.
Now, your last step is to create a web application so that you can see the Azure Static Web App in action.
3. Create an Uno Platform WebAssembly application and check it into GitHub
As shown in the following image, for this step, you’re going to create the Uno Platform WebAssembly application and then check it into the GitHub repository.
Clone the repository
Before creating the Uno Platform WebAssembly application, you need to clone the GitHub repository. To do this, as shown in the following image, in your GitHub repository there’s a Code button. Click the Code button to reveal a drop-down that has a URL. Click the copy button that’s to the right of the URL.
Now, open Visual Studio 2019 and there’s a Clone a repository button at the top on the right side of the dialog. Click the button and the dialog shown in the following image is displayed.
Paste the GitHub repository’s URL in the Repository location textbox, choose a location on your device where you’d like the files to be placed, and then press the Clone button.
In your Solution Explorer window, delete the index.html file because you’re about to replace it with an Uno Platform WebAssembly application.
In the same folder, add a .gitignore file for Visual Studio files. This will reduce the number of files to commit once you’ve created the Uno Platform’s WebAssembly application. You can find a template for the file here: https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
Create an Uno Platform WebAssembly application
First, you’ll need to setup your environment for Uno Platform. You can either use the Visual Studio 2019 template, as show below, or use the dotnet new templates.
Once the Visual Studio 2019 extension is installed, Click on the File, New Project… menu item and then, as shown in the following image, search for the Cross-Platform App (Uno Platform) template. Select the template and then click Next.
In the dialog that’s displayed next, give the project a name (I used demo as the name of my project), set the location to the folder where you cloned the GitHub repository, and then click Create.
Because the Uno Platform allows for the creation of a cross-device application, the template creates a bunch of projects for different devices. The project you’re interested in for the web application is demo.Wasm.
TIP: Expand the wwwroot folder and delete the web.config file (if there is one) because doing so will enable brotli compression in Azure Static Web Apps.
Adjust the Wasm project.
You’ve configured the Azure Static Web App to build a .NET 5 application so now you need to make sure this project is configured for .NET 5. To do this, right-click on the demo.Wasm project and choose the Edit Project File menu item.
If the TargetFramework node has the value netstandard2.0, change it to net5.0:
<TargetFramework>net5.0</TargetFramework>
Save and close the project file.
Next, click on the Tools, NuGet Package Manager, Manage NuGet Packages for Solution… menu item.
In the Installed list, upgrade the Uno.Wasm.Bootstrap and Uno.Wasm.Bootstrap.DevServer packages to 2.0.0 or later.
If not installed, in the browse tab, install the Microsoft.Windows.Compatibility package version 5.0.1.
Verify the changes
Before you check things into GitHub, it’s always a good idea to test things locally to make sure they’re working. This will save you some grief and time if something breaks and you have to track down where the error is happening only to discover that the issue was with the code you checked in.
Right-click on demo.Wasm project and set it as the default project. Build the solution and start the application without the debugger; you should see the following web page in your browser:
Check your code into GitHub
Now you can check your code into the GitHub repository and see the Azure Static Web App pull your latest code, build it, and deploy it automatically.
To commit your code in Visual Studio, display the Team Explorer window, switch to the Changes area if it’s not currently displayed, enter a comment, and then choose the Commit All and Push commit option as shown in the following image:
In your Azure Static Web App’s properties, there’s a Deployment history item with a link called GitHub Action runs. If you click on that link, another page will open showing you details about each build event. There should be an event running for the code you just checked in.
It may take a few minutes for the event to complete and your latest changes to be live.
Once the build event completes, if you go to your Azure Static Web App URL, you should see the new text displayed “Hello, world!” instead of the original text “This is the initial page created directly in the repository.”
Summary
As you saw in this article, Uno Platform WebAssembly applications are static applications and can be deployed as on Azure’s Static Web Apps service.
Microsoft’s Azure Static Web Apps make it easy to deploy static web apps from a GitHub repository using GitHub Actions.
Azure Static Web Apps have a lot of features to make deploying and configuring your app seamless including free SSL certificates, custom domains, a seamless security model, the ability to generate staging versions, and more.
Guest blog post by Gerard Gallant, the author of the book “WebAssembly in Action” and a Senior software developer / architect @dovico
