Skip to content

Commit 837c7fb

Browse files
Merge pull request #4104 from syncfusion-content/876446-aws-master
876446: Create Documentation for Deploying PDF Viewer(NextGen) in AWS Elastic Beanstalk Linux Environment
2 parents 5eb63f4 + 6dcbc08 commit 837c7fb

13 files changed

+140
-0
lines changed

blazor-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3294,6 +3294,7 @@
32943294
<li>Deployment
32953295
<ul>
32963296
<li><a href="/blazor/pdfviewer-2/getting-started/wsl-application">Windows Subsystem for Linux</a></li>
3297+
<li><a href="/blazor/pdfviewer-2/deployment/aws-beanstalk-deployment">AWS Elastic Beanstalk</a></li>
32973298
</ul>
32983299
</li>
32993300
<li> <a href="/blazor/pdfviewer-2/accessibility">Accessibility</a></li>
Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
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
5+
platform: Blazor
6+
control: SfPdfViewer
7+
documentation: ug
8+
---
9+
10+
# Deploy Blazor Server App on AWS Elastic Beanstalk Linux
11+
12+
In this section, we'll guide you through the process of adding Syncfusion's Blazor PDF Viewer (Next Gen) 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).
13+
14+
## Prerequisites
15+
16+
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
17+
18+
## Create a new Blazor App in Visual Studio
19+
20+
Create a new Blazor Server app and name it **PDFViewerGettingStarted**.
21+
22+
N> The PDF Viewer (Next Gen) component is supported from .NET 6.0 onwards.
23+
24+
## Install Blazor PDF Viewer NuGet package in Blazor Server App
25+
26+
Add the following NuGet packages into the Blazor Server app.
27+
28+
* [Syncfusion.Blazor.SfPdfViewer](https://www.nuget.org/packages/Syncfusion.Blazor.SfPdfViewer)
29+
* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
30+
31+
## Register Syncfusion Blazor Service
32+
33+
* In the **~/_Imports.razor** file, add the following namespaces:
34+
35+
{% tabs %}
36+
{% highlight razor tabtitle="~/_Imports.razor" %}
37+
38+
@using Syncfusion.Blazor;
39+
@using Syncfusion.Blazor.SfPdfViewer;
40+
41+
{% endhighlight %}
42+
{% endtabs %}
43+
44+
* Register the Syncfusion Blazor Service in the **~/Program.cs** file.
45+
46+
{% tabs %}
47+
{% highlight c# tabtitle="~/Program.cs" hl_lines="3 9 12" %}
48+
49+
using Microsoft.AspNetCore.Components;
50+
using Microsoft.AspNetCore.Components.Web;
51+
using Syncfusion.Blazor;
52+
53+
var builder = WebApplication.CreateBuilder(args);
54+
55+
// Add services to the container.
56+
builder.Services.AddRazorPages();
57+
builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; });
58+
59+
// Add Syncfusion Blazor service to the container.
60+
builder.Services.AddSyncfusionBlazor();
61+
62+
var app = builder.Build();
63+
64+
{% endhighlight %}
65+
{% endtabs %}
66+
67+
## Adding stylesheet and script
68+
69+
Add the following stylesheet and script to the head section of the **~/Pages/_Host.cshtml** file.
70+
71+
{% tabs %}
72+
{% highlight cshtml %}
73+
74+
<head>
75+
<!-- Syncfusion Blazor PDF Viewer (Next Gen) control's theme style sheet -->
76+
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
77+
<!-- Syncfusion Blazor PDF Viewer (Next Gen) control's scripts -->
78+
<script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
79+
</head>
80+
81+
{% endhighlight %}
82+
{% endtabs %}
83+
84+
## Adding Blazor PDF Viewer (Next Gen) Component
85+
86+
Add the Syncfusion PDF Viewer (Next Gen) component in the **~/Pages/Index.razor** file
87+
88+
{% tabs %}
89+
{% highlight razor %}
90+
91+
@page "/"
92+
93+
<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
94+
Height="100%"
95+
Width="100%">
96+
</SfPdfViewer2>
97+
98+
{% endhighlight %}
99+
{% endtabs %}
100+
101+
N> If you don't provide the `DocumentPath` property value, the PDF Viewer (Next Gen) 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+
103+
## Run the application
104+
105+
Run the application, and the PDF file will be displayed using Syncfusion's Blazor PDF Viewer (Next Gen) component in your browser.
106+
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+
109+
110+
## Steps to publish as AWS Elastic Beanstalk
111+
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)
130+
131+
## See also
132+
133+
* [Getting Started with Blazor PDF Viewer (Next Gen) Component in Blazor WASM App](https://blazor.syncfusion.com/documentation/pdfviewer-2/getting-started/web-assembly-application)
134+
135+
* [Getting Started with Blazor PDF Viewer (Next Gen) Component in WSL mode](https://blazor.syncfusion.com/documentation/pdfviewer-2/getting-started/wsl-application)
136+
137+
* [Learn different ways to add script reference in Blazor Application](https://blazor.syncfusion.com/documentation/common/adding-script-references)
138+
139+
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading

0 commit comments

Comments
 (0)