Skip to content

Commit 501dc8f

Browse files
gvreddy04gvreddy04
authored
Getting started guide (#23)
* Getting started guide updates
1 parent d215ae0 commit 501dc8f

7 files changed

Lines changed: 514 additions & 4 deletions

‎BlazorExpress.Bulma.Demo.RCL/Constants/RouteConstants.cs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,10 @@ public static class RouteConstants
8686
// Getting Started
8787
public const string Demos_Getting_Started = Demos_Prefix + "/getting-started";
8888
public const string Demos_Getting_Started_Introduction = Demos_Getting_Started + "/introduction";
89+
public const string Demos_Getting_Started_WebAssembly_NET_8 = Demos_Getting_Started + "/blazor-webassembly-net-8";
90+
public const string Demos_Getting_Started_WebApp_Server_NET_8 = Demos_Getting_Started + "/blazor-webapp-server-global-net-8";
91+
public const string Demos_Getting_Started_WebApp_Auto_NET_8 = Demos_Getting_Started + "/blazor-webapp-auto-global-net-8";
92+
public const string Demos_Getting_Started_MAUI_NET_8 = Demos_Getting_Started + "/maui-blazor-net-8";
8993

9094
// Features
9195
public const string Demos_Skeletons_Documentation = Demos_Prefix + "/skeletons";

‎BlazorExpress.Bulma.Demo.RCL/Layout/DemosMainLayout.razor.cs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ private HashSet<LinkGroup> GetLinkGroups()
3939
CssClass = "is-size-7 has-text-weight-bold has-text-danger",
4040
Links = [
4141
new Link { Href = RouteConstants.Demos_Getting_Started_Introduction, Text = "Introduction" },
42+
new Link { Href = RouteConstants.Demos_Getting_Started_WebAssembly_NET_8, Text = "Blazor WebAssembly (.NET 8)" },
43+
new Link { Href = RouteConstants.Demos_Getting_Started_WebApp_Server_NET_8, Text = "Blazor WebApp (.NET 8) Server" },
44+
new Link { Href = RouteConstants.Demos_Getting_Started_WebApp_Auto_NET_8, Text = "Blazor WebApp (.NET 8) Auto" },
45+
new Link { Href = RouteConstants.Demos_Getting_Started_MAUI_NET_8, Text = "MAUI Blazor Hybrid App (.NET 8)" },
4246
]
4347
});
4448

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/GettingStartedDocumentation.razor‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,54 @@
1010
</SubTitleTemplate>
1111
</PageHero>
1212

13+
<Section Class="p-0" Size="HeadingSize.H2" Name="Documentation" PageUrl="@pageUrl" Link="documentation">
14+
<Block>
15+
Please find the getting started documentation links, corresponding to each .NET version and project type, listed below:
16+
</Block>
17+
<Block>
18+
<div class="table-container">
19+
<table class="table is-bordered is-striped is-fullwidth">
20+
<thead>
21+
<tr>
22+
<th scope="col" style="width:48px;">#</th>
23+
<th scope="col" style="width:164px;">.NET Version</th>
24+
<th scope="col">Documentation Link</th>
25+
</tr>
26+
</thead>
27+
<tbody class="table-group-divider">
28+
<tr>
29+
<td>1</td>
30+
<td>.NET 8</td>
31+
<td><a href="/demos/getting-started/blazor-webassembly-net-8" target="_blank">Blazor WebAssembly (.NET 8)</a></td>
32+
</tr>
33+
<tr>
34+
<td>2</td>
35+
<td>.NET 8</td>
36+
<td><a href="/demos/getting-started/blazor-webapp-server-global-net-8" target="_blank">Blazor WebApp (.NET 8) - Interactive render mode Server - Global location</a></td>
37+
</tr>
38+
<tr>
39+
<td>3</td>
40+
<td>.NET 8</td>
41+
<td><a href="/demos/getting-started/blazor-webapp-auto-global-net-8" target="_blank">Blazor WebApp (.NET 8) - Interactive render mode Auto - Global location</a></td>
42+
</tr>
43+
<tr>
44+
<td>4</td>
45+
<td>.NET 8</td>
46+
<td><a href="/demos/getting-started/maui-blazor-net-8" target="_blank">MAUI Blazor Hybrid App (.NET 8)</a></td>
47+
</tr>
48+
</tbody>
49+
</table>
50+
</div>
51+
</Block>
52+
<Block>&nbsp;</Block>
53+
</Section>
54+
1355
@code {
1456
private const string pageUrl = RouteConstants.Demos_Getting_Started_Introduction;
1557
private const string pageUrl2 = RouteConstants.Demos_Prefix;
16-
private const string pageTitle = "Get started with BlazorExpress Bulma";
17-
private const string pageDescription = "Build production-ready Blazor apps quickly. A lightweight, developer-focused library combining Blazor performance with Bulma simplicity.";
18-
private const string metaTitle = "Get started with BlazorExpress Bulma";
19-
private const string metaDescription = "Build production-ready Blazor apps quickly. A lightweight, developer-focused library combining Blazor performance with Bulma simplicity.";
58+
private const string pageTitle = "Getting Started";
59+
private const string pageDescription = "Learn how to quickly set up <code>BlazorExpress.Bulma</code> in your Blazor project using dotnet templates or manual installation, and how to register required services.";
60+
private const string metaTitle = "Getting Started with BlazorExpress.Bulma";
61+
private const string metaDescription = "Step-by-step guide to using BlazorExpress.Bulma: dotnet templates, manual install, and service registration for Blazor apps.";
2062
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
2163
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/GettingStarted_01_NET_8_WebAssembly_Documentation.razor‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<div class="content">
13+
<h2>Prerequisites</h2>
14+
<ul>
15+
<li>.NET 8 SDK (<a href="https://dotnet.microsoft.com/download/dotnet/8.0" target="_blank">Download</a>)</li>
16+
<li>Visual Studio 2022 or later / VS Code / JetBrains Rider</li>
17+
<li>Basic knowledge of Blazor WebAssembly</li>
18+
</ul>
19+
20+
<h2>1. Using dotnet Templates</h2>
21+
<ol>
22+
<li>
23+
<b>Install the template:</b>
24+
<pre><code>dotnet new install BlazorExpress.Bulma.Templates</code></pre>
25+
</li>
26+
<li>
27+
<b>Create a new project:</b>
28+
<pre><code>dotnet new blazorexpress-bulma -n MyBlazorApp</code></pre>
29+
</li>
30+
<li>
31+
<b>Run your app:</b>
32+
<pre><code>cd MyBlazorApp
33+
dotnet run</code></pre>
34+
</li>
35+
</ol>
36+
<p>
37+
The template sets up Bulma CSS, required services, and sample components.
38+
</p>
39+
40+
<h2>2. Manual Installation</h2>
41+
<ol>
42+
<li>
43+
<b>Add the NuGet package:</b>
44+
<pre><code>dotnet add package BlazorExpress.Bulma</code></pre>
45+
</li>
46+
<li>
47+
<b>Add Bulma and BlazorExpress.Bulma CSS to <code>wwwroot/index.html</code>:</b>
48+
<pre><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"&gt;
49+
&lt;link rel="stylesheet" href="_content/BlazorExpress.Bulma/css/blazorexpress.bulma.css"&gt;
50+
</code></pre>
51+
</li>
52+
<li>
53+
<b>Add BlazorExpress.Bulma JS to <code>wwwroot/index.html</code>:</b>
54+
<pre><code>&lt;script src="_content/BlazorExpress.Bulma/js/blazorexpress.bulma.js"&gt;&lt;/script&gt;
55+
</code></pre>
56+
</li>
57+
<li>
58+
<b>Add <code>@@using BlazorExpress.Bulma</code> to <code>_Imports.razor</code>:</b>
59+
<pre><code>
60+
@using BlazorExpress.Bulma
61+
</code></pre>
62+
</li>
63+
<li>
64+
<b>Register services in <code>Program.cs</code> (if required):</b>
65+
<pre><code class="language-csharp">
66+
// Program.cs
67+
using BlazorExpress.Bulma;
68+
69+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
70+
// ... your existing setup
71+
72+
// Register BlazorExpress.Bulma services (if required)
73+
builder.Services.AddBlazorExpressBulma();
74+
75+
await builder.Build().RunAsync();
76+
</code></pre>
77+
<p>
78+
<b>Note:</b> If <code>AddBlazorExpressBulma()</code> is not available, check the <a href="https://github.com/BlazorExpress/BlazorExpress.Bulma" target="_blank">official documentation</a> for the latest setup instructions.
79+
</p>
80+
</li>
81+
</ol>
82+
83+
<h2>3. Usage Example</h2>
84+
<p>
85+
Add a Bulma component to <code>Pages/Index.razor</code>:
86+
</p>
87+
<pre><code>
88+
&lt;Button Color="ButtonColor.Primary"&gt;Hello Bulma!&lt;/Button&gt;
89+
</code></pre>
90+
91+
<h2>4. Troubleshooting</h2>
92+
<ul>
93+
<li>Ensure all CSS and JS references are correct in <code>index.html</code>.</li>
94+
<li>Restart the development server after changes to static files.</li>
95+
<li>Check browser console for errors if components do not render as expected.</li>
96+
</ul>
97+
98+
<h2>References</h2>
99+
<ul>
100+
<li>
101+
<a href="https://github.com/BlazorExpress/BlazorExpress.Bulma" target="_blank">BlazorExpress.Bulma GitHub Repository</a>
102+
</li>
103+
<li>
104+
<a href="https://www.nuget.org/packages/BlazorExpress.Bulma/" target="_blank">NuGet Package</a>
105+
</li>
106+
</ul>
107+
</div>
108+
109+
@code {
110+
private const string pageUrl = RouteConstants.Demos_Getting_Started_WebAssembly_NET_8;
111+
private const string pageTitle = "Getting started - Blazor WebAssembly (.NET 8)";
112+
private const string pageDescription = "Learn how to quickly set up <code>BlazorExpress.Bulma</code> in your Blazor WebAssembly project using dotnet templates or manual installation, and how to register required services.";
113+
private const string metaTitle = "Getting started - Blazor WebAssembly (.NET 8)";
114+
private const string metaDescription = "Step-by-step guide to using BlazorExpress.Bulma: dotnet templates, manual install, and service registration for Blazor WebAssembly apps.";
115+
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
116+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/GettingStarted_02_NET_8_WebApp_Server_Documentation.razor‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<div class="content">
13+
<h2>Prerequisites</h2>
14+
<ul>
15+
<li>.NET 8 SDK (<a href="https://dotnet.microsoft.com/download/dotnet/8.0" target="_blank">Download</a>)</li>
16+
<li>Visual Studio 2022 or later / VS Code / JetBrains Rider</li>
17+
<li>Basic knowledge of Blazor Server or Blazor Web App (Server mode)</li>
18+
</ul>
19+
20+
<h2>1. Using dotnet Templates</h2>
21+
<ol>
22+
<li>
23+
<b>Install the template:</b>
24+
<pre><code>dotnet new install BlazorExpress.Bulma.Templates</code></pre>
25+
</li>
26+
<li>
27+
<b>Create a new project:</b>
28+
<pre><code>dotnet new blazorexpress-bulma -n MyBlazorApp</code></pre>
29+
</li>
30+
<li>
31+
<b>Run your app:</b>
32+
<pre><code>cd MyBlazorApp
33+
dotnet run</code></pre>
34+
</li>
35+
</ol>
36+
<p>
37+
The template sets up Bulma CSS, required services, and sample components.
38+
</p>
39+
40+
<h2>2. Manual Installation</h2>
41+
<ol>
42+
<li>
43+
<b>Add the NuGet package:</b>
44+
<pre><code>dotnet add package BlazorExpress.Bulma</code></pre>
45+
</li>
46+
<li>
47+
<b>Add Bulma and BlazorExpress.Bulma CSS to <code>Pages/_Host.cshtml</code> (Blazor Server) or <code>Components/Layouts/MainLayout.razor</code> (Blazor Web App):</b>
48+
<pre><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"&gt;
49+
&lt;link rel="stylesheet" href="_content/BlazorExpress.Bulma/css/blazorexpress.bulma.css"&gt;
50+
</code></pre>
51+
</li>
52+
<li>
53+
<b>Add BlazorExpress.Bulma JS to <code>Pages/_Host.cshtml</code> (Blazor Server) or <code>Components/Layouts/MainLayout.razor</code> (Blazor Web App):</b>
54+
<pre><code>&lt;script src="_content/BlazorExpress.Bulma/js/blazorexpress.bulma.js"&gt;&lt;/script&gt;
55+
</code></pre>
56+
</li>
57+
<li>
58+
<b>Add <code>@@using BlazorExpress.Bulma</code> to <code>_Imports.razor</code>:</b>
59+
<pre><code>
60+
@using BlazorExpress.Bulma
61+
</code></pre>
62+
</li>
63+
<li>
64+
<b>Register services in <code>Program.cs</code> (if required):</b>
65+
<pre><code class="language-csharp">
66+
// Program.cs
67+
using BlazorExpress.Bulma;
68+
69+
var builder = WebApplication.CreateBuilder(args);
70+
// ... your existing setup
71+
72+
// Register BlazorExpress.Bulma services (if required)
73+
builder.Services.AddBlazorExpressBulma();
74+
75+
var app = builder.Build();
76+
// ... your existing setup
77+
app.Run();
78+
</code></pre>
79+
<p>
80+
<b>Note:</b> If <code>AddBlazorExpressBulma()</code> is not available, check the <a href="https://github.com/BlazorExpress/BlazorExpress.Bulma" target="_blank">official documentation</a> for the latest setup instructions.
81+
</p>
82+
</li>
83+
</ol>
84+
85+
<h2>3. Usage Example</h2>
86+
<p>
87+
Add a Bulma component to <code>Pages/Index.razor</code>:
88+
</p>
89+
<pre><code>
90+
&lt;BeButton Color="Color.Primary"&gt;Hello Bulma!&lt;/BeButton&gt;
91+
</code></pre>
92+
93+
<h2>4. Troubleshooting</h2>
94+
<ul>
95+
<li>Ensure all CSS and JS references are correct in <code>_Host.cshtml</code> or your layout file.</li>
96+
<li>Restart the development server after changes to static files.</li>
97+
<li>Check browser console for errors if components do not render as expected.</li>
98+
</ul>
99+
100+
<h2>References</h2>
101+
<ul>
102+
<li>
103+
<a href="https://github.com/BlazorExpress/BlazorExpress.Bulma" target="_blank">BlazorExpress.Bulma GitHub Repository</a>
104+
</li>
105+
<li>
106+
<a href="https://www.nuget.org/packages/BlazorExpress.Bulma/" target="_blank">NuGet Package</a>
107+
</li>
108+
</ul>
109+
</div>
110+
111+
@code {
112+
private const string pageUrl = RouteConstants.Demos_Getting_Started_WebApp_Server_NET_8;
113+
private const string pageTitle = "Getting started - Blazor WebApp (.NET 8) - Interactive render mode Server - Global location";
114+
private const string pageDescription = "Learn how to quickly set up <code>BlazorExpress.Bulma</code> in your Blazor WebApp (Server) project using dotnet templates or manual installation, and how to register required services.";
115+
private const string metaTitle = "Getting started - Blazor WebApp (.NET 8) - Interactive render mode Server - Global location";
116+
private const string metaDescription = "Step-by-step guide to using BlazorExpress.Bulma: dotnet templates, manual install, and service registration for Blazor WebApp (Server) apps.";
117+
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
118+
}

0 commit comments

Comments
 (0)