@@ -162,9 +160,7 @@ dotnet new bit-bp –-name MyFirstProject
We recommend keeping BlazorWebAssemblyStandalone set to false during development and only enabling it during the publishing process.
To do this, use the following command:
-
-dotnet publish MyFirstProject.Client.Web -c Release -p:BlazorWebAssemblyStandalone=true
-
+ dotnet publish MyFirstProject.Client.Web -c Release -p:BlazorWebAssemblyStandalone=true
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor
index b713e6b476..1d1143dc2a 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor
@@ -8,58 +8,312 @@
Description="create project of the project templates of the bit platform" />
-
+
Create Project
- Let's make our next web project a success with Bit.Boilerplate.
+ Let's make our next cross platform project a success with Bit.Boilerplate.
+
+ @GetFinalCommand()
+
+
-
- CLI
-
-
- 1- Create a cross-platform AdminPanel app for mobile, desktop and web with Azure DevOps pipelines and a SqlServer database: -dotnet new bit-bp --name MyAdminPanel --database SqlServer --pipeline Azure --sample Admin
+
+
+
+
+ @GetNameCommand()
+
+
+ It is required to specify a name for your project. +
- 2- Create a cross-platform Todo app for mobile, desktop and web with GitHub Actions and a SQLite database:
- dotnet new bit-bp --name MyTodoApp --database Sqlite --pipeline GitHub --sample Todo --serverUrl todo.bitplatform.dev
+
+
+
+ @GetCaptchaCommand()
+
+
+ +
- 3- Create a mobile, desktop and web app without sample pages, integrating GitHub Actions and a SQL Server database:
- dotnet new bit-bp --name MyCompany.MyApp --database SqlServer --pipeline GitHub --sample None --serverUrl app.mycompany.com
+
+
+
+ @GetPipelineCommand()
+
+
+ @switch (pipeline.Value) + { + case "None": +
- 4- Create an offline capable mobile, desktop and web app:
- dotnet new bit-bp --name MyCompany.MyApp --database SqlServer --pipeline GitHub --sample None --offlineDb
+
+
+
+ @GetSampleCommand()
+
+ Use this parameter to initialize the project with a sample pages.
+ The two available options are Admin Panel and Todo."
+
-
+
+
+
+ @GetWindowsCommand()
+
+ If you set the windows parameter to false, the Maui project will still be created,
+ but no separate Windows application will be included.
+
+
+
+
+
+ @GetAppCenterCommand()
+
+ By adding the --appCenter true parameter to the dotnet new command, App Center will be integrated for macOS,
+ Windows, iOS, and Android platforms.
+
+
+
+
+
+ @GetAppInsightsCommand()
+
+ To enable Azure Application Insights for both server and client-side applications (including web),
+ set the appinsights parameter to true. This option will configure the application to store logs such as
+ errors and informational messages.
+
+
+
+
+
+ @GetSignalRCommand()
+
+ Enabling this parameter will provide you with sample code for SignalR.
+
+
+
+
+ @GetFileStorageCommand()
+
+
+ @if (fileStorage.Value == "Local")
+ {
+
+
+
+
+
+ @GetOfflineDbCommand()
+
+ Setting this parameter to True enables SQLite and Entity Framework Core,
+ allowing for the development of an offline-capable cross platform application.
+
+
+ Warning: It is advisable to use this option only when necessary, as integrating Entity Framework Core can increase application size and potentially reduce startup performance. +
+
+
+
+
+ @GetDatabaseCommand()
+
+ @switch (database.Value)
+ {
+ case "Sqlite":
+
+
+
+
+
+ @GetApiCommand()
+
+ Select the API mode that best aligns with your specific requirements.
+
+
+ @if (api.Value == "Integrated") + { +
+
+
+
+
+
Visual Studio
-
+
@@ -70,11 +324,6 @@
-
-
+
-
- Create a new project using dotnet new command:
- dotnet new bit-bp
-
-
- Note: bit project templates accept the following parameters:
-
- Examples:
- -
-
- --name (default is current folder name) -
- --api defaults to true: '--api true' adds support for aspnetcore identity, webapi, odata, ef core and fluent email. -
- --database default to SqlServer among following options: SqlServer Sqlite, Other -
- --captcha default to reCaptcha among following options: reCaptcha None -
- --serverUrl The backend server url. You can change its value later if needed. -
- --pipeline default to GitHub among the following options: GitHub, Azure (AzureDevOps pipelines), None -
- --sample default to None among the following options: Admin, Todo, None -
- --offlineDb defaults to false: '--offlineDb true' adds sqlite database support to the client mobile, web and desktop apps -
- --windows default to false: '--windows true' adds support for exe output for windows 7+ -
- --appInsights defaults to false: '--appInsights true' adds support for Azure application insights in all clients (Android, iOS, Windows, macOS, Web) -
- --appCenter defaults to false: '--appCenter true' adds support for Visual Studio AppCenter in hybrid clients (Android, iOS, Windows, macOS) -
-
- 1- Create a cross-platform AdminPanel app for mobile, desktop and web with Azure DevOps pipelines and a SqlServer database: -
+ Name
+
+ +
+ It is required to specify a name for your project. +
+ Captcha
+
+ +
+ +
+ Pipeline
+
+ +
+ @switch (pipeline.Value) + { + case "None": +
+ By selecting None, no CI/CD pipeline will be added.
+
+ break;
+ case "GitHub":
+
+ Ensure a rapid and reliable deployment by utilizing a pipeline.
+ By selecting GitHub, CI/ CD pipelines will be set up using Github Actions.
+
+ break;
+ case "Azure":
+
+ By selecting Azure, CI/ CD pipelines will be set up using Azure Devops.
+
+ break;
+ }
+
+ Sample
+
+ +
- Note: We recommend to create the project in a path that is not too long without space character in the folder names.
-
-
+ Windows
+
+ +
+ App Center
+
+ +
+ AppInsights
+
+ +
+ SignalR
+
+ +
+ File Storage
+
+
+ The API project includes an Attachment Controller responsible for handling user images,
+ including resizing and saving them in the WebP format using FluentStorage
+
+
+ Local option stores files on local hard drive. +
+ }
+ @if (fileStorage.Value == "AzureBlobStorage")
+ {
+ +
+ Local option stores files on local hard drive. +
+ Download and install Azure blob storage emulator here.
+
+ }
+ @if (fileStorage.Value == "Other")
+ {
+
+ Install and configure any of the FluentStorage packages.
+
+
+ One noteable implementation is FluentStorage.AWS, which supports Amazon S3. + This allows you to use any file storage solution compatible with S3, such as DigitalOcean Spaces or MinIO. +
+ }
+ +
+ One noteable implementation is FluentStorage.AWS, which supports Amazon S3. + This allows you to use any file storage solution compatible with S3, such as DigitalOcean Spaces or MinIO. +
+ Offline Database
+
+ +
+
+ Warning: It is advisable to use this option only when necessary, as integrating Entity Framework Core can increase application size and potentially reduce startup performance. +
+ Database
+
+ +
+ The API project requires an Entity Framework Core DbContext for tables such as ASP.NET Core Identity.
+
+
+ Supported options include SqlServer, PostgreSQL, MySQL, Cosmos, and Other. + If you require a database not listed among the options, select Other. After project initialization, you can add the desired database + package and configure it in the AddDbContextPool method which is located in the Program.Services.cs file within the Server.Api project. +
+
+ For the default Sqlite option, we'd recommend installing sqlite package for Visual Studio and Visual Studio Code. +
+ break;
+ case "SqlServer":
+ +
+ Supported options include SqlServer, PostgreSQL, MySQL, Cosmos, and Other. + If you require a database not listed among the options, select Other. After project initialization, you can add the desired database + package and configure it in the AddDbContextPool method which is located in the Program.Services.cs file within the Server.Api project. +
+
+ For the default Sqlite option, we'd recommend installing sqlite package for Visual Studio and Visual Studio Code. +
+ You can use Sql Server LocalDb 2022 for development purposes.
+
+ It gets installed within Visual Studio by default, but you can either download it from here or install it using PowerShell: +$ProgressPreference = 'SilentlyContinue'; Invoke-WebRequest -Uri https://download.microsoft.com/download/3/8/d/38de7036-2433-4207-8eae-06e247e17b25/SqlLocalDB.msi -OutFile SqlLocalDB.msi; msiexec /i SqlLocalDB.msi /quiet
+
+ break;
+ case "PostgreSQL":
+ + It gets installed within Visual Studio by default, but you can either download it from here or install it using PowerShell: +
+ Download and install @database.Value here.
+ Alternatively, use the following command:
+
+winget install --id=PostgreSQL.PostgreSQL.14
+
+ break;
+ case "MySQL":
+ +
+ Both MariaDB and MySql are supported.
+
+ break;
+ case "Cosmos":
+
+ Download and install Cosmos Storage emulator here.
+ Alternatively, use the following command:
+
+winget install -e --id Microsoft.Azure.CosmosEmulator
+
+ break;
+ case "Other":
+ +
+ Add the desired database package and configure it in the AddDbContextPool method which is located in the Program.Services.cs file within the Server.Api project.
+
+ break;
+ }
+
+ API
+
+ +
+
+ @if (api.Value == "Integrated") + { +
+ Easily debug and deploy Server.Web projects that serves restful API services, SSR, Blazor Server, Blazor Auto and pre-rendering.
+
+ +
+ 
+
+ }
+ else
+ {
+
+
+ Conversely, if the parameter is set to Standalone, you will need to separately run and publish both the Server.Api and Server.Web projects.
+
+ +
+ 
+
+ }
+
+
+ +
-
@@ -70,11 +324,6 @@
- 
-
-
-
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor.cs b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor.cs
new file mode 100644
index 0000000000..c1192e4f9f
--- /dev/null
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor.cs
@@ -0,0 +1,235 @@
+using System.Text;
+
+namespace Bit.Websites.Platform.Client.Pages.Templates;
+
+public partial class Templates05CreateProjectPage
+{
+ private string name = "MyFirstProject";
+
+ private Parameter windows = new()
+ {
+ Value = true,
+ Default = true,
+ };
+
+ private Parameter appCenter = new()
+ {
+ Value = false,
+ Default = false,
+ };
+
+ private Parameter offlineDb = new()
+ {
+ Value = false,
+ Default = false,
+ };
+
+ private Parameter appInsight = new()
+ {
+ Value = false,
+ Default = false,
+ };
+
+ private Parameter signalr = new()
+ {
+ Value = false,
+ Default = false,
+ };
+
+ private Parameter captcha = new()
+ {
+ Value = "reCaptcha",
+ Default = "reCaptcha",
+ Items = [
+ new() { Text = "None", Value = "None" },
+ new() { Text = "reCaptcha", Value = "reCaptcha" },
+ ]
+ };
+
+ private Parameter pipeline = new()
+ {
+ Value = "GitHub",
+ Default = "GitHub",
+ Items = [
+ new() { Text = "None", Value = "None" },
+ new() { Text = "GitHub", Value = "GitHub" },
+ new() { Text = "Azure", Value = "Azure" },
+ ]
+ };
+
+ private Parameter sample = new()
+ {
+ Value = "None",
+ Default = "None",
+ Items = [
+ new() { Text = "None", Value = "None" },
+ new() { Text = "Admin", Value = "Admin" },
+ new() { Text = "Todo", Value = "Todo" },
+ ]
+ };
+
+ private Parameter database = new()
+ {
+ Value = "Sqlite",
+ Default = "Sqlite",
+ Items = [
+ new() { Text = "Sqlite", Value = "Sqlite" },
+ new() { Text = "SqlServer", Value = "SqlServer" },
+ new() { Text = "PostgreSQL", Value = "PostgreSQL" },
+ new() { Text = "MySQL", Value = "MySQL" },
+ new() { Text = "Cosmos", Value = "Cosmos" },
+ new() { Text = "Other", Value = "Other" },
+ ]
+ };
+
+ private Parameter fileStorage = new()
+ {
+ Value = "Local",
+ Default = "Local",
+ Items = [
+ new() { Text = "Local", Value = "Local" },
+ new() { Text = "AzureBlobStorage", Value = "AzureBlobStorage" },
+ new() { Text = "Other", Value = "Other" },
+ ]
+ };
+
+ private Parameter api = new()
+ {
+ Value = "Integrated",
+ Default = "Integrated",
+ Items = [
+ new() { Text = "Integrated", Value = "Integrated" },
+ new() { Text = "Standalone", Value = "Standalone" },
+ ]
+ };
+
+ private string GetFinalCommand()
+ {
+ StringBuilder finalCommand = new($"dotnet new bit-bp {GetNameCommand()}");
+
+ if (captcha.IsModified)
+ {
+ finalCommand.Append(GetCaptchaCommand());
+ }
+
+ if (pipeline.IsModified)
+ {
+ finalCommand.Append(GetPipelineCommand());
+ }
+
+ if (sample.IsModified)
+ {
+ finalCommand.Append(GetSampleCommand());
+ }
+
+ if (windows.IsModified)
+ {
+ finalCommand.Append(GetWindowsCommand());
+ }
+
+ if (appCenter.IsModified)
+ {
+ finalCommand.Append(GetAppCenterCommand());
+ }
+
+ if (database.IsModified)
+ {
+ finalCommand.Append(GetDatabaseCommand());
+ }
+
+ if (fileStorage.IsModified)
+ {
+ finalCommand.Append(GetFileStorageCommand());
+ }
+
+ if (api.IsModified)
+ {
+ finalCommand.Append(GetApiCommand());
+ }
+
+ if (offlineDb.IsModified)
+ {
+ finalCommand.Append(GetOfflineDbCommand());
+ }
+
+ if (appInsight.IsModified)
+ {
+ finalCommand.Append(GetAppInsightsCommand());
+ }
+
+ if (signalr.IsModified)
+ {
+ finalCommand.Append(GetSignalRCommand());
+ }
+
+ return finalCommand.ToString();
+ }
+
+ private string GetNameCommand()
+ {
+ return $"--name {name} ";
+ }
+
+ private string GetCaptchaCommand()
+ {
+ return $"--captcha {captcha.Value} ";
+ }
+
+ private string GetPipelineCommand()
+ {
+ return $"--pipeline {pipeline.Value} ";
+ }
+
+ private string GetSampleCommand()
+ {
+ return $"--sample {sample.Value} ";
+ }
+
+ private string GetWindowsCommand()
+ {
+ return $"--windows {windows.Value.ToString().ToLowerInvariant()} ";
+ }
+
+ private string GetAppCenterCommand()
+ {
+ return $"--appCenter {appCenter.Value.ToString().ToLowerInvariant()} ";
+ }
+
+ private string GetDatabaseCommand()
+ {
+ return $"--database {database.Value} ";
+ }
+
+ private string GetFileStorageCommand()
+ {
+ return $"--filesStorage {fileStorage.Value} ";
+ }
+
+ private string GetApiCommand()
+ {
+ return $"--api {api.Value} ";
+ }
+
+ private string GetOfflineDbCommand()
+ {
+ return $"--offlineDb {offlineDb.Value.ToString().ToLowerInvariant()} ";
+ }
+
+ private string GetAppInsightsCommand()
+ {
+ return $"--appinsights {appInsight.Value.ToString().ToLowerInvariant()} ";
+ }
+
+ private string GetSignalRCommand()
+ {
+ return $"--signalr {signalr.Value.ToString().ToLowerInvariant()} ";
+ }
+
+ private class Parameter
+ {
+ public T? Value { get; set; }
+ public T? Default { get; set; }
+ public BitDropdownItem[]? Items { get; set; }
+ public bool IsModified => EqualityComparer.Default.Equals(Default, Value) is false;
+ }
+}
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor.scss b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor.scss
index b8e83d9149..efc3843eff 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor.scss
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor.scss
@@ -29,6 +29,7 @@
.image {
@include Image;
+ width: rem2(600px);
}
::deep a {
@@ -40,3 +41,36 @@
width: 80%;
}
}
+
+.row {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid $White;
+ padding-bottom: rem2(10px);
+ margin-bottom: rem2(10px);
+}
+
+.api-image-container {
+ display: flex;
+ justify-content: center;
+ height: 350px;
+}
+
+::deep {
+ .bit-drp {
+ width: rem2(150px);
+ }
+
+ .grid-item {
+ width: rem2(550px);
+ min-height: rem2(400px);
+ overflow: auto;
+ position: relative;
+ padding: rem2(28px);
+ word-wrap: break-word;
+ border-radius: rem2(4px);
+ background-clip: padding-box;
+ box-shadow: $bit-box-shadow-callout;
+ background-color: $bit-color-background-primary;
+ }
+}
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/api-integrated.webp b/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/api-integrated.webp
new file mode 100644
index 0000000000..1161d5ada6
Binary files /dev/null and b/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/api-integrated.webp differ
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/api-standalone.webp b/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/api-standalone.webp
new file mode 100644
index 0000000000..f12b92e702
Binary files /dev/null and b/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/api-standalone.webp differ
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/create-new-project-vs-3.webp b/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/create-new-project-vs-3.webp
deleted file mode 100644
index 9581e72cfd..0000000000
Binary files a/src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/templates/create-new-project-vs-3.webp and /dev/null differ