Let us take a closer look at how to deploy the blazor aws amplify. With the support to our AWS support services at Bobcares, we can configure the steps easily.

How to deploy Blazor WebAssembly to AWS Amplify?

Amazon Web Services’ Amplify is a package of tools and services for creating full stack apps (AWS). Amplify provides static web app hosting with built in CI/CD. This is what we will use to create, deploy, and host Blazor WASM.

Requirements for the process:

• NET CLI
• Git
• GitHub account
• AWS account

Create Blazor WebAssembly project

To start a new Blazor WASM project for blazor aws amplify, use the following commands:

mkdir BlazorWasmAwsAmplify
cd BlazorWasmAwsAmplify
dotnet new blazorwasm

To test the application, run dotnet run and navigate to the URL in the result (most likely https://localhost:5001):

dotnet run
# Building...
# info: Microsoft.Hosting.Lifetime[0]
# Now listening on: https://localhost:5001
# info: Microsoft.Hosting.Lifetime[0]
# Now listening on: http://localhost:5000
# info: Microsoft.Hosting.Lifetime[0]
# Application started. Press Ctrl+C to shut down.
# info: Microsoft.Hosting.Lifetime[0]
# Hosting environment: Development
# info: Microsoft.Hosting.Lifetime[0]
# Content root path: C:\Users\niels\source\repos\BlazorWasmAwsAmplify
# info: Microsoft.Hosting.Lifetime[0]
# Application is shutting down...

Dotnet Publish

To publish the project and check the results, we can use the dotnet publish command:

dotnet publish # Microsoft (R) Build Engine version 16.8.0+126527ff1 for .NET # Copyright (C) Microsoft Corporation. All rights reserved. # # Determining projects to restore... # All projects are up-to-date for restore. # BlazorWasmAwsAmplify -> C:\Users\niels\source\repos\BlazorWasmAwsAmplify\bin\Debug\net5.0\BlazorWasmAwsAmplify.dll # BlazorWasmAwsAmplify (Blazor output) -> C:\Users\niels\source\repos\BlazorWasmAwsAmplify\bin\Debug\net5.0\wwwroot Optimizing assemblies for size, which may change the behavior of the app. Be sure to test after publishing. See: https://aka.ms/dotnet-illink # Compressing Blazor WebAssembly publish artifacts. This may take a while... # BlazorWasmAwsAmplify -> C:\Users\niels\source\repos\BlazorWasmAwsAmplify\bin\Debug\net5.0\publish\

In the publish directory, we can find a web.config file and a wwwroot folder. The config file helps you host your application in IIS, but we don’t need that file for static site hosts.

Everything we need will be inside of the wwwroot folder. The wwwroot folder contains the index.html, CSS, JS, and DLL files necessary to run the Blazor application.

Push Blazor project to GitHub

Here for blazor aws amplify, the application source code must be in the GitHub repository. To begin, we must build a local Git repository and commit the source code to it using the following commands:

# add the gitignore file tailored for dotnet applications, this will ignore bin/obj and many other non-source code files dotnet new gitignore
# create the git repository git init
# track all files that are not ignore by .gitignore
git add --all
# commit all changes to the repository
git commit -m "Initial commit"

Create a new GitHub repository.  Copy the commands to “push an existing repository from the command line” from the empty GitHub repository page. For example, follow the code line below with a different URL:

git remote add origin https://github.com/Swimburger/BlazorWasmAwsAmplify.git git push -u origin main

Create the AWS Amplify application

As the next step in blazor aws amplify we have to create the AWS APlify application:

• Go to the Amplify Create page, choose GitHub as the Git source code provider, and then click the “proceed” button. It is also worth noting that we can use several Git source code, providers.
• We will be asked to provide AWS Amplify access to the GitHub account. When we return to Amplify, choose the newly made GitHub repository and click the “next” button.
• On the following page, input the project’s build rules. Click the edit button to the right of the YAML build code:

Enter the following YAML code:

version: 1
frontend:
phases:
preBuild:
commands:
- curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh
- chmod +x *.sh
- ./dotnet-install.sh -c 5.0 -InstallDir ./dotnet5
- ./dotnet5/dotnet --version
build:
commands:
- ./dotnet5/dotnet publish -c Release -o release
artifacts:
baseDirectory: /release/wwwroot
files:
- '**/*'
cache:
paths: []

The preBuild commands do the following during the blazor aws amplify:

• The curl program downloads a shell script from Microsoft to install dotnet.
• The chmod command changes the permissions of the shell script, letting it to be executed.
• The.NET SDK is installed using the ‘dotnet-install.sh’ script:

  1:The -c option tells the install script to install.NET version 5.0. If it is a different version, replace 5.0 with it.

  2: Amplify already has a version of the.NET SDK installed on their build machines.  However, it may not be the one we require. That is why we must install the proper version.

  3:The -InstallDir option tells the script to install the SDK in a specified directory. In this case, the SDK will be in a directory called ‘dotnet5’.
• The last command will output the version of the.NET SDK to confirm that the.NET SDK was successfully installed.

  In the preBuild stage, the build command launches the dotnet publish command with the.NET 5 SDK installed in the ‘dotnet5’ folder.
• The -c option tells the CLI to build in the Release mode.
• The -o argument tells the CLI to put the output in the release folder.
• The property artifacts.baseDirectory is set to /release/wwwroot. This is where the dotnet publish command stores the publish output. So, Amplify will deploy all of the files in the /release/wwwroot directory.
• We must save the changes and then click the “next” button. Select the “Save and deploy” option.
• The Amplify application will be created, and we will be directed to the Amplify app’s site. Here we can check the current state of the branch we picked earlier.
• When we click on the branch, the build log appears in real time.
• After posting, go to the Blazor app hosted in Amplify by clicking on the link beneath the “Domain” label.

Rewrite all requests to index.html

The next step in blazor aws amplify is to remove the 404 errors. To resolve the 404 errors, we must tell Amplify to rewrite all requests to index.html. Return to the Amplify console and expand the “Rewrites and redirects” section.

There is already one pre setup redirect rule that matches all requests and returns index.html with a 404 status code.

Add the following redirect rule by clicking the “Edit” button:

• Source address: /^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|br|gz|html|md|eot|otf|dll|blat|wasm|dat)$)([^.]+$)
• Target address: index.html
• Type: 200 (Rewrite)

Move the rule to the top of the list and press the “Save” button.

This rule will match all requests except those that finish with the file extensions mentioned. This rule is based on the “Redirects for single page web apps (SPA)” rule given by Amplify.

With extra file extensions required by the Blazor WASM application. Using PowerShell, we can discover all of the extensions used in the Blazor WASM application.

Open a PowerShell window, and publish the Blazor WASM application using the.NET CLI. And the last command will  search for all files again and identify all unique extensions:

dotnet publish -c Release -o release
Get-ChildItem ./release/wwwroot -Recurse | Select-Object -Property Extension -Unique
# Output:
# Extension
# ---------
#
# .css
# .br
# .gz
# .ico
# .html
# .map
# .md
# .eot
# .otf
# .svg
# .ttf
# .woff
# .json
# .js
# .dll
# .blat
# .wasm
# .dat

Check the Blazor WASM application hosted on AWS Amplify. The404 response codes are now 200.

Bonus: Pull Request Previews

Amplify includes support for building a rare preview environment for pull requests. Go to the “Previews” tab and click the “Enable previews” button.

A popup window will open asking you to install the GitHub app. Select the “Install GitHub app” option. Choose the company or account for whom we want to install the GitHub app.

We can also choose the repositories we want to provide access to. We must grant access to at least the repository for which we wish to enable previews.

Return to the Amplify console, choose the main branch and then click the “Manage” button in the upper right corner. A modal with a toggle to allow previews for the previously chosen branch will display. Turn on the toggle and click the “Confirm” button.

We can now make a Pull Request on GitHub, and Amplify will create a preview environment for us.

[Need assistance with similar queries? We are here to help]

Conclusion

To sum up we have now gone through how to set up blazor aws amplify. We have seen how to deploy Blazor WebAssembly to AWS Amplify with the support of our AWS support services.