How to Deploy Spreadsheet Server on AWS EKS with Docker for React
#react#backendservices#clouddeployment#kubernetes
Lucy Muturi

Lucy Muturi @lucy_muturi

About: As a content editor at Syncfusion, I stay updated on tech trends, especially in business intelligence and AI.” Keep up the great work

Joined:
Jul 22, 2024

How to Deploy Spreadsheet Server on AWS EKS with Docker for React

Publish Date: Aug 22
0 0

TL;DR: Learn how to deploy the Syncfusion® Spreadsheet Server on AWS EKS using Docker to enable scalable open/save operations for React-based spreadsheet apps. You’ll learn how to configure your environment, deploy the server using Kubernetes manifests, expose it via AWS Load Balancer, and connect it to your React client using RESTful endpoints.

Running spreadsheets in production isn’t just about UI; it’s about backend power. Amazon EKS (Elastic Kubernetes Service) provides a managed Kubernetes environment that simplifies scaling and operating containerized workloads.

This guide walks developers through deploying the Syncfusion® Spreadsheet Server, a containerized ASP.NET Core backend, onto an EKS cluster using Docker and Kubernetes. By the end, your React (or other JavaScript ) application will handle open/save operations with a high-availability backend via RESTful endpoints.

How the Syncfusion® Spreadsheet server API works

Syncfusion® supplies a pre-built ASP.NET Core service to handle the backend processing for spreadsheet operations. These tasks are exposed via /api/spreadsheet/open and /api/spreadsheet/save RESTful endpoints. Syncfusion® maintains an official Docker image on Docker Hub, making deployment straightforward.

Here’s how the two primary operations function:

  • When a user opens an Excel file using openUrl:
    • The client sends an Excel file ( .xlsx, .xls, .xlsm, .xlsb, .csv ) to the server.
    • The service receives the file, processes its contents, and converts it into a specific JSON format that the Spreadsheet component can render.
    • This JSON is sent back to the client, allowing the spreadsheet to be displayed in the browser.
  • When a user saves or exports a Spreadsheet using saveUrl:
    • The client component sends the current state of the workbook to the server as JSON data.
    • The service receives this JSON, reconstructs the workbook, and converts it into the desired file format ( e.g., .xlsx, .xls, .pdf, .csv ).
    • The final file is then streamed back to the user for download.

Note: For more details, please refer to the blog.

Why use Amazon EKS?

Amazon EKS offers a fully managed Kubernetes control plane, which eliminates the operational overhead of installing, operating, or maintaining your master nodes.

Key benefits

  • High availability and automated load balancing: EKS automatically manages the control plane across multiple AWS availability zones for resilience. It also seamlessly integrates with AWS load balancers to automate the distribution of traffic to your application pods, ensuring your service remains available and responsive under load.
  • Seamless AWS integration: It connects natively with other essential services like IAM for secure authentication, Amazon VPC for network isolation, and CloudWatch for logging and monitoring.
  • Automated and secure: AWS handles security patching, cluster upgrades, and scaling, allowing your team to focus on building the application rather than managing infrastructure.
  • Community compatible: EKS is fully compatible with the standard Kubernetes ecosystem, so you can use all the familiar tools like kubectl, Helm, and other community add-ons without modification.

Deployment architecture overview

The deployment consists of a Kubernetes cluster running the Docker container and a service of type LoadBalancer to expose it externally. Your React client communicates with the backend using the openUrl and saveUrl properties pointing to the Service’s endpoint. You can scale the number of replicas in the deployment to handle load and ensure high availability.

React Client (via openUrl/saveUrl) ──> AWS Load Balancer ──> EKS Deployment (Spreadsheet Server Pod)

Prerequisites

Before you begin, ensure the following:

  • AWS CLI and kubectl are both installed and configured.
  • You have access to an existing EKS cluster, or you can create one via the AWS console or CLI.
  • Docker is installed, especially if you plan to build and push a custom image.

Step-by-step deployment guide

Follow the steps below to deploy the Spreadsheet Docker image to the AWS EKS cluster.

Step 1: Configure your environment

  • Open a terminal and authenticate to AWS: 
aws configure # enter your Access Key, Secret Key, region, and output format (e.g., json)
Enter fullscreen mode Exit fullscreen mode
  • Update your kubectl context to point to the EKS cluster: 
aws eks update-kubeconfig --region <region> --name <cluster-name>
Enter fullscreen mode Exit fullscreen mode
  • After updating the kubeconfig with the EKS cluster, you can verify the node’s state: 
kubectl get nodes # verify that your cluster nodes are ready
Enter fullscreen mode Exit fullscreen mode

Step 2: Create the deployment

Create a file named spreadsheet-deployment.yaml defining a deployment for the Syncfusion® container. This example uses the latest tag from Docker Hub:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: spreadsheet-server
  labels:
    app: spreadsheet-server
spec:
  replicas: 1 # Increase to 2 or more for higher availability
  selector:
    matchLabels:
      app: spreadsheet-server
  template:
    metadata:
      labels:
        app: spreadsheet-server
    spec:
      containers:
      - name: spreadsheet-server
        image: syncfusion/spreadsheet-server:latest
        ports:
        - containerPort: 8080
        env:
            - name: SYNCFUSION_LICENSE_KEY
              value: "YOUR_LICENSE_KEY"
Enter fullscreen mode Exit fullscreen mode

Note: If you build your image, push it to Docker Hub or AWS ECR, and update the image: field accordingly.

Step 3: Expose the service

Create a spreadsheet-service.yaml to define a Service of type LoadBalancer that forwards traffic to the container. Customize the external port (5000) as needed; the internal targetPort should remain 8080 because the container listens on that port.

apiVersion: v1
kind: Service
metadata:
  name: spreadsheet-server-service
spec:
  selector:
    app: spreadsheet-server
  type: LoadBalancer
  ports:
    - protocol: TCP
      port: 5000 # External port exposed by the load balancer
      targetPort: 8080 # Internal container port
Enter fullscreen mode Exit fullscreen mode

Step 4: Deploy to EKS

Apply the manifests:

kubectl apply -f spreadsheet-deployment.yaml

kubectl apply -f spreadsheet-service.yaml
Enter fullscreen mode Exit fullscreen mode

Use the kubectl get pods command to monitor pod status. To retrieve the external address, run:

kubectl get svc spreadsheet-server-service
Enter fullscreen mode Exit fullscreen mode

Use https:// in your URLs only if your AWS Load Balancer is configured for TLS/SSL. You can provision and attach a certificate using AWS Certificate Manager.

Step 5: Configure the React client

Once the Service reports an external address (e.g., a1b2c3d4e5f6-1234567890.us-east-1.elb.amazonaws.com), update the openUrl and saveUrl properties of your React Spreadsheet component:

<SpreadsheetComponent 
  openUrl={`http://${serviceDNS}:5000/api/spreadsheet/open`} 
  saveUrl={`http://${serviceDNS}:5000/api/spreadsheet/save`}/>
Enter fullscreen mode Exit fullscreen mode

Step 6: Scaling and customization

  • Scale replicas: To handle a higher workload, you can scale your deployment by increasing the replicas count in your spreadsheet-deployment.yaml file and then run kubectl apply -f spreadsheet-deployment.yaml to apply the changes. Kubernetes will automatically manage the distribution of traffic across the pods.
  • Resource limits: Define resources.requests, and resources.limits in the container spec to allocate CPU and memory appropriately.
  • Environment variables: In addition to SYNCFUSION_LICENSE_KEY, you can set other configuration keys (e.g., culture) using the env: section in the deployment manifest without modifying the docker image.

Conclusion

By deploying Syncfusion® Spreadsheet Server to Amazon EKS, you unlock a scalable backend for your React spreadsheet apps. EKS abstracts away Kubernetes control‑plane management, allowing you to focus on your application. With Docker and Kubernetes, you get resilience, automation, and seamless integration with AWS services.

Kubernetes handles replica management, rolling updates, and fault recovery. This setup lets you seamlessly serve open and save requests from your client-side Spreadsheet while leveraging AWS’s high availability, security, and integration ecosystem.

As your usage grows, scale the deployment or integrate with additional AWS services, such as IAM roles, secrets management, to meet your production needs.

Syncfusion® customers with an active license can download the latest release of Essential Studio® from the license and downloads page. New users can start a 30-day free trial to explore the latest features.

Need help? Reach out through our support forum, support portal, or feedback portal. We’re here to help you build modern, feature-rich applications with confidence and ease.

Related Blogs

This article was originally published at Syncfusion.com.

Comments 0 total

    Add comment