feat(templates): add Blazor WebAssembly Standalone deployment #6591 (#…

…6592)
bitfoundation · Jan 17, 2024 · 5a4c6f5 · 5a4c6f5
1 parent 17bcfd6
commit 5a4c6f5
Show file tree

Hide file tree

Showing 24 changed files with 450 additions and 141 deletions.
diff --git a/.github/workflows/admin-sample.cd.yml b/.github/workflows/admin-sample.cd.yml
@@ -50,6 +50,15 @@ jobs:
 
     - name: Install wasm
       run:  cd src && dotnet workload install wasm-tools wasm-experimental
+
+    - name: Configure app render mode
+      run: |
+          sed -i 's/Auto;/BlazorWebAssembly;/g' AdminPanel/src/Client/AdminPanel.Client.Core/Services/AppRenderMode.cs
+
+    - name: Configure bswup
+      run: |
+          sed -i 's/self.noPrerenderQuery/\/\/ self.noPrerenderQuery/g' AdminPanel/src/Client/AdminPanel.Client.Web/wwwroot/service-worker.js
+          sed -i 's/self.isPassive = self.disablePassiveFirstBoot = true;/self.isPassive = self.disablePassiveFirstBoot = false;/g' AdminPanel/src/Client/AdminPanel.Client.Web/wwwroot/service-worker.js
       
     - name: Generate CSS/JS files
       run: dotnet build AdminPanel/src/Client/AdminPanel.Client.Core/AdminPanel.Client.Core.csproj -t:BeforeBuildTasks --no-restore

diff --git a/.github/workflows/bit.full.ci.yml b/.github/workflows/bit.full.ci.yml
@@ -40,6 +40,7 @@ jobs:
         dotnet ef database update
         cd ../../../
         dotnet build TodoBPSqlite/TodoBPSqlite.sln -c Release -p:RunAOTCompilation=false
+        dotnet build TodoBPSqlite/src/Client/TodoBPSqlite.Client.Web/TodoBPSqlite.Client.Web.csproj -c Release -p:BlazorWebAssemblyStandalone=true
 
     - name: Release build empty sample + offline db + Win exe
       run: |

diff --git a/.github/workflows/todo-sample.cd.yml b/.github/workflows/todo-sample.cd.yml
@@ -50,8 +50,13 @@ jobs:
     - name: Install wasm
       run:  cd src && dotnet workload install wasm-tools wasm-experimental
 
-    - name: Enable pre rendering
-      run:  sed -i 's/public static readonly bool PrerenderEnabled = false;/public static readonly bool PrerenderEnabled = true;/g' TodoSample/src/Client/TodoSample.Client.Core/Services/AppRenderMode.cs
+    - name: Configure app render mode
+      run: |
+          sed -i 's/public static readonly bool PrerenderEnabled = false;/public static readonly bool PrerenderEnabled = true;/g' TodoSample/src/Client/TodoSample.Client.Core/Services/AppRenderMode.cs
+          sed -i 's/Auto;/BlazorWebAssembly;/g' TodoSample/src/Client/TodoSample.Client.Core/Services/AppRenderMode.cs
+
+    - name: Changes for static-todo.bitplatform.dev - Part 1
+      run:  sed -i 's/http:\/\/localhost:4030/https:\/\/static-todo.bitplatform.dev/g' TodoSample/src/TodoSample.Server/Startup/Middlewares.cs
 
     - name: Generate CSS/JS files
       run: dotnet build TodoSample/src/Client/TodoSample.Client.Core/TodoSample.Client.Core.csproj -t:BeforeBuildTasks --no-restore
@@ -65,6 +70,23 @@ jobs:
         name: server-bundle
         path: ${{env.DOTNET_ROOT}}/server
 
+    - name: Changes for static-todo.bitplatform.dev - Part 2
+      run:  sed -i 's/public static readonly bool PrerenderEnabled = true;/public static readonly bool PrerenderEnabled = false;/g' TodoSample/src/Client/TodoSample.Client.Core/Services/AppRenderMode.cs
+
+    - name: Configure bswup
+      run: |
+          sed -i 's/self.noPrerenderQuery/\/\/ self.noPrerenderQuery/g' TodoSample/src/Client/TodoSample.Client.Web/wwwroot/service-worker.js
+          sed -i 's/self.isPassive = self.disablePassiveFirstBoot = true;/self.isPassive = self.disablePassiveFirstBoot = false;/g' TodoSample/src/Client/TodoSample.Client.Web/wwwroot/service-worker.js
+
+    - name: Publish static todo
+      run: dotnet publish TodoSample/src/Client/TodoSample.Client.Web/TodoSample.Client.Web.csproj -c Release -p:BlazorWebAssemblyStandalone=true -o ${{env.DOTNET_ROOT}}/static
+
+    - name: Upload static artifact
+      uses: actions/upload-artifact@v3
+      with:
+        name: static-bundle
+        path: ${{env.DOTNET_ROOT}}/static
+
   deploy_api_blazor:
     name: deploy api + blazor
     needs: build_api_blazor
@@ -323,6 +345,26 @@ jobs:
         api-key-id: ${{ secrets.APPSTORE_API_KEY_ID }}
         api-private-key: ${{ secrets.APPSTORE_API_KEY_PRIVATE_KEY }}
 
+    - name: Delete App Icon
+      run: rm TodoSample/src/Client/TodoSample.Client.Maui/Resources/AppIcon/appicon.svg
+
+    - name: Extract App Icon from env
+      uses: timheuer/base64-to-file@v1
+      with:
+          fileDir: './TodoSample/src/Client/TodoSample.Client.Maui/Resources/AppIcon/'
+          fileName: 'appicon.svg'
+          encodedString: ${{ vars.TODO_ICON }}
+
+    - name: Delete App Splash Screen
+      run: rm TodoSample/src/Client/TodoSample.Client.Maui/Resources/Splash/splash.svg
+
+    - name: Extract App Splash Screen from env
+      uses: timheuer/base64-to-file@v1
+      with:
+          fileDir: './TodoSample/src/Client/TodoSample.Client.Maui/Resources/Splash/'
+          fileName: 'splash.svg'
+          encodedString: ${{ vars.TODO_SPLASH_SCREEN }}
+
     - name: Generate CSS/JS files
       run: dotnet build TodoSample/src/Client/TodoSample.Client.Core/TodoSample.Client.Core.csproj -t:BeforeBuildTasks --no-restore
 

diff --git a/README.md b/README.md
@@ -39,7 +39,15 @@ The following apps are our open-source projects powered by the bit platform show
 | AdminPanel | [![Prerendered PWA](https://github-production-user-asset-6210df.s3.amazonaws.com/6169846/251381583-8b8eb895-80c9-4811-9641-57a5a08db163.png)](https://adminpanel.bitplatform.dev) | [![iOS app](https://github-production-user-asset-6210df.s3.amazonaws.com/6169846/251381842-e72976ce-fd20-431d-a677-ca1ed625b83b.png)](https://apps.apple.com/us/app/bit-adminpanel/id6450611349) | [![Android app](https://github-production-user-asset-6210df.s3.amazonaws.com/6169846/251381958-24931682-87f6-44fc-a1c7-eecf46387005.png)](https://play.google.com/store/apps/details?id=com.bitplatform.AdminPanel.Template) | [![Windows app](https://github-production-user-asset-6210df.s3.amazonaws.com/6169846/251382080-9ae97fea-934c-4097-aca4-124a2aed1595.png)](https://github.com/bitfoundation/bitplatform/releases/latest/download/AdminPanel-Windows.zip) | [![macOS app](https://github-production-user-asset-6210df.s3.amazonaws.com/6169846/251382211-0d58f9ba-1a1f-4481-a0ca-b23a393cca9f.png)](https://github.com/bitfoundation/bitplatform/releases/latest/download/AdminPanel-macOS.pkg) |
 | bitplatform | [![SPA](https://github-production-user-asset-6210df.s3.amazonaws.com/6169846/251395129-71a5a79c-af74-4d4e-a0f7-ed9a15cf2e46.png)](https://bitplatform.dev)|
 
-<br/>
+1. [bitplatform.dev](bitplatform.dev): Pre-rendered SPA with Blazor WebAssembly
+2. [components.bitplatform.dev](components.bitplatform.dev): Pre-rendered PWA with Blazor Auto
+3. [todo.bitplatform.dev](todo.bitplatform.dev): Pre-rendered PWA with Blazor WebAssembly
+4. [static-todo.bitplatform.dev](static-todo.bitplatform.dev): PWA with Blazor WebAssembly Standalone (Hosted on Cloudflare Pages)
+5. [adminpanel.bitplatform.dev](adminpanel.bitplatform.dev): PWA with Blazor WebAssembly
+
+[Todo](https://todo.bitplatform.dev) & [Adminpanel](https://adminpanel.bitplatform.dev) web apps will launch their respective Android and iOS applications if you have already installed them, mirroring the behavior of apps like YouTube and Instagram. 
+
+Prerendering combined with PWA functionality delivers an experience akin to that of GitHub and Reddit. The bitplatform solution, seamlessly integrated with the innovative new .NET 8 project structure, stands as the exclusive remedy for such a scenario within the realm of Blazor.
 
 # How to contribute?
 

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Components/AppBswupProgressBar.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Web/Components/AppBswupProgressBar.razor
@@ -46,7 +46,7 @@
                 content: var(--bit-bswup-percent-text, "");
             }
     /* If you want the update to be applied after the user approves the new Pwa version and not automatically,
-        set AutoReload parameter of BswupProgress to true and uncomment the commented codes in this file: */
+        set AutoReload parameter of BswupProgress to false and uncomment the commented codes in this file: */
     /*
         #bit-bswup-reload {
             top: 38px;

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/.gitignore b/src/Templates/Boilerplate/Bit.Boilerplate/.gitignore
@@ -231,4 +231,5 @@ custom.aprof
 
 /src/Client/Boilerplate.Client.Core/wwwroot/scripts/app*.js
 
-/src/Boilerplate.Server/*.db*
+/src/Boilerplate.Server/*.db*
+.env
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Boilerplate.Server/Components/App.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Boilerplate.Server/Components/App.razor
@@ -35,6 +35,10 @@
     <Link rel="stylesheet" href="_content/Boilerplate.Client.Core/styles/app.css" />
     <Link rel="stylesheet" href="_content/Boilerplate.Client.Core/Boilerplate.Client.Core.bundle.scp.css" />
 
+    @if (AppRenderMode.PrerenderEnabled is false || noPrerender)
+    {
+        <LoadingComponent />
+    }
     <Routes @rendermode=renderMode />
 
     @if (HttpContext.Request.IsCrawlerClient() is false)

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Boilerplate.Server/Program.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Boilerplate.Server/Program.cs
@@ -15,4 +15,4 @@
 
 Boilerplate.Server.Startup.Middlewares.Use(app, builder.Environment, builder.Configuration);
 
-app.Run();
+await app.RunAsync();
diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Boilerplate.Server/Startup/Middlewares.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Boilerplate.Server/Startup/Middlewares.cs
@@ -41,6 +41,8 @@ public static void Use(WebApplication app, IHostEnvironment env, IConfiguration
         else
         {
             app.UseHttpsRedirection();
+            app.UseResponseCaching();
+            app.UseResponseCompression();
         }
 
         Configure_401_403_404_Pages(app);
@@ -61,19 +63,13 @@ public static void Use(WebApplication app, IHostEnvironment env, IConfiguration
             }
         });
 
-        app.UseCors(options => options.WithOrigins("https://0.0.0.0" /*BlazorHybrid*/, "app://0.0.0.0" /*BlazorHybrid*/)
+        // 0.0.0.0 origins are essential for the proper functioning of BlazorHybrid's WebView, while localhost:4030 is a prerequisite for BlazorWebAssemblyStandalone testing.
+        app.UseCors(options => options.WithOrigins("https://0.0.0.0", "app://0.0.0.0", "http://localhost:4030")
             .AllowAnyHeader().AllowAnyMethod());
 
         app.UseAuthentication();
         app.UseAuthorization();
 
-        if (env.IsDevelopment() is false)
-        {
-            app.UseResponseCompression();
-        }
-
-        app.UseResponseCaching();
-
         app.UseAntiforgery();
 
         app.UseSwagger();

diff --git a/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.cs b/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavMenu.razor.cs
@@ -6,8 +6,6 @@ namespace Boilerplate.Client.Core.Components.Layout;
 
 public partial class NavMenu : IDisposable
 {
-    [AutoInject] IUserController userController = default!;
-
     private bool disposed;
     private bool isSignOutModalOpen;
     private string? profileImageUrl;
@@ -95,7 +93,7 @@ protected override async Task OnInitAsync()
             await InvokeAsync(StateHasChanged);
         });
 
-        user = await userController.GetCurrentUser(CurrentCancellationToken);
+        user = (await HttpClient.GetFromJsonAsync("api/User/GetCurrentUser", AppJsonContext.Default.UserDto, CurrentCancellationToken))!;
 
         var access_token = await PrerenderStateService.GetValue(AuthTokenProvider.GetAccessTokenAsync);
         profileImageUrlBase = $"{Configuration.GetApiServerAddress()}api/Attachment/GetProfileImage?access_token={access_token}&file=";

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Routes.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Routes.razor
@@ -5,7 +5,7 @@
             <Found Context="routeData">
                 <AuthorizeRouteView RouteData="@routeData">
                     <Authorizing>
-                        <LoadingComponent Color="#FFF" />
+                        <LoadingComponent />
                     </Authorizing>
                     <NotAuthorized>
                         <NotAuthorizedPage />
@@ -16,7 +16,7 @@
                 <NotFoundPage />
             </NotFound>
             <Navigating>
-                <LoadingComponent Color="#FFF" />
+                <LoadingComponent />
             </Navigating>
         </Router>
     </LayoutView>

diff --git a/.../Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/AppRenderMode.cs b/.../Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/AppRenderMode.cs
@@ -13,7 +13,9 @@ public static class AppRenderMode
     public static IComponentRenderMode NoPrerenderBlazorWebAssembly => new InteractiveWebAssemblyRenderMode(prerender: false);
 
     public static IComponentRenderMode Current =>
-        BuildConfiguration.IsDebug() ? BlazorServer /*For better development experience*/ : Auto;
+        BuildConfiguration.IsDebug() 
+        ? BlazorServer // For better development experience.
+        : Auto; // For better production experience.
 
     /// <summary>
     /// To enable/disable pwa support, navigate to Directory.Build.props and modify the PwaEnabled flag.

diff --git a/...mplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/wwwroot/index.html b/...mplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/wwwroot/index.html
@@ -27,85 +27,88 @@
             background-color: #0D2960;
         }
 
-        .lds-wrapper {
+        .bit-lds-grid div {
+            background-color: #123456;
+        }
+
+        .bit-lds-wrapper {
             top: 50%;
             left: 50%;
             position: absolute;
             transform: translate(-50%, -50%);
         }
 
-        .lds-grid {
-            display: inline-block;
-            position: relative;
+        .bit-lds-grid {
             width: 80px;
             height: 80px;
+            position: relative;
+            display: inline-block;
         }
 
-            .lds-grid div {
-                position: absolute;
+            .bit-lds-grid div {
                 width: 16px;
                 height: 16px;
+                position: absolute;
                 border-radius: 50%;
-                background: #fff;
-                animation: lds-grid 1.2s linear infinite;
+                animation: bit-lds-grid 1.2s linear infinite;
             }
 
-                .lds-grid div:nth-child(1) {
+                .bit-lds-grid div:nth-child(1) {
                     top: 8px;
                     left: 8px;
                     animation-delay: 0s;
                 }
 
-                .lds-grid div:nth-child(2) {
+                .bit-lds-grid div:nth-child(2) {
                     top: 8px;
                     left: 32px;
                     animation-delay: -0.4s;
                 }
 
-                .lds-grid div:nth-child(3) {
+                .bit-lds-grid div:nth-child(3) {
                     top: 8px;
                     left: 56px;
                     animation-delay: -0.8s;
                 }
 
-                .lds-grid div:nth-child(4) {
+                .bit-lds-grid div:nth-child(4) {
                     top: 32px;
                     left: 8px;
                     animation-delay: -0.4s;
                 }
 
-                .lds-grid div:nth-child(5) {
+                .bit-lds-grid div:nth-child(5) {
                     top: 32px;
                     left: 32px;
                     animation-delay: -0.8s;
                 }
 
-                .lds-grid div:nth-child(6) {
+                .bit-lds-grid div:nth-child(6) {
                     top: 32px;
                     left: 56px;
                     animation-delay: -1.2s;
                 }
 
-                .lds-grid div:nth-child(7) {
+                .bit-lds-grid div:nth-child(7) {
                     top: 56px;
                     left: 8px;
                     animation-delay: -0.8s;
                 }
 
-                .lds-grid div:nth-child(8) {
+                .bit-lds-grid div:nth-child(8) {
                     top: 56px;
                     left: 32px;
                     animation-delay: -1.2s;
                 }
 
-                .lds-grid div:nth-child(9) {
+                .bit-lds-grid div:nth-child(9) {
                     top: 56px;
                     left: 56px;
                     animation-delay: -1.6s;
                 }
 
 
-        @keyframes lds-grid {
+        @keyframes bit-lds-grid {
             0%, 100% {
                 opacity: 1;
             }
@@ -119,8 +122,10 @@
 
 <body class="bit-blazor-hybrid">
     <div id="app-container" class="bit-css-clr-bg-primary bit-css-clr-fg-primary">
-        <div class="lds-wrapper">
-            <div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+        <div class="bit-lds-wrapper">
+            <div class="bit-lds-grid">
+                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+            </div>
         </div>
     </div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,4 +15,4 @@

		Boilerplate.Server.Startup.Middlewares.Use(app, builder.Environment, builder.Configuration);

		app.Run();
		await app.RunAsync();