F2.Templates 1.2.0-testing

F2 template pack

The F2.Templates package is where you can acquire the Future Squared C# templates. It contains the F2 Blazor template.

You can install it with the following console command:

dotnet new install F2.Templates

F2 Blazor template

To create a new F2 Blazor app template, use the following console command:

dotnet new f2blazor -o {the name of the directory where you want it created}

The F2 Blazor template is based on the default Blazor Server App template (i.e. dotnet new blazorserver) but with some changes:

• Blazor files are reorganised to avoid having to exaplain what "Shared" means and what goes in it
• Adds the Observer.razor component to consume the IObservable pattern
• The \Blazor\Components\TemplateComponent.razor and \Blazor\Pages\TemplatePage.razor template files exist
• Various F2 package references for deployment and running on embedded PCs (e.g. raspberry pi)

Stuff for nerds follows:

Making an existing Blazor project look like the F2 template

1. Move Error.cshtml, MainLayout.razor, NavMenu.razor (and dependent files) to \Blazor\Layout
2. Copy Observer.razor from this template into \Blazor\Layout
3. Move components into \Blazor\Components. Move the existing \Pages dir to \Blazor\Pages. Note that _Host.cshtml needs to remain inside the pages dir.
4. In Program.cs, change the Razor convention root directory (specified in AddRazorPages)

   builder.Services.AddRazorPages(o => o.RootDirectory = "/Blazor/Pages");
   

5. In _Imports.razor (which must remain in the project root), add @using directives for the {namespace}.Blazor.Pages, {namespace}.Blazor.Components, {namespace}.Blazor.Layout namespaces. You'll also likely need to remove {namespace}.Shared and {namespace}.Pages, because all the razor files just got moved.
6. Ensure F2.Deployment.App and Microsoft.Extensions.Hosting.Systemd packages are referenced. Add the UseSystemd call in Program.cs
7. In the csproj, ensure the <AssemblyName> declaration exists and follows the naming convention.
8. In _Host.cshtml, ensure that the site style sheet is linked (<link href="yourassemblyname.styles.css" rel="stylesheet" />, the default template uses Your.Project.Namespace.styles.css)
9. Ensure the SurveyPrompt component has been removed.
10. In MainLayout, replace the "about" link with the computer's hostname per the template version.
11. Delete the bin and obj files. (dotnet clean is insufficient to rekerjigger the thing)
12. dotnet build should now work.

Template design rationale

Partly, making blazor more friendly to newcomers (both to programming in general, and to migrating JS/Angular devs):

• having Pages and Shared intermingle with other, useful directories in the project's folder listing is confusing, so we put most of the "HTML-ish" stuff inside Blazor
• The Shared directory isn't an actionable name. If you want someone to "make a new component" then having a directory called Components means they know where to put it.
• Template files enable people to copy-paste their way to success.

Partly, making this amenable to an embedded computing context, especially such that nobody should ever need to use SSH:

• Systemd means the program starts by itself
• In the main layout, having the computer hostname printed onscreen helps when there are 14 raspberry pi's in one room and all of them are running the same app
• The project naming convention allows us to run a "package-ish management-ish" system for downloading / installing / updating / uninstalling these applications.
• The assembly naming convention means that EXE files are much smaller, which helps with linux tools that expect executable binary names of like 10 characters.