I ❤️ .NET

In this article, let's learn about Publishing Blazor apps to AWS Amplify.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Dockerizing.

Table of Contents

1. Introduction
2. Publishing to AWS Amplify
3. Summary

Introduction

With ASP.NET Blazor WebAssembly (WASM) you can create .NET web applications that run completely inside of the browser sandbox. The publish output of a Blazor WASM project are all static files. Now that you can run .NET web applications without server-side code, you can deploy these applications to various static site hosts, such as Azure Static Web Apps and AWS Amplify. With the Blazor WebAssembly hosting model:

• The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser in parallel.
• The app is executed directly on the browser UI thread.

Publishing to AWS Amplify

Prerequisites

1. Create a Blazor Wasm Project.

2. Application source code must be inside of a GitHub repository. So, you need to create a local Git repository and commit your source code to the repository using these commands.

   Code Sample - Create Local Repository
3. Create a AWS Account

Push Blazor Project to GitHub

Create a new GitHub repository (instructions) and copy the commands to "push an existing repository from the command line" from the empty GitHub repository page, here's what it should looks like but with a different URL:

Create a AWS Amplify app

Now that your source code has been pushed to GitHub, you'll need to create a AWS Amplify app that provision your pipeline, build the project and publishes the code to a random https URL.

Start by navigating to the AWS Amplify and click on Get Started:

Clicking that link will take you to the Amplify Hosting section. Now click on Get started under Amplify Hosting Section.

Now select GitHub as the Git source code provider, and click the "continue" button. Note that you can also use different Git source code providers.

You will be prompted to give AWS Amplify permissions to your GitHub account.

When you get back to Amplify, select the GitHub repository you just created and click the next button:

On the next page, you need to enter the build settings for your project. Click the edit button below the YAML build code:

Enter the following YAML code:

The above preBuild commands do the following:

1. The npm install command installs npm. This is optional step and I added because this is needed for ilovedotnet repo to build.
2. The curl command download a shell script to install dotnet provided by Microsoft.
3. The chmod command changes the permission of the shell script to allow execution of the script.
4. The dotnet-install.sh script installs the .NET SDK:

5. 1. The -c argument tells the install script to install .NET version 7.0 which is the version I am using. Change 7.0 to your version if you're using a different version.

      Amplify already has a version of the .NET SDK pre-installed on their build machines, but not necessarily the version you need. That's why you need to install the correct version.

   2. The -InstallDir argument will instruct the script to install the SDK in a specific directory. In this case it will create a directory called dotnet7 and put the SDK there.
6. The last command will print the version of the .NET SDK to verify the successful installation of the .NET SDK. Note how it is invoking the dotnet CLI from the dotnet7 folder where the .NET 7 SDK was installed by the dotnet-install.sh.

The build command invokes the dotnet publish command using the .NET 7 SDK installed in the dotnet7 folder in the preBuild step.

1. The -c argument tells the CLI to build in Release configuration.
2. The -o argument tells the CLI to put the output in the release folder.

The artifacts.baseDirectory property is set to /release/wwwroot. This is the location the dotnet publish command put the publish output. As a result, Amplify will deploy all the files found in /release/wwwroot.

Save your changes and click on the next button. The next screen will give you an overview of the choices you've made. Click on the Save and deploy button.

Your Amplify application will be created and you will be taken to the homepage of your Amplify app.

Now aws will start to provision the process. Here you can see the status in real-time for the branch you selected earlier:

Once Amplify finished deploying, visit your Blazor app hosted in Amplify by clicking on the link below the Domain label.

Thats it. Your app will now be deployed in the above mentioned URL with https enabled.

Verify the Blazor WASM application is working as expected. Even when you navigate or refresh, the Blazor WASM application is returning as expected. But when you look in the browser developer tools, you will see the page is actually returned with an HTTP status code 404.

Rewrite all requests to index.html

To fix the 404 issues, you need to tell Amplify to rewrite all requests to index.html. Go back to the Amplify console and navigate to the Rewrites and redirects section. There's already one redirect rule pre-configured which matches all requests and return index.html with a 404 status code.

Click the "Edit" button and add the following redirect rule:

1. Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|br|gz|html|md|eot|otf|dll|blat|wasm|dat)$)([^.]+$)/>
2. Target address: index.html
3. Type: 200 (Rewrite)
4. click the Save button.

This rule will match all requests except if they end with the listed file extensions. This rule is based on the rule provided by Amplify's documentation "Redirects for single page web apps (SPA)", but with extra file extensions required by the Blazor WASM application. You can find out all the extensions used in your Blazor WASM application using PowerShell. Open a PowerShell window, publish the Blazor WASM application using the .NET CLI, and the last command will recursively look for all files and list out all unique extensions.

When you navigate back to the Blazor WASM application hosted in AWS Amplify, the 404 response codes should now be 200.

Configure Domain

You can also use custom domain to load your blazor wasm app.

1. Purachse your custom domain.
2. Add your domain name in the domain management section in AWS Amplify configuration.
3. After some time your site will be published under your domain.

Summary

Blazor WebAssembly can be served as static files. These files can be hosted in static hosting sites such as AWS Amplify. Using AWS Amplify you can create a app and select GitHub as source provider to automatically deploy the Blazor application to AWS Amplify. Out of the box, when you refresh the Blazor WASM application while not at the root path, Amplify will return the index.html file but with a 404 status code. You can use Amplify's "Rewrites and redirects" functionality to return the index.html file with status code 200 for all requests not requesting a specific list of extensions.