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

This article describes how to add the Syncfusion® 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.

Prerequisites

Create a new Blazor App in Visual Studio

Create a new Blazor Server app and name it PDFViewerGettingStarted.

NOTE

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 to the Blazor Server app.

Register Syncfusion® Blazor Service

  • In the ~/_Imports.razor file, add the following namespaces:
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.SfPdfViewer;
  • Register the Syncfusion® Blazor Service in the ~/Program.cs file.
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor().AddHubOptions(o => { o.MaximumReceiveMessageSize = 102400000; });

// Add Syncfusion Blazor service to the container.
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

Adding stylesheet and script

Add the following stylesheet and script to the head section of the ~/Pages/_Host.cshtml file.

<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>
</body>

Adding Blazor PDF Viewer Component

Add the Syncfusion® PDF Viewer (Next-Gen) component in the ~/Pages/Index.razor file.

@page "/"

<SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
              Height="100%"
              Width="100%">
</SfPdfViewer2>

NOTE

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 to display the PDF file in the Syncfusion® Blazor PDF Viewer component in the browser.

Blazor Server SfPdfViewer rendering in browser

Steps to publish as AWS Elastic Beanstalk

  1. Right-click the project and select Publish to AWS Elastic Beanstalk (Legacy).
    Publish to AWS Elastic Beanstalk in Visual Studio
  2. Select the deployment target Create a new application environment, and then click Next.
    Create a new application environment selection
  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
  4. Select the instance type t3a.micro from the drop-down list, and then click Next.
    Select t3a.micro instance type
  5. Click Next to proceed.
    Review required roles and permissions
  6. Click Next.
    Review configuration summary
  7. Click Deploy to publish the application to AWS Elastic Beanstalk.
    Deploy the application to Elastic Beanstalk
  8. When the environment status changes from Updating to Environment is healthy, click the provided URL.
    Elastic Beanstalk environment health and application URL
  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

See also