Skip to content

983689: Changes for the Getting started and deployment for the Blazor… #1446

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Sep 30, 2025
Merged

983689: Changes for the Getting started and deployment for the Blazor… #1446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6acbfdf
983689: Changes for the Getting started and deployment for the Blazor…
Tamilselvan-Durairaj Sep 23, 2025
29a07be
983689: Resolve the CI failures
Tamilselvan-Durairaj Sep 23, 2025
67b186a
983689: Changes for the CI failures
Tamilselvan-Durairaj Sep 23, 2025
7b4ffc0
983689: Update CI failure
Tamilselvan-Durairaj Sep 23, 2025
3a1c3c2
983689: Update the next version for the pdfviewer documentation
Tamilselvan-Durairaj Sep 25, 2025
83cded7
983689: Update the getting started for smart pdfviewer
Tamilselvan-Durairaj Sep 25, 2025
3281166
Merge branch 'development' into 983689-pv-deploy
Tamilselvan-Durairaj Sep 25, 2025
df1210c
983689: Changes for removing the server side application getting started
Tamilselvan-Durairaj Sep 25, 2025
9d0da12
983689: Revert the changes
Tamilselvan-Durairaj Sep 25, 2025
40d53ad
983689: Update the web app link in the pdfviewer md files
Tamilselvan-Durairaj Sep 25, 2025
2cc2ae1
983689: Reverted the changes
Tamilselvan-Durairaj Sep 25, 2025
dc56428
983689: updated the script and the image
sathiyaseelanksf3503 Sep 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion Document-Processing-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,6 @@
<li>Getting Started
<ul>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app">Blazor Web App</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/getting-started/server-side-application">Blazor Server App</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application">Blazor WASM App</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows">Blazor MAUI App</a></li>
</ul>
Expand Down
67 changes: 34 additions & 33 deletions Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-beanstalk-deployment.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Blazor SfPdfViewer deployment in AWS BeanStalk | Syncfusion
description: AWS Elastic Beanstalk simplifies the deployment and management of scalable web applications and services on Linux-based infrastructure
title: Deploy Blazor SfPdfViewer to AWS Elastic Beanstalk | Syncfusion
description: Add the Syncfusion Blazor PDF Viewer to a Blazor Server app and deploy it to AWS Elastic Beanstalk on Linux.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# Deploy Blazor Server App on AWS Elastic Beanstalk Linux
# Deploy a Blazor Server app to AWS Elastic Beanstalk (Linux)

In this section, we'll guide you through the process of adding Syncfusion&reg; Blazor PDF Viewer component to your Blazor Server app and deploy it on AWS Elastic Beanstalk. We'll break it down into simple steps to make it easy to follow. Additionally, you can find a fully functional example project on our [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/AWS/AWS_Elastic_Beanstalk/SfPdfViewerApp).
This article describes how to add the Syncfusion&reg; Blazor PDF Viewer component to a Blazor Server app and deploy the app to AWS Elastic Beanstalk (Linux). A fully functional sample is available in the [GitHub repository](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/AWS/AWS_Elastic_Beanstalk/SfPdfViewerApp).

## Prerequisites

Expand All @@ -19,11 +19,11 @@ In this section, we'll guide you through the process of adding Syncfusion&reg; B

Create a new Blazor Server app and name it **PDFViewerGettingStarted**.

N> The PDF Viewer component is supported from .NET 6.0 onwards.
N> The PDF Viewer component is supported on .NET 8.0 and later.

## Install Blazor PDF Viewer NuGet package in Blazor Server App

Add the following NuGet packages into the Blazor Server app.
Add the following NuGet packages to the Blazor Server app.

* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
Expand Down Expand Up @@ -74,16 +74,17 @@ Add the following stylesheet and script to the head section of the **~/Pages/_Ho
<head>
<!-- Syncfusion Blazor PDF Viewer control's theme style sheet -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
<!-- Syncfusion Blazor PDF Viewer control's scripts -->
<script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</head>

</body>
{% endhighlight %}
{% endtabs %}

## Adding Blazor PDF Viewer Component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file.

{% tabs %}
{% highlight razor %}
Expand All @@ -98,42 +99,42 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next Gen) c
{% endhighlight %}
{% endtabs %}

N> If you don't provide the `DocumentPath` property value, the PDF Viewer component will be rendered without loading the PDF document. Users can then use the **open** option from the toolbar to browse and open the PDF as required.
N> If the `DocumentPath` property is not set, the PDF Viewer renders without loading a PDF document. Users can use the **Open** option in the toolbar to browse and open a PDF as needed.

## Run the application

Run the application, and the PDF file will be displayed using Syncfusion&reg; Blazor PDF Viewer component in your browser.
Run the application to display the PDF file in the Syncfusion&reg; Blazor PDF Viewer component in the browser.

{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor SfPdfViewer Component](aws-benstalk-deployment-images/blazor-pdfviewer.png)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVzNWqXLSZpnuzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Server SfPdfViewer rendering in browser](aws-benstalk-deployment-images/blazor-pdfviewer.png)" %}


## Steps to publish as AWS Elastic Beanstalk

1. Right-click the project and select Publish to AWS Elastic Beanstalk (Legacy) option.
![beanstalk-publish](aws-benstalk-deployment-images/beanstalk-publish.png)
2. Select the Deployment Target as Create a new application environment and click Next button.
![deployment-target](aws-benstalk-deployment-images/beanstalk-instance.png)
3. Choose the Environment Name in the dropdown list and the URL will be automatically assign and check the URL is available, if available click next otherwise change the URL
![beanstalk-environment-name](aws-benstalk-deployment-images/beanstalk-environment.png)
4. Select the instance type in t3a.micro from the dropdown list and click next.
![beanstalk-instance-type](aws-benstalk-deployment-images/beanstalk-aws-options.png)
5. Click the Next button to proceed further.
![beanstalk-roles](aws-benstalk-deployment-images/beanstalk-permissions.png)
6. Click the Next button
![beanstalk-review](aws-benstalk-deployment-images/beanstalk-review.png)
7. Click the Deploy button to deploy the sample on AWS Elastic Beanstalk.
![beanstalk-deploy](aws-benstalk-deployment-images/beanstalk-deploy.png)
8. After changing the status from Updating to Environment is healthy, click the URL.
![beanstalk-success-message](aws-benstalk-deployment-images/beanstalk-success.png)
9. After opening the provided URL the provided PDF document will be displayed in PDF Viewer.
![beanstalk-output](aws-benstalk-deployment-images/beanstalk-output.png)
1. Right-click the project and select Publish to AWS Elastic Beanstalk (Legacy).
![Publish to AWS Elastic Beanstalk in Visual Studio](aws-benstalk-deployment-images/beanstalk-publish.png)
2. Select the deployment target Create a new application environment, and then click Next.
![Create a new application environment selection](aws-benstalk-deployment-images/beanstalk-instance.png)
3. Choose an environment name. The URL is assigned automatically—verify availability. If the URL is available, click Next; otherwise, change the URL and retry.
![Configure Elastic Beanstalk environment name and URL](aws-benstalk-deployment-images/beanstalk-environment.png)
4. Select the instance type t3a.micro from the drop-down list, and then click Next.
![Select t3a.micro instance type](aws-benstalk-deployment-images/beanstalk-aws-options.png)
5. Click Next to proceed.
![Review required roles and permissions](aws-benstalk-deployment-images/beanstalk-permissions.png)
6. Click Next.
![Review configuration summary](aws-benstalk-deployment-images/beanstalk-review.png)
7. Click Deploy to publish the application to AWS Elastic Beanstalk.
![Deploy the application to Elastic Beanstalk](aws-benstalk-deployment-images/beanstalk-deploy.png)
8. When the environment status changes from Updating to Environment is healthy, click the provided URL.
![Elastic Beanstalk environment health and application URL](aws-benstalk-deployment-images/beanstalk-success.png)
9. Open the URL to view the application. The specified PDF document is displayed in the PDF Viewer.
![Application running with PDF rendered in the viewer](aws-benstalk-deployment-images/beanstalk-output.png)

## See also

* [Getting Started with Blazor PDF Viewer Component in Blazor WASM App](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application)
* [Getting started with the Blazor PDF Viewer in a Blazor WebAssembly app](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application)

* [Getting Started with Blazor PDF Viewer Component in WSL mode](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/wsl-application)
* [Getting started with the Blazor PDF Viewer in WSL mode](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/blazor/getting-started/wsl-application)

* [Learn different ways to add script reference in Blazor Application](https://blazor.syncfusion.com/documentation/common/adding-script-references)
* [Ways to add script references in a Blazor application](https://blazor.syncfusion.com/documentation/common/adding-script-references)


Binary file modified ...F-Viewer/blazor/deployment/aws-benstalk-deployment-images/beanstalk-publish.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 29 additions & 27 deletions Document-Processing/PDF/PDF-Viewer/blazor/getting-started/deploy-maui-windows.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
---
layout: post
title: Deploy SfPdfViewer in Blazor MAUI in windows | Syncfusion
description: Learn how to deploy SfPdfViewer in Blazor MAUI Application on Windows in Syncfusion Blazor SfPdfViewer component and much more details.
title: Deploy SfPdfViewer in Blazor .NET MAUI on Windows | Syncfusion
description: Learn how to deploy the Syncfusion Blazor SfPdfViewer component in a Blazor .NET MAUI application on Windows.
platform: document-processing
control: SfPdfViewer
documentation: ug
---

# View PDF files using PDF Viewer Component in the Blazor MAUI app
# View PDF files using the PDF Viewer in a Blazor .NET MAUI app

In this section, we'll guide you through the process of adding Syncfusion&reg; Blazor PDF Viewer component to your Blazor Maui app. We'll break it down into simple steps to make it easy to follow.
This article describes how to add the Syncfusion&reg; Blazor PDF Viewer component to a Blazor .NET MAUI app and deploy it on Windows.

## Prerequisites

To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin).
To use the .NET MAUI project templates, install the Mobile development with .NET workload for Visual Studio. For installation details, see the Microsoft documentation: [Install .NET MAUI](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin).

## Create a new Blazor MAUI App in Visual Studio
## Create a new Blazor .NET MAUI app in Visual Studio

Create a new Blazor MAUI app and name it **PDFViewerGettingStarted**.
Create a new Blazor .NET MAUI app and name it **PDFViewerGettingStarted**.

N> The PDF Viewer component is supported from .NET 6.0 onwards.
N> The PDF Viewer component is supported on .NET 8.0 and later.

## Install PDF Viewer NuGet package in Blazor Maui App
## Install PDF Viewer NuGet packages in the Blazor .NET MAUI app

Add the following NuGet packages into the Blazor Maui app.
Add the following NuGet packages to the Blazor .NET MAUI app.

* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
Expand All @@ -35,7 +35,7 @@ Add the following NuGet packages into the Blazor Maui app.
{% tabs %}
{% highlight razor tabtitle="~/_Imports.razor" %}

@using Syncfusion.Blazor
@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

{% endhighlight %}
Expand Down Expand Up @@ -91,16 +91,18 @@ Add the following stylesheet and script to the head section of the **~/wwwroot/i
<head>
<!-- Syncfusion Blazor PDF Viewer control's theme style sheet -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
<body>
<!-- Syncfusion Blazor PDF Viewer control's scripts -->
<script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</head>
</body>

{% endhighlight %}
{% endtabs %}

## Add PDF Viewer component
## Add the PDF Viewer component

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file.
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next-Gen) component in the **~/Pages/Index.razor** file.

{% tabs %}
{% highlight razor %}
Expand All @@ -121,34 +123,34 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer (Next Gen) c
{% endhighlight %}
{% endtabs %}

N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property value is not provided, the PDF Viewer component will be rendered without loading a PDF document. Users can then use the open option from the toolbar to browse and open a PDF as required.
N> If the [DocumentPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfPdfViewer.PdfViewerBase.html#Syncfusion_Blazor_SfPdfViewer_PdfViewerBase_DocumentPath) property is not set, the PDF Viewer renders without loading a PDF document. Users can use the Open option in the toolbar to browse and open a PDF as needed.

## Run on Windows

Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
Run the sample on a Windows machine to execute the Blazor .NET MAUI app.

![Run Windows machine](gettingstarted-images/Windows-machine.png)
![Running the app on a Windows machine](gettingstarted-images/Windows-machine.png)

Upon successfully launching the application, the PDF Viewer component will seamlessly render the specified PDF document within its interface.
After the application launches, the PDF Viewer renders the specified PDF document.

![Blazor SfPdfViewer Component](gettingstarted-images/Windows-maui-output.png)
![Blazor SfPdfViewer rendering the PDF document](gettingstarted-images/Windows-maui-output.png)

## Run on Android

To run the PDF Viewer in a Blazor Android MAUI application using the Android emulator, follow these steps:
To run the PDF Viewer in a Blazor .NET MAUI Android application using the Android emulator, follow these steps:

![Run Windows machine](gettingstarted-images/android-maui.png)
![Android emulator configuration for .NET MAUI](gettingstarted-images/android-maui.png)

Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator.
For setup and usage, see [Android Emulator setup for .NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows).

N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).
N> If any errors occur while using the Android Emulator, see [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting).

![Blazor SfPdfViewer Component](gettingstarted-images/android-emulator.png)
![Blazor SfPdfViewer running in the Android emulator](gettingstarted-images/android-emulator.png)

>[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorWindow).
>[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorWindow).

## See also

* [Supported Features: Desktop vs Mobile](./features#supported-features-desktop-vs-mobile).
* [Supported features: desktop vs. mobile](./features#supported-features-desktop-vs-mobile)

* [Render PDF Document from embedded source in the MAUI Android app](../how-to/deploy-maui-using-android-emulator).
* [Render a PDF document from an embedded source in the .NET MAUI Android app](../how-to/deploy-maui-using-android-emulator)
Loading