https://github.com/jongio/BlazorDocker
How to Containerize Blazor WebAssembly Standalone, WebAssembly Hosted, and Blazor Server apps
https://github.com/jongio/BlazorDocker
Last synced: about 2 months ago
JSON representation
How to Containerize Blazor WebAssembly Standalone, WebAssembly Hosted, and Blazor Server apps
- Host: GitHub
- URL: https://github.com/jongio/BlazorDocker
- Owner: jongio
- License: mit
- Created: 2020-06-05T05:32:47.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-18T18:17:41.000Z (almost 5 years ago)
- Last Synced: 2025-04-06T22:15:11.057Z (2 months ago)
- Language: HTML
- Homepage:
- Size: 252 KB
- Stars: 97
- Watchers: 4
- Forks: 24
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-dev - Blazor Docker - How to Containerize Blazor WebAssembly Standalone, WebAssembly Hosted, and Blazor Server apps
README
# Blazor Docker - How to Containerize Blazor WebAssembly Standalone, WebAssembly Hosted, and Blazor Server apps
This repo contains working examples for containerizing Blazor applications with four different hosting models.
**ClientServer** - A Blazor WebAssembly client app hosted on nginx and ASP.NET Core server app hosted in ASP.NET Core.
- Created with `dotnet new blazorwasm --hosted -o . -n BlazorClientServer`
**Hosted** - A Blazor WebAssembly client app hosted on ASP.NET Core server.
- Created with `dotnet new blazorwasm --hosted -o . -n BlazorHosted`
**Server** - A Blazor Server app hosted by ASP.NET Core.
- Created with `dotnet new blazorserver -o . -n BlazorServer`
**Standalone** - A Blazor WebAssembly client app hosted on nginx.
- Created with `dotnet new blazorwasm -o . -n BlazorStandalone`
## How to run
Run `docker-compose up --build` from ClientServer, Hosted, Server, or Standalone folders to run each version and open the corresdponding localhost endpoint that is found in the docker-compose file for the Blazor app.
## ClientServer
A Blazor WebAssembly client app hosted on nginx and ASP.NET Core server app hosted in ASP.NET Core. It is broken up into three projects "Client", "Server", and "Shared".
- docker-compose.yml - builds and runs both the Client and the Server projects.
### How to run
Run `docker-compose up --build` from ClientServer folder. Open browser and go to http://localhost:5080/
### Client Project - uses nginx on alpine base image.
- **/Pages/FetchData.razor** - includes the following code to show you what endpoint is being hit.
```csharp
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
Weather forecast
SERVER_HOST: @Configuration["SERVER_HOST"]
```
- **/wwwroot/appsettings.json** - includes SERVER_HOST setting for production or when running in a container. You'll want to change this to match your production endpoint.
- **/wwwroot/appsettings.Development.json** - includes SERVER_HOST setting for development machine.
- **/Dockerfile** - builds, publishes, and uses nginx to host it.
- **/nginx.conf** - the nginx.conf file needed to serve the site.
- **/Program.cs** - includes the following code to read the SERVER_HOST setting from appsettings.json
```csharp
var serverHost = string.IsNullOrEmpty(builder.Configuration["SERVER_HOST"]) ?
builder.HostEnvironment.BaseAddress :
builder.Configuration["SERVER_HOST"];
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(serverHost) });
```
### Server Project- uses ASP.NET runtime image
- **/Dockerfile** - builds and starts ASP.NET app
- **/Startup.cs** - includes code to enable Cors, so the client app can call from a different host.
```csharp
readonly string CorsOrigins = "CorsOrigins";
services.AddCors(options =>
{
options.AddPolicy(CorsOrigins,
builder => builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader());
});
app.UseCors(CorsOrigins);
```
## Hosted
A Blazor WebAssembly client app hosted on ASP.NET Core server.
### How to run
Run `docker-compose up --build` from Hosted folder. Open browser and go to http://localhost:6080/
### Client Project
- No changes made to Client project from base template.
### Server - uses ASP.NET runtime image
- **/Dockerfile** - builds and starts ASP.NET app
## Server
### How to run
Run `docker-compose up --build` from Server folder. Open browser and go to http://localhost:7080/
### Server - Uses ASP.NET Core runtime host
- **/Dockerfile** - builds, publishes, and starts the ASP.NET site.
## Standalone
### How to run
Run `docker-compose up --build` from Standalone folder. Open browser and go to http://localhost:8080/
### Standalone - uses nginx on alpine base image.
- **Dockerfile** - builds, publishes, and uses nginx to host it.
- **/nginx.conf** - the nginx.conf file needed to serve the site.