I've been working on Microsoft technologies for quite some time and a few years back Angular and React replaced the front-end of most applications, while the back-end REST APIs and the MS SQL Server remained. With the introduction of Blazor, it became possible to build client-side front-ends and I wanted to give it a try. With Visual Studio it is very easy to add docker support to a project but NOT to a Blazor project. When developing it is easy if you have all the components running locally and this is an attempt to show how to dockerize and run all components of the application which includes front-end, REST services, and the database locally, and then to have them running in an AWS EKS cluster.
For this, I am going with my favorite WineShop sample. I have a Catalog REST API Service that fetches the wine catalog from the database and the Blazor front-end will display it to the user. When I run,
docker-compose up
and browse to http://localhost:5000 I am able to see the wine catalog as follows.
In case you want to try this immediately, visit my Github repository and download the code. Make sure to be in the branch "005-AddFrontend" when you run the command. Shown below is an image from the docker desktop,
Now that you have a better idea about the different services that are running, let me explain how to get these components containerized. I'll start with the front-end and move further.
Blazor Front-end
There are a few things you need to know about Blazor before creating the front-end, remember I was trying to run this like React on the client-side. There are three types of Blazor projects that can be created with the Visual Studio templates,
a) Client-Side WebAssembly - Standalone
b) Client-Side WebAssembly - ASP.Net Core Hosted
c) Server-Side
We need to create the first type of project and for that make sure not to select any of the options provided. Simply click next when you see the following dialog.
I have no intention of explaining the whole code base, but you'll see when you check the program.cs file of WineWeb project that I am calling Catalog service running in http://localhost:3000 to get the catalog.
builder.Services.AddHttpClient<IWineDataService, WineDataService>(client => client.BaseAddress = new Uri("http://localhost:3000/"));
The service WineDataService.cs returns a deserialized list of Wine objects which will then be consumed by the WineList page. The deserialization code,
public async Task<IEnumerable<Wine>> GetAllWines()
{
return await JsonSerializer.DeserializeAsync<IEnumerable<Wine>>
(await _httpClient.GetStreamAsync($"api/Wine"), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });
}
The page you saw above is WineList.razor and it has a partial class in WineList.cs which fetches data from the service at the initialization,
protected async override Task OnInitializedAsync()
{
//Use below two lines of code when loading local data
//InitializeWines(); //- Mentioned below
//return base.OnInitializedAsync();
Wines = (await WineDataService.GetAllWines()).ToList();
}
Containerizing the Blazor App
If you right-click on any other project, you will get the option to add docker support but not for Blazor projects. Hence, let's add a file named Dokcerfile and add the following content to it.
Here you are building the Blazor app on an existing image. I came across build issues and had to switch to mcr.microsoft.com/dotnet/sdk:5.0-alpine for the build to succeed. You too may have to use the alpine version. The client-side app will have to be served by a web server and for that purpose, you will need Nginx, and the nginx:alpine image could be used, where the build files are copied to "web" folder. Nginx will need to have a config file that we are copying as part of the process from the local project folder. Make sure to maintain the unix line end character in the nginx.conf file as any change could give errors. The file is as follows,
Now we are good with the Blazor front-end app. In the coming articles, I'll go through the rest of the project. Feel free to explore Blazor and the ecosystem. Thanks for reading.
Top comments (0)