Merge pull request #29 from fortedigital/feature/examples

Added examples with readmes for .NET Core and .NET Framework
fortedigital · Nov 15, 2023 · 752771c · 752771c
2 parents 443388f + 51c1298
commit 752771c
Show file tree

Hide file tree

Showing 68 changed files with 5,104 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,20 @@
+![ForteDigital](https://avatars.githubusercontent.com/u/31007705?s=200&v=4)
 # Forte.Web.React
+![Nuget](https://img.shields.io/nuget/dt/Forte.Web.React?label=nuget&link=https%3A%2F%2Fwww.nuget.org%2Fpackages%2FForte.Web.React)
+![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/fortedigital/Forte.Web.React/build.yml)
 
-Library to render React library components on the server-side with C# as well as on the client.
-Library is a wrapper for [Javascript.NodeJS](https://github.com/JeringTech/Javascript.NodeJS)
 
-## Usage
+Unlock the power of Server Side rendered React components within your ASP.NET Core MVC or ASP.NET MVC applicaiton.
+**Forte.Web.React** can render components on server only, client only, on both - using hydration.
+This library uses an out-of-process Node Service using [Javascript.NodeJS](https://github.com/JeringTech/Javascript.NodeJS) as a C# proxy.
 
-### 1. Add WebpackOptions to `appsettings`
+## Examples
 
-#### For Development 
-```
-  "Webpack": {
-    "OutputPath": "http://localhost:8080"
-  }
-```
-
-#### For Production
-```
-  "Webpack": {
-    "OutputPath": "./path/to/output"
-  }
-```
+- [ASP.NET Core Example](examples/Forte.Web.React.Examples.Core)
+- [ASP.NET (Framework) Example](examples/Forte.Web.React.Examples.Framework)
 
-### 2. Modify Startup.cs
+## Usage (.Net Core)
+For .Net Framework usage, check the example mentioned above.
 
 ```
   services.AddReact(nodeJsProcessOptions => {...}, configureOutOfProcessNodeJS => {...})
@@ -71,4 +64,4 @@ To give client code possibility to decorate with custom behavior rendering to st
       return _reactService.GetInitJavascript();
     }
   }
-```
+```
diff --git a/examples/Forte.Web.React.Examples.Core/Forte.Web.React.Examples.Core.csproj b/examples/Forte.Web.React.Examples.Core/Forte.Web.React.Examples.Core.csproj
@@ -0,0 +1,93 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+    </PropertyGroup>
+
+    <ItemGroup>
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-grid.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-grid.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-grid.min.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-grid.min.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-grid.rtl.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-grid.rtl.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-grid.rtl.min.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-grid.rtl.min.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-reboot.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-reboot.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-reboot.min.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-reboot.min.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-reboot.rtl.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-reboot.rtl.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-reboot.rtl.min.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-reboot.rtl.min.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-utilities.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-utilities.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-utilities.min.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-utilities.min.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-utilities.rtl.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-utilities.rtl.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-utilities.rtl.min.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap-utilities.rtl.min.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap.min.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap.min.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap.rtl.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap.rtl.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap.rtl.min.css" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\css\bootstrap.rtl.min.css.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.bundle.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.bundle.js.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.bundle.min.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.bundle.min.js.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.esm.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.esm.js.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.esm.min.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.esm.min.js.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.js.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.min.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\dist\js\bootstrap.min.js.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\bootstrap\LICENSE" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery-validation-unobtrusive\jquery.validate.unobtrusive.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery-validation-unobtrusive\jquery.validate.unobtrusive.min.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery-validation-unobtrusive\LICENSE.txt" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery-validation\dist\additional-methods.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery-validation\dist\additional-methods.min.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery-validation\dist\jquery.validate.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery-validation\dist\jquery.validate.min.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery-validation\LICENSE.md" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery\dist\jquery.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery\dist\jquery.min.js" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery\dist\jquery.min.map" />
+      <_ContentIncludedByDefault Remove="wwwroot\lib\jquery\LICENSE.txt" />
+      <_ContentIncludedByDefault Remove="wwwroot\css\site.css" />
+      <_ContentIncludedByDefault Remove="Client\package.json" />
+      <_ContentIncludedByDefault Remove="Client\tsconfig.json" />
+      <_ContentIncludedByDefault Remove="Client\tsconfig.node.json" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <PackageReference Include="Forte.Web.React" Version="1.0.0" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <None Include="wwwroot\Client\.eslintrc.cjs" />
+      <None Include="wwwroot\Client\.gitignore" />
+      <None Include="wwwroot\Client\dist\assets\index-0e0581f2.css" />
+      <None Include="wwwroot\Client\dist\assets\index-200fde89.js" />
+      <None Include="wwwroot\Client\dist\index.html" />
+      <None Include="wwwroot\Client\index.html" />
+      <None Include="wwwroot\Client\src\Example.css" />
+      <None Include="wwwroot\Client\src\Example.tsx" />
+      <None Include="wwwroot\Client\src\index.css" />
+      <None Include="wwwroot\Client\src\main.tsx" />
+      <None Include="wwwroot\Client\src\vite-env.d.ts" />
+      <None Include="wwwroot\Client\vite.config.ts" />
+      <None Include="wwwroot\Client\yarn.lock" />
+    </ItemGroup>
+
+</Project>
diff --git a/examples/Forte.Web.React.Examples.Core/Forte.Web.React.Examples.Core.sln b/examples/Forte.Web.React.Examples.Core/Forte.Web.React.Examples.Core.sln
@@ -0,0 +1,16 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Forte.Web.React.Examples.Core", "Forte.Web.React.Examples.Core.csproj", "{DA2CAA13-5D10-4ABB-A417-B5A9A78B5DE3}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{DA2CAA13-5D10-4ABB-A417-B5A9A78B5DE3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{DA2CAA13-5D10-4ABB-A417-B5A9A78B5DE3}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{DA2CAA13-5D10-4ABB-A417-B5A9A78B5DE3}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{DA2CAA13-5D10-4ABB-A417-B5A9A78B5DE3}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+EndGlobal
diff --git a/examples/Forte.Web.React.Examples.Core/Pages/Error.cshtml b/examples/Forte.Web.React.Examples.Core/Pages/Error.cshtml
@@ -0,0 +1,26 @@
+@page
+@model ErrorModel
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (Model.ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@Model.RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>
diff --git a/examples/Forte.Web.React.Examples.Core/Pages/Error.cshtml.cs b/examples/Forte.Web.React.Examples.Core/Pages/Error.cshtml.cs
@@ -0,0 +1,26 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Forte.Web.React.Examples.Core.Pages;
+
+[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+[IgnoreAntiforgeryToken]
+public class ErrorModel : PageModel
+{
+    public string? RequestId { get; set; }
+
+    public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    private readonly ILogger<ErrorModel> _logger;
+
+    public ErrorModel(ILogger<ErrorModel> logger)
+    {
+        _logger = logger;
+    }
+
+    public void OnGet()
+    {
+        RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
+    }
+}
diff --git a/examples/Forte.Web.React.Examples.Core/Pages/Example.cshtml b/examples/Forte.Web.React.Examples.Core/Pages/Example.cshtml
@@ -0,0 +1,50 @@
+@page "/"
+@using Forte.Web.React.Examples.Core.React
+@using Forte.Web.React.React
+@model ExampleModel
+@{
+    ViewData["Title"] = "Home page";
+}
+
+<h1>Forte.Web.React - ASP.NET Core Example</h1>
+
+<hr/>
+
+<div class="flex">
+    <div>
+        <h2>Client Side Rendering (CSR)</h2>
+        <p>In Client Side Rendering, the rendering process is deferred until the page is loaded in the browser. This means that the initial HTML page is lightweight and doesn't contain the component's content. Instead, the component is initialized and rendered using JavaScript on the client side. This allows for dynamic updates and interactions.</p>
+    </div>
+    <div class="example--container">
+        @await Html.ReactAsync(new ExampleComponent { Props = Model.Props, RenderingMode = RenderingMode.Client })
+    </div>
+</div>
+
+<hr/>
+
+<div class="flex">
+    <div>
+        <h2>Server Side Rendering (SSR)</h2>
+        <p>In Server Side Rendering, the component is initially rendered on the server as static markup. This pre-rendered content is sent to the browser, providing faster initial page loads and improved SEO. However, there is no client-side hydration, meaning the component remains static without interactive features.</p>
+    </div>
+    <div class="example--container">
+        @await Html.ReactAsync(new ExampleComponent { Props = Model.Props, RenderingMode = RenderingMode.Server })
+    </div>
+</div>
+
+<hr/>
+
+<div class="flex">
+    <div>
+        <h2>Server Side Rendering with Client Hydration</h2>
+        <p>In this approach, the component is first rendered as static markup on the server, similar to SSR. However, additional client-side JavaScript is used to "hydrate" the static markup, enabling interactivity and dynamic behavior. This combines the benefits of both SSR and CSR.</p>
+    </div>
+    <div class="example--container">
+        @await Html.ReactAsync(new ExampleComponent { Props = Model.Props, RenderingMode = RenderingMode.ClientAndServer })
+    </div>
+</div>
+
+@section scripts
+{
+    @Html.InitJavascript()
+}
diff --git a/examples/Forte.Web.React.Examples.Core/Pages/Example.cshtml.cs b/examples/Forte.Web.React.Examples.Core/Pages/Example.cshtml.cs
@@ -0,0 +1,18 @@
+using Forte.Web.React.Examples.Core.React;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace Forte.Web.React.Examples.Core.Pages;
+
+public class ExampleModel : PageModel
+{
+    public ExampleComponentProps Props = new();
+
+    public void OnGet(int initCount = 0, string? text = null)
+    {
+        Props = new ExampleComponentProps
+        {
+            InitCount = initCount,
+            Text = text ?? "Use query parameters 'initCount' and 'text' to change values in the React component",
+        };
+    }
+}
diff --git a/examples/Forte.Web.React.Examples.Core/Pages/Example.cshtml.css b/examples/Forte.Web.React.Examples.Core/Pages/Example.cshtml.css
@@ -0,0 +1,33 @@
+.flex {
+    display: flex;
+    flex-direction: row;
+    gap: 64px;
+}
+
+@media (max-width: 800px) {
+    .flex {
+        flex-direction: column;
+    }
+}
+
+.flex > * {
+    flex: 1;
+}
+
+h2 {
+    margin-top: 30px;
+}
+
+p {
+    margin-bottom: 20px;
+}
+
+hr {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+}
+
+.example--container {
+    border-radius: 4px;
+    overflow: hidden;
+}
diff --git a/examples/Forte.Web.React.Examples.Core/Pages/Shared/_Layout.cshtml b/examples/Forte.Web.React.Examples.Core/Pages/Shared/_Layout.cshtml
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>@ViewBag.Title - Forte Examples</title>
+
+    @* Include bundle with React component styles *@
+    <link rel="stylesheet" asp-href-include="/Client/dist/assets/index-*.css"/>
+    <link rel="stylesheet" href="~/Forte.Web.React.Examples.Core.styles.css" asp-append-version="true"/>
+    <link rel="stylesheet" href="~/main.css" asp-append-version="true"/>
+
+    @await RenderSectionAsync("styles", required: false)
+</head>
+<body>
+<div>
+    @RenderBody()
+</div>
+
+@* Include bundle with React component scripts *@
+<script type="text/javascript" asp-src-include="/Client/dist/assets/index-*.js"></script>
+
+@await RenderSectionAsync("scripts", required: false)
+</body>
+</html>
diff --git a/examples/Forte.Web.React.Examples.Core/Pages/_ViewImports.cshtml b/examples/Forte.Web.React.Examples.Core/Pages/_ViewImports.cshtml
@@ -0,0 +1,3 @@
+@using Forte.Web.React.Examples.Core
+@namespace Forte.Web.React.Examples.Core.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
diff --git a/examples/Forte.Web.React.Examples.Core/Pages/_ViewStart.cshtml b/examples/Forte.Web.React.Examples.Core/Pages/_ViewStart.cshtml
@@ -0,0 +1,3 @@
+@{
+    Layout = "_Layout";
+}
diff --git a/examples/Forte.Web.React.Examples.Core/Program.cs b/examples/Forte.Web.React.Examples.Core/Program.cs
@@ -0,0 +1,37 @@
+using Forte.Web.React;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorPages();
+builder.Services.AddReact(nodeOptions =>
+{
+    // optional transformations
+}, nodeServiceOptions =>
+{
+    // optional transformations
+});
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error");
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+app.UseStaticFiles();
+app.UseRouting();
+
+app.UseAuthorization();
+
+app.MapRazorPages();
+
+var dir = app.Environment.WebRootPath;
+var js = Directory.GetFiles(Path.Combine(dir, "Client/dist/assets")).First(f => f.EndsWith(".js"));
+app.UseReact(new[] { js }, new Version(18, 2, 0), strictMode: true);
+
+app.Run();