https://github.com/datvm/demoblazorinsideweb
This is a demo to add Blazor Assembly inside an existing ASP.NET Core website. Here Blazor simply acts as a Web App content inside a Web Page.
https://github.com/datvm/demoblazorinsideweb
Last synced: 9 months ago
JSON representation
This is a demo to add Blazor Assembly inside an existing ASP.NET Core website. Here Blazor simply acts as a Web App content inside a Web Page.
- Host: GitHub
- URL: https://github.com/datvm/demoblazorinsideweb
- Owner: datvm
- Created: 2023-03-09T09:21:06.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-09T14:19:21.000Z (almost 3 years ago)
- Last Synced: 2025-02-14T15:16:32.428Z (11 months ago)
- Language: HTML
- Size: 1000 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# Introduction
This repo is to solve my problem with the the following scenario:
- I already have an ASP.NET Core website (project A) https://www.example.com with many pages.
- I now want to add a page like Feature.cshtml at https://www.example.com/feature, which use Blazor (project B) has content like this:
```
Blazor app here
```
The final result looks like this:
You can see the steps in this repo:
- At commit #2be15e3, I have an ASP.NET Core website (just a starting template). Consider this your existing website.
- [Commit #ba13eaf to 8bdae3a](https://github.com/datvm/DemoBlazorInsideWeb/compare/2be15e3e54972946b0c03aa5b18024c892066b23..8bdae3a24e9362030313495fe403907c968ac624?diff=split) adds a Blazor app to the website. You can see the changes in the commit.
# Step-by-step guide
## 1. Setup a new Blazor WebAssembly App (B)
- Create a new `Blazor WebAssembly App` project, for example `DemoBlazorInsideWeb.BlazorApp`.
- Update your router in `App.razor` to show the `Index` page for all routes:
```html
```
- Optionally delete `@page` in your `Index.razor` file so no URL can ever be routed to it. This is to prevent a route accidentally match it.
- Optionally delete `index.html` file in your `wwwroot` folder. However you may want to keep the content somewhere to copy its content later.
> **Note**
> You can still use Routing if you want to serve multiple apps on the same website (even though you have to pack all those apps inside this single project)
## 2. Setup your (existing) ASP.NET Core website (A)
- Add the Blazor project as Reference to your ASP.NET Core website project (A refers to or depends on B).
- Install `Microsoft.AspNetCore.Components.WebAssembly.Server` Nuget package:
```ps
dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Server
```
- In your app startup (`Program.cs` or `Startup.cs`), add `app.UseBlazorFrameworkFiles()` before `app.UseStaticFiles()`:
```cs
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
```
- In order to debug WASM app, you need to:
- Add `app.UseWebAssemblyDebugging();` in Development environment:
```cs
if (!app.Environment.IsDevelopment())
{
// Usually the template has this block
}
else // And you add this block
{
app.UseWebAssemblyDebugging();
}
```
- Add `inspectUri` property to your `launchSettings.json` file (you should find it in `Properties` folder). Add it to whichever profile you use, `https` and/or `IIS Express`:
```json
{
// ...
"IIS Express": {
// ...
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
}
}
```
## 3. Setup the new web (Feature) page
In the ASP.NET Core Razor Page that you want to add the Blazor app, you need to setup Blazor's content
- Add the HTML and Javascript content:
```html
```
- You should also refer to the Blazor's CSS file, or simply move its content to your own ASP.NET Core project:
```html
@section Heads {
}
```