Skip to content

Update Blazor WebAssembly template #50554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Sep 11, 2023

Conversation

surayya-MS
Copy link
Member

@surayya-MS surayya-MS commented Sep 6, 2023

Update Blazor WebAssembly template

Renamed from "Blazor WebAssembly App" to "Blazor WebAssembly Standalone App"
and added "Include sample pages" option to ide (checked by default) as well as "--empty" option for creating empty template "dotnet new blazorwasm --empty"

blazorwasmstandalone

Empty template without auth files:
emptyprojectstructure

Looks like this:

emptylook

Empty template with auth files:

emptyplusauthstruncture

Looks like this:

emptyplusauthlook

Fixes #50195
Fixes #50292

@ghost ghost added the area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates label Sep 6, 2023
@surayya-MS surayya-MS changed the base branch from main to release/8.0 September 6, 2023 16:02
@surayya-MS surayya-MS added area-blazor Includes: Blazor, Razor Components and removed area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates labels Sep 6, 2023
@surayya-MS surayya-MS marked this pull request as ready for review September 7, 2023 08:44
@surayya-MS surayya-MS requested a review from a team as a code owner September 7, 2023 08:44
@@ -1,3 +1,4 @@
/*#if (SampleContent)*/
Copy link
Member Author

@surayya-MS surayya-MS Sep 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This if block doesn't work. For empty and non-empty blazor wasm template this comment stays in place.
I checked for Blazor Web template app.css and it works there.

@SteveSandersonMS, do you know why this happens?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MackinnonBuck maybe you know?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's because of this block in template.json:

      "copyOnly": [
        "**/wwwroot/css/**"
      ],

You'll need to change it to something like:

      "copyOnly": [
        "**/wwwroot/css/bootstrap/**"
      ],

... so that app.css is not included in copyOnly.

@surayya-MS
Copy link
Member Author

surayya-MS commented Sep 8, 2023

@danroth27, which one is better for empty template with auth?

Currently it is without a link

without a link:
emptyplusauthlook

with a link:
emptyplusauthwithlinklook

This can be achieved by adding <LoginDisplay /> on this line

]
},
{
"condition": "(IndividualLocalAuth)",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LoginDisplay.IndividualMsalAuth.razor and LoginDisplay.IndividualLocalAuth.razor were identical. I replaced them with one LoginDisplay.razor

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch!

@danroth27
Copy link
Member

@danroth27, which one is better for empty template with auth?

Currently it is without a link

without a link: emptyplusauthlook

with a link: emptyplusauthwithlinklook

This can be achieved by adding <LoginDisplay /> on this line

Including the LoginDisplay in the Layout seems reasonable. It seems likely that the LoginDisplay will need to eventually go somewhere in the layout.

@@ -4,6 +4,9 @@
"description": "Šablona projektu pro vytvoření aplikace Blazor, která běží ve WebAssembly. Tato šablona se dá využít pro webové aplikace s propracovanými dynamickými uživatelskými rozhraními (UI).",
"symbols/Framework/description": "Cílová architektura pro projekt",
"symbols/Framework/choices/net8.0/description": "Cílový net8.0",
"symbols/IncludeSampleContent/displayName": "_Include sample pages",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do these eventually get translated?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a system. Eventually the system will make a PR that updates the newly-added strings to translated values. Nothing else has to be done for it in this PR.

@@ -4,6 +4,9 @@
"description": "Eine Projektvorlage für das Erstellen einer Blazor-App, die in WebAssembly ausgeführt wird. Diese Vorlage kann für Web-Apps mit umfangreichen dynamischen Benutzeroberflächen verwendet werden.",
"symbols/Framework/description": "Das Zielframework für das Projekt.",
"symbols/Framework/choices/net8.0/description": "Ziel net8.0",
"symbols/IncludeSampleContent/displayName": "_Include sample pages",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How do these eventually get translated?

Copy link
Member

@danroth27 danroth27 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@SteveSandersonMS
Copy link
Member

Do we still have bootstrap-icons in this template? If so, would it be possible to remove it in the same way it was removed from BlazorWeb-CSharp? That will reduce the default app size by 300KB or so, which is super valuable for WebAssembly.

You can check src\ProjectTemplates\Web.ProjectTemplates\content\BlazorWeb-CSharp\BlazorWeb-CSharp\Components\Layout\NavMenu.razor.css to see how the 3 icons it uses were inlined instead of referencing all of Bootstrap Icons (e.g., see the rule for .bi-house-door-fill).

Copy link
Member

@SteveSandersonMS SteveSandersonMS left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent!

There are a lot of combinations of options so I can't promise I've interpreted all the conditions exhaustively but everything I can see looks right.

If it's possible to also remove bootstrap-icons (commented elsewhere) that would complete the process of making it consistent with BlazorWeb-CSharp as far as I know.

Besides that, looks perfect!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-blazor Includes: Blazor, Razor Components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Rename Blazor WebAssembly project to Blazor WebAssembly Standalone Align Blazor WebAssembly template content with the Blazor Web App template
6 participants