diff --git a/blazor-toc.html b/blazor-toc.html index 74192f418f..81a8300cec 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -365,8 +365,18 @@
  • HTML Attributes
    • -
  • - Deployment +
  • Deployment +
  • CDN Fallback diff --git a/blazor/common/deployment/deployment-azure.md b/blazor/common/deployment/deployment-azure.md new file mode 100644 index 0000000000..d8171ded28 --- /dev/null +++ b/blazor/common/deployment/deployment-azure.md @@ -0,0 +1,82 @@ +--- +layout: post +title: Deploy a Blazor Web App to Azure App Service | Syncfusion +description: Learn here all about deploying the Blazor application with Syncfusion Blazor Components to Azure App Service. +platform: Blazor +component: Common +documentation: ug +--- + +# Deploy Blazor Web App to Azure App Service + +This section provides information about deploying a Blazor Web applications with the Syncfusion Blazor components to Azure App Service. + +Refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio) topic for more information. + +## Deployment procedure + +If you don’t have a login for Azure, [sign up](https://azure.microsoft.com/en-in/free/) to access the Azure Portal. + +### Create a resource in Azure + +* Click **Create a resource** in Azure Portal to create a resource group. + +![Create new resource](./images/create-new-resource.png) + +* Select **Web App** Azure application service. + +![Select web app](./images/web-app.png) + +* After selecting Web App option, choose an appropriate resource group name and instance details. + +* Once this is done, click **Review + create**. + +![Create resource](./images/create-resource.png) + +* After configuring the Web App service. Select the created web app service (blazor-web-publish). + +![Created resource](./images/created-resource.png) + +* Now, select the **overview** section, click on **Download publish profile**, and save the profile locally. + +![Download publish profile](./images/download-publish-profile.png) + +### Publish the Application in Azure + +#### Using Azure account login + +* To publish the project, right-click on it and choose **Publish** from the context menu. + +![Publish menu](./images/publish-menu.png) + +* Select **Azure** as the target and **Azure App Service (Windows)** as the specific target. + +![Publish target](./images/publish-target.png) + +![Publish specific target](./images/publish-specific-target.png) + +* You need to log into your Azure account and choose the web app service (blazor-web-publish) that you have created. Then, click **Publish**. + +![Created azure app service](./images/created-azure-resource.png) + +![Publish App](./images/publish-azure.png) + +#### Using Import Profile option + +* To publish the project, right-click on it and choose **Publish** from the context menu. + +![Publish menu](./images/publish-menu.png) + +* Select **Import Profile** as the target and browse the downloaded publish folder. Then, click **Publish** + +![Publish target](./images/target-import-profile.png) + +![Publish App](./images/publish-azure.png) + +* Now, the application will be deployed and will be available in the specified URL: https://blazor-web-publish.azurewebsites.net/. + +![Output-Azure](./images/output-azure.png) + +## See also + +Refer [here](https://learn.microsoft.com/en-us/azure/app-service/quickstart-dotnetcore?tabs=net70&pivots=development-environment-vs#publish-your-web-app) for publishing the application to Azure App Service using Visual Studio. \ No newline at end of file diff --git a/blazor/common/deployment/deployment-iis.md b/blazor/common/deployment/deployment-iis.md new file mode 100644 index 0000000000..45227b0760 --- /dev/null +++ b/blazor/common/deployment/deployment-iis.md @@ -0,0 +1,46 @@ +--- +layout: post +title: Deploy a Blazor Web App to IIS | Syncfusion +description: Learn here all about deploying the Blazor application with Syncfusion Blazor Components to IIS server. +platform: Blazor +component: Common +documentation: ug +--- + +# Deploy Blazor Web App to IIS server + +This section provides information about deploying a Blazor Web applications with the Syncfusion Blazor components to IIS server. + +Refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio) topic for more information. + +## Create an IIS Site + +* [Enable IIS](https://learn.microsoft.com/en-us/previous-versions/dynamicsnav-2018-developer/How-to--Install-and-Configure-Internet-Information-Services-for-Microsoft-Dynamics-NAV-Web-Client)in Windows Features. + +* [Enable WebSockets](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/websockets?view=aspnetcore-7.0#enabling-websockets-on-iis) in IIS. + +* Now, publish the application for deployment in Release configuration by referring to [this](https://blazor.syncfusion.com/documentation/common/deployment). + +* Open Internet Information Services (IIS) Manager and then right-click on "Sites," followed by selecting "Add Website." + +![Add site in IIS](./images/add-site.png) + +* In the Add Website dialog, fill in the required field values such as site name, physical path and customized port value and then click OK. + +Set the physical path to the location where your sample application is developed. + +![Add Website in IIS](./images/add-website.png) + +## Run the Published Application + +* Open Internet Information Services (IIS) Manager. Expand the `Sites` node to verify that the published application is running. Click `Browse` to open the application in your browser. + +![Browse application](./images/browser-website.png) + +* Now, application runs in the specified browser port(8080). + +![Output-IIS](./images/iis-output.png) + +## See also + +Refer [here](https://learn.microsoft.com/en-us/aspnet/core/tutorials/publish-to-iis?view=aspnetcore-7.0&tabs=visual-studio) for publishing the application to IIS Service using Visual Studio. \ No newline at end of file diff --git a/blazor/common/deployment.md b/blazor/common/deployment/publish.md similarity index 57% rename from blazor/common/deployment.md rename to blazor/common/deployment/publish.md index a75d422848..8c5121efec 100644 --- a/blazor/common/deployment.md +++ b/blazor/common/deployment/publish.md @@ -1,17 +1,17 @@ --- layout: post -title: Deployment in Blazor | AOT | Syncfusion -description: Learn how to publish and deploy Blazor Web App, Blazor WASM, Blazor Server Apps with Syncfusion Blazor components, including self-contained deployment and AOT. +title: Publish and Deploy in Blazor | AOT | Syncfusion +description: Learn here all about publish the Blazor application with Syncfusion Blazor Components and much more. platform: Blazor -control: Common +component: Common documentation: ug --- -# Deployment in Blazor +# Publish and Deploy in Blazor -This section provides information about deploying Blazor applications with Syncfusion® Blazor components. +This section provides information about publishing and deploying Blazor applications with the Syncfusion Blazor components. -For more information, see [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy). +Refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio) topic for more information. ## Publish Blazor Application with Visual Studio @@ -27,7 +27,7 @@ For more information, see [Host and deploy ASP.NET Core Blazor](https://learn.mi ![Release Configuration in Blazor](./images/config.png) -* For Blazor Server App, consider setting Deployment mode to `Self-Contained` when the hosting environment doesn't have the required .NET runtime installed. +* For `Blazor Server side application`, set Deployment Mode as `Self-Contained`. Because some dependencies are not loaded properly when the published folder is hosted. ![Deploy Mode in Blazor](./images/deploy.png) @@ -37,9 +37,9 @@ For more information, see [Host and deploy ASP.NET Core Blazor](https://learn.mi ## Publish Blazor Application with CLI -Package the application and its dependencies into a folder for deployment by using the `dotnet publish` command. +Packing the application and its dependencies into a folder for deployment to a hosting system by using the `dotnet publish` command. -Run the following command from the project directory. +For CLI deployment, run the following command from your root directory. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -49,7 +49,7 @@ dotnet publish -c Release {% endhighlight %} {% endtabs %} -For Blazor Server CLI deployment: +For Blazor Server CLI deployment. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -59,7 +59,7 @@ dotnet publish -c Release --self-contained true -r win-x86 {% endhighlight %} {% endtabs %} -Refer to [dotnet publish arguments](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-publish#arguments) to learn about optional arguments. Use the following command to specify the output directory path. +Refer to the [dotnet publish - arguments](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-publish?tabs=netcore21#arguments) to learn about various optional arguments. Use the following command to specify the path for the output directory. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -75,7 +75,7 @@ If the path is relative, the output directory generated is relative to the proje ## Ahead-of-time (AOT) compilation in Blazor WebAssembly -Blazor WebAssembly supports ahead-of-time (AOT) compilation, which improves runtime performance at the expense of a larger app size. For details and enable steps, see [Ahead-of-time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly/?view=aspnetcore-8.0&tabs=windows#ahead-of-time-aot-compilation). +Blazor WebAssembly supports ahead-of-time (AOT) compilation which provides improved runtime performance at the expense of a larger app size. Refer to [Ahead-of-time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#ahead-of-time-aot-compilation) topic to learn more about how it works and how to enable. ### Enable AOT in the application @@ -93,10 +93,10 @@ To enable AOT compilation in the application, add `RunAOTCompilation` options wi ## See also -* [Host and deploy Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy) -* [Host and deploy Blazor Server](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/server/) -* [Host and deploy ASP.NET Core Blazor WebAssembly](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly) -* [Publish a web app to Azure App Service using Visual Studio](https://learn.microsoft.com/en-us/visualstudio/deployment/quickstart-deploy-aspnet-web-app?view=vs-2022&tabs=azure) -* [Deploy ASP.NET Core apps to Azure App Service](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/azure-apps) -* [Deploy Blazor WASM App to Cloudflare](https://www.syncfusion.com/blogs/post/easily-deploy-a-blazor-webassembly-app-to-cloudflare) -* [Publish a Blazor WebAssembly App and .NET API with Azure Static Web Apps](https://learn.microsoft.com/en-us/training/modules/publish-app-service-static-web-app-api-dotnet/) +* [Host and Deploy Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio) +* [Host and deploy Blazor Server](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/server?view=aspnetcore-7.0) +* [Host and deploy ASP.NET Core Blazor WebAssembly](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-7.0) +* [Publish a Web app to Azure App Service using Visual Studio](https://learn.microsoft.com/en-us/visualstudio/deployment/quickstart-deploy-aspnet-web-app?view=vs-2022&tabs=azure) +* [Deploy ASP.NET Core apps to Azure App Service](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/azure-apps/?view=aspnetcore-7.0&tabs=visual-studio) +* [Deploy Blazor WASM App to Cloudflare](https://www.syncfusion.com/blogs/post/easily-deploy-a-blazor-webassembly-app-to-cloudflare.aspx) +* [Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps](https://learn.microsoft.com/en-us/training/modules/publish-app-service-static-web-app-api-dotnet/) diff --git a/blazor/common/images/add-site.png b/blazor/common/images/add-site.png new file mode 100644 index 0000000000..9ab0fab5f9 Binary files /dev/null and b/blazor/common/images/add-site.png differ diff --git a/blazor/common/images/add-website.png b/blazor/common/images/add-website.png new file mode 100644 index 0000000000..a819b5ce26 Binary files /dev/null and b/blazor/common/images/add-website.png differ diff --git a/blazor/common/images/browse-publish-folder.png b/blazor/common/images/browse-publish-folder.png new file mode 100644 index 0000000000..5aa1546a1b Binary files /dev/null and b/blazor/common/images/browse-publish-folder.png differ diff --git a/blazor/common/images/browser-website.png b/blazor/common/images/browser-website.png new file mode 100644 index 0000000000..292f44ad61 Binary files /dev/null and b/blazor/common/images/browser-website.png differ diff --git a/blazor/common/images/create-new-resource.png b/blazor/common/images/create-new-resource.png new file mode 100644 index 0000000000..cddad65653 Binary files /dev/null and b/blazor/common/images/create-new-resource.png differ diff --git a/blazor/common/images/create-resource.png b/blazor/common/images/create-resource.png new file mode 100644 index 0000000000..0648410955 Binary files /dev/null and b/blazor/common/images/create-resource.png differ diff --git a/blazor/common/images/created-azure-resource.png b/blazor/common/images/created-azure-resource.png new file mode 100644 index 0000000000..2790bbf7f8 Binary files /dev/null and b/blazor/common/images/created-azure-resource.png differ diff --git a/blazor/common/images/created-resource.png b/blazor/common/images/created-resource.png new file mode 100644 index 0000000000..89b7d382b3 Binary files /dev/null and b/blazor/common/images/created-resource.png differ diff --git a/blazor/common/images/download-publish-profile.png b/blazor/common/images/download-publish-profile.png new file mode 100644 index 0000000000..02f4ca3ea7 Binary files /dev/null and b/blazor/common/images/download-publish-profile.png differ diff --git a/blazor/common/images/iis-output.png b/blazor/common/images/iis-output.png new file mode 100644 index 0000000000..692f19cfe1 Binary files /dev/null and b/blazor/common/images/iis-output.png differ diff --git a/blazor/common/images/output-azure.png b/blazor/common/images/output-azure.png new file mode 100644 index 0000000000..2576d83def Binary files /dev/null and b/blazor/common/images/output-azure.png differ diff --git a/blazor/common/images/publish-azure.png b/blazor/common/images/publish-azure.png new file mode 100644 index 0000000000..6eff2effdb Binary files /dev/null and b/blazor/common/images/publish-azure.png differ diff --git a/blazor/common/images/publish-menu.png b/blazor/common/images/publish-menu.png new file mode 100644 index 0000000000..3f363230ec Binary files /dev/null and b/blazor/common/images/publish-menu.png differ diff --git a/blazor/common/images/publish-specific-target.png b/blazor/common/images/publish-specific-target.png new file mode 100644 index 0000000000..c33ec49154 Binary files /dev/null and b/blazor/common/images/publish-specific-target.png differ diff --git a/blazor/common/images/publish-target.png b/blazor/common/images/publish-target.png new file mode 100644 index 0000000000..424a3f12dc Binary files /dev/null and b/blazor/common/images/publish-target.png differ diff --git a/blazor/common/images/target-import-profile.png b/blazor/common/images/target-import-profile.png new file mode 100644 index 0000000000..240083146c Binary files /dev/null and b/blazor/common/images/target-import-profile.png differ diff --git a/blazor/common/images/web-app.png b/blazor/common/images/web-app.png new file mode 100644 index 0000000000..50e9c32e06 Binary files /dev/null and b/blazor/common/images/web-app.png differ