Blazor WASM Publishing to AWS Amplify
In this article, let's learn about
Publishing Blazor apps to AWS Amplify.
Table of Contents
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
- Create a Blazor Wasm Project.
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
- 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:
Code Sample - Push to GitHub Repository
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
Clicking that link will take you to the
Amplify Hosting section. Now click on
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
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:
Code Sample - AWS Amplify Build Settings
The above preBuild commands do the following:
npm installcommand installs npm. This is optional step and I added because this is needed for ilovedotnet repo to build.
curlcommand download a
shell scriptto install dotnet provided by Microsoft.
chmodcommand changes the permission of the shell script to allow execution of the script.
dotnet-install.shscript installs the .NET SDK:
-cargument 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.
-InstallDirargument will instruct the script to install the SDK in a specific directory. In this case it will create a directory called
dotnet7and put the SDK there.
- 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
dotnet7folder where the .NET 7 SDK was installed by the
The build command invokes the dotnet publish command using the .NET 7 SDK installed in the
dotnet7 folder in the preBuild step.
-cargument tells the CLI to build in Release configuration.
-oargument tells the CLI to put the output in the release folder.
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
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
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
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:
- Source address:
- Target address:
- click the
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.
You can also use custom domain to load your blazor wasm app.
- Purachse your custom domain.
- Add your domain name in the domain management section in AWS Amplify configuration.
- After some time your site will be published under your domain.
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.