|
| 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 | + |
| 114 | +2. Select the Deployment Target as Create a new application environment and click Next button. |
| 115 | + |
| 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 | + |
| 118 | +4. Select the instance type in t3a.micro from the dropdown list and click next. |
| 119 | + |
| 120 | +5. Click the Next button to proceed further. |
| 121 | + |
| 122 | +6. Click the Next button |
| 123 | + |
| 124 | +7. Click the Deploy button to deploy the sample on AWS Elastic Beanstalk. |
| 125 | + |
| 126 | +8. After changing the status from Updating to Environment is healthy, click the URL. |
| 127 | + |
| 128 | +9. After opening the provided URL the provided PDF document will be displayed in PDF Viewer. |
| 129 | + |
| 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 | + |
0 commit comments