Skip to content

Commit 2c60786

Browse files
Merge pull request #1446 from syncfusion-content/983689-pv-deploy
983689: Changes for the Getting started and deployment for the Blazor…
2 parents d851039 + dc56428 commit 2c60786

File tree

11 files changed

+161
-335
lines changed

11 files changed

+161
-335
lines changed

Document-Processing-toc.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -478,7 +478,6 @@
478478
<li>Getting Started
479479
<ul>
480480
<li><a href="/document-processing/pdf/pdf-viewer/blazor/getting-started/web-app">Blazor Web App</a></li>
481-
<li><a href="/document-processing/pdf/pdf-viewer/blazor/getting-started/server-side-application">Blazor Server App</a></li>
482481
<li><a href="/document-processing/pdf/pdf-viewer/blazor/getting-started/web-assembly-application">Blazor WASM App</a></li>
483482
<li><a href="/document-processing/pdf/pdf-viewer/blazor/getting-started/deploy-maui-windows">Blazor MAUI App</a></li>
484483
</ul>

Document-Processing/PDF/PDF-Viewer/blazor/deployment/aws-beanstalk-deployment.md

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Blazor SfPdfViewer deployment in AWS BeanStalk | Syncfusion
4-
description: AWS Elastic Beanstalk simplifies the deployment and management of scalable web applications and services on Linux-based infrastructure
3+
title: Deploy Blazor SfPdfViewer to AWS Elastic Beanstalk | Syncfusion
4+
description: Add the Syncfusion Blazor PDF Viewer to a Blazor Server app and deploy it to AWS Elastic Beanstalk on Linux.
55
platform: document-processing
66
control: SfPdfViewer
77
documentation: ug
88
---
99

10-
# Deploy Blazor Server App on AWS Elastic Beanstalk Linux
10+
# Deploy a Blazor Server app to AWS Elastic Beanstalk (Linux)
1111

12-
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).
12+
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).
1313

1414
## Prerequisites
1515

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

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

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

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

26-
Add the following NuGet packages into the Blazor Server app.
26+
Add the following NuGet packages to the Blazor Server app.
2727

2828
* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
2929
* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
@@ -74,16 +74,17 @@ Add the following stylesheet and script to the head section of the **~/Pages/_Ho
7474
<head>
7575
<!-- Syncfusion Blazor PDF Viewer control's theme style sheet -->
7676
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
77+
</head>
78+
<body>
7779
<!-- Syncfusion Blazor PDF Viewer control's scripts -->
7880
<script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
79-
</head>
80-
81+
</body>
8182
{% endhighlight %}
8283
{% endtabs %}
8384

8485
## Adding Blazor PDF Viewer Component
8586

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

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

101-
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.
102+
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.
102103

103104
## Run the application
104105

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

107-
{% 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)" %}
108+
{% 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)" %}
108109

109110

110111
## Steps to publish as AWS Elastic Beanstalk
111112

112-
1. Right-click the project and select Publish to AWS Elastic Beanstalk (Legacy) option.
113-
![beanstalk-publish](aws-benstalk-deployment-images/beanstalk-publish.png)
114-
2. Select the Deployment Target as Create a new application environment and click Next button.
115-
![deployment-target](aws-benstalk-deployment-images/beanstalk-instance.png)
116-
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
117-
![beanstalk-environment-name](aws-benstalk-deployment-images/beanstalk-environment.png)
118-
4. Select the instance type in t3a.micro from the dropdown list and click next.
119-
![beanstalk-instance-type](aws-benstalk-deployment-images/beanstalk-aws-options.png)
120-
5. Click the Next button to proceed further.
121-
![beanstalk-roles](aws-benstalk-deployment-images/beanstalk-permissions.png)
122-
6. Click the Next button
123-
![beanstalk-review](aws-benstalk-deployment-images/beanstalk-review.png)
124-
7. Click the Deploy button to deploy the sample on AWS Elastic Beanstalk.
125-
![beanstalk-deploy](aws-benstalk-deployment-images/beanstalk-deploy.png)
126-
8. After changing the status from Updating to Environment is healthy, click the URL.
127-
![beanstalk-success-message](aws-benstalk-deployment-images/beanstalk-success.png)
128-
9. After opening the provided URL the provided PDF document will be displayed in PDF Viewer.
129-
![beanstalk-output](aws-benstalk-deployment-images/beanstalk-output.png)
113+
1. Right-click the project and select Publish to AWS Elastic Beanstalk (Legacy).
114+
![Publish to AWS Elastic Beanstalk in Visual Studio](aws-benstalk-deployment-images/beanstalk-publish.png)
115+
2. Select the deployment target Create a new application environment, and then click Next.
116+
![Create a new application environment selection](aws-benstalk-deployment-images/beanstalk-instance.png)
117+
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.
118+
![Configure Elastic Beanstalk environment name and URL](aws-benstalk-deployment-images/beanstalk-environment.png)
119+
4. Select the instance type t3a.micro from the drop-down list, and then click Next.
120+
![Select t3a.micro instance type](aws-benstalk-deployment-images/beanstalk-aws-options.png)
121+
5. Click Next to proceed.
122+
![Review required roles and permissions](aws-benstalk-deployment-images/beanstalk-permissions.png)
123+
6. Click Next.
124+
![Review configuration summary](aws-benstalk-deployment-images/beanstalk-review.png)
125+
7. Click Deploy to publish the application to AWS Elastic Beanstalk.
126+
![Deploy the application to Elastic Beanstalk](aws-benstalk-deployment-images/beanstalk-deploy.png)
127+
8. When the environment status changes from Updating to Environment is healthy, click the provided URL.
128+
![Elastic Beanstalk environment health and application URL](aws-benstalk-deployment-images/beanstalk-success.png)
129+
9. Open the URL to view the application. The specified PDF document is displayed in the PDF Viewer.
130+
![Application running with PDF rendered in the viewer](aws-benstalk-deployment-images/beanstalk-output.png)
130131

131132
## See also
132133

133-
* [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)
134+
* [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)
134135

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

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

139140

21.7 KB
Loading

Document-Processing/PDF/PDF-Viewer/blazor/getting-started/deploy-maui-windows.md

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
---
22
layout: post
3-
title: Deploy SfPdfViewer in Blazor MAUI in windows | Syncfusion
4-
description: Learn how to deploy SfPdfViewer in Blazor MAUI Application on Windows in Syncfusion Blazor SfPdfViewer component and much more details.
3+
title: Deploy SfPdfViewer in Blazor .NET MAUI on Windows | Syncfusion
4+
description: Learn how to deploy the Syncfusion Blazor SfPdfViewer component in a Blazor .NET MAUI application on Windows.
55
platform: document-processing
66
control: SfPdfViewer
77
documentation: ug
88
---
99

10-
# View PDF files using PDF Viewer Component in the Blazor MAUI app
10+
# View PDF files using the PDF Viewer in a Blazor .NET MAUI app
1111

12-
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.
12+
This article describes how to add the Syncfusion&reg; Blazor PDF Viewer component to a Blazor .NET MAUI app and deploy it on Windows.
1313

1414
## Prerequisites
1515

16-
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).
16+
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).
1717

18-
## Create a new Blazor MAUI App in Visual Studio
18+
## Create a new Blazor .NET MAUI app in Visual Studio
1919

20-
Create a new Blazor MAUI app and name it **PDFViewerGettingStarted**.
20+
Create a new Blazor .NET MAUI app and name it **PDFViewerGettingStarted**.
2121

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

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

26-
Add the following NuGet packages into the Blazor Maui app.
26+
Add the following NuGet packages to the Blazor .NET MAUI app.
2727

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

38-
@using Syncfusion.Blazor
38+
@using Syncfusion.Blazor
3939
@using Syncfusion.Blazor.SfPdfViewer
4040

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

98100
{% endhighlight %}
99101
{% endtabs %}
100102

101-
## Add PDF Viewer component
103+
## Add the PDF Viewer component
102104

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

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

124-
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.
126+
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.
125127

126128
## Run on Windows
127129

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

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

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

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

136138
## Run on Android
137139

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

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

142-
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.
144+
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).
143145

144-
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).
146+
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).
145147

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

148-
>[View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorWindow).
150+
>[View the sample on GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Server%20Deployment/Maui/MauiBlazorWindow).
149151
150152
## See also
151153

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

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

0 commit comments

Comments
 (0)