Skip to content

Commit c67c1e3

Browse files
parthasarathy4998parthasarathy4998
committed
1003858: Created spreadsheet server deployment ug content
1 parent 303a0c1 commit c67c1e3

4 files changed

Lines changed: 255 additions & 1 deletion

File tree

‎Document-Processing-toc.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5197,7 +5197,13 @@
51975197
<li><a href="/document-processing/excel/spreadsheet/react/nextjs-getting-started">Getting Started with NextJS</a></li>
51985198
<li><a href="/document-processing/excel/spreadsheet/react/data-binding">Data Binding</a></li>
51995199
<li><a href="/document-processing/excel/spreadsheet/react/open-save">Open and Save</a></li>
5200-
<li><a href="/document-processing/excel/spreadsheet/react/docker-deployment">Docker Deployment</a></li>
5200+
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment">Server Deployment</a>
5201+
<ul>
5202+
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/docker-deployment">How to Deploy Spreadsheet Docker Image Locally</a></li>
5203+
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-visual-studio">Deploy Spreadsheet Server Docker Image to Azure App Service using Azure CLI</a></li>
5204+
<li><a href="/document-processing/excel/spreadsheet/react/server-deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-azure-cli">Deploy Spreadsheet Server to Azure App Service using Visual Studio</a></li>
5205+
</ul>
5206+
</li>
52015207
<li><a href="/document-processing/excel/spreadsheet/react/worksheet">Worksheet</a></li>
52025208
<li><a href="/document-processing/excel/spreadsheet/react/cell-range">Cell Range</a></li>
52035209
<li><a href="/document-processing/excel/spreadsheet/react/editing">Editing</a></li>

‎Document-Processing/Excel/Spreadsheet/React/Server-Deployment/docker-deployment.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
layout: post
3+
title: Docker image deployment in React Spreadsheet component | Syncfusion
4+
description: Learn here all about Docker image deployment in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: Docker deployment
7+
documentation: ug
8+
---
9+
10+
# Docker Image Overview in React Spreadsheet component
11+
12+
The [**Syncfusion<sup style="font-size:70%">&reg;</sup> Spreadsheet (also known as Excel Viewer)**](https://www.syncfusion.com/spreadsheet-editor-sdk/react-spreadsheet-editor) is a feature-rich control for organizing and analyzing data in a tabular format. It provides all the common Excel features, including data binding, selection, editing, formatting, resizing, sorting, filtering, importing, and exporting Excel documents.
13+
14+
This Docker image is the pre-defined Docker container for Syncfusion's Spreadsheet back-end functionalities. This server-side Web API project targets ASP.NET Core 8.0.
15+
16+
You can deploy it quickly to your infrastructure. If you want to add new functionality or customize any existing functionalities, create your own Docker file by referencing the existing [Spreadsheet Docker project](https://github.com/SyncfusionExamples/Spreadsheet-Server-Docker).
17+
18+
The Spreadsheet is supported on the [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), and [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls) platforms.
19+
20+
## Prerequisites
21+
22+
Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment:
23+
24+
* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows).
25+
* On macOS, install [`Docker for Mac`](https://docs.docker.com/desktop/install/mac-install/).
26+
27+
## How to deploy the Spreadsheet Docker Image
28+
29+
**Step 1:** Pull the spreadsheet-server image from Docker Hub.
30+
31+
```console
32+
docker pull syncfusion/spreadsheet-server
33+
```
34+
35+
**Step 2:** Create the `docker-compose.yml` file with the following code in your file system.
36+
37+
```yaml
38+
version: '3.4'
39+
40+
services:
41+
spreadsheet-server:
42+
image: syncfusion/spreadsheet-server:latest
43+
environment:
44+
# Provide your license key for activation
45+
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
46+
ports:
47+
- "6002:8080"
48+
```
49+
50+
**Note:** The Spreadsheet is a commercial product. It requires a valid [license key](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) to use in a production environment. Please replace `YOUR_LICENSE_KEY` with the valid license key in the `docker-compose.yml` file.
51+
52+
**Step 3:** In a terminal tab, navigate to the directory where you've placed the `docker-compose.yml` file and execute the following:
53+
54+
```console
55+
docker-compose up
56+
```
57+
58+
Now the Spreadsheet server Docker instance runs on localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Spreadsheet Web API open and save service at `http://localhost:6002/api/spreadsheet/open` and `http://localhost:6002/api/spreadsheet/save`.
59+
60+
**Step 4:** Append the URLs of the Docker instance running services to the [`openUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#openurl) property as `http://localhost:6002/api/spreadsheet/open` and the [`saveUrl`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#saveurl) property as `http://localhost:6002/api/spreadsheet/save` in the client-side Spreadsheet component. For more information on how to get started with the Spreadsheet component, refer to this [`getting started page.`](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started)
61+
62+
```js
63+
import * as React from 'react';
64+
import { createRoot } from 'react-dom/client';
65+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
66+
67+
function App() {
68+
69+
return (
70+
// Initialize Spreadsheet component.
71+
<SpreadsheetComponent openUrl='http://localhost:6002/api/spreadsheet/open' saveUrl='http://localhost:6002/api/spreadsheet/save' />
72+
);
73+
};
74+
export default App;
75+
76+
const root = createRoot(document.getElementById('root'));
77+
root.render(<App />);
78+
```
79+
80+
## How to configure different cultures using a Docker compose file
81+
82+
By default, the Spreadsheet Docker container is generated in the `en_US` culture. You can configure different cultures using the `LC_ALL`, `LANGUAGE`, and `LANG` environment variables in the `docker-compose.yml` file. These environment variables are replaced in the Docker file to set the specified culture for the Spreadsheet server.
83+
84+
```yaml
85+
version: '3.4'
86+
87+
services:
88+
spreadsheet-server:
89+
image: syncfusion/spreadsheet-server:latest
90+
environment:
91+
# Provide your license key for activation
92+
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
93+
# Specify the culture to configure for the Spreadsheet server
94+
LC_ALL: de_DE.UTF-8
95+
LANGUAGE: de_DE.UTF-8
96+
LANG: de_DE.UTF-8
97+
ports:
98+
- "6002:8080"
99+
```
100+
101+
Please refer to these getting started pages to create a Spreadsheet in [`Javascript`](https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es5/getting-started), [`Angular`](https://help.syncfusion.com/document-processing/excel/spreadsheet/angular/getting-started), [`Vue`](https://help.syncfusion.com/document-processing/excel/spreadsheet/vue/getting-started), [`ASP.NET Core`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/getting-started-core), and [`ASP.NET MVC`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/getting-started-mvc).

‎Document-Processing/Excel/Spreadsheet/React/Server-Deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-azure-cli.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
layout: post
3+
title: Deploy Spreadsheet Server to Azure App Service using CLI | Syncfusion
4+
description: Learn how to deploy the Syncfusion Spreadsheet Server Docker image to Azure App Service using Azure CLI.
5+
control: How to deploy Spreadsheet Server Docker Image to Azure App Service using Azure CLI
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Deploy Spreadsheet Server Docker Image to Azure App Service via CLI
11+
12+
## Prerequisites
13+
14+
* `Docker` installed on your machine (Windows, macOS, or Linux).
15+
* `Azure CLI` installed based on your operating system. [Download Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli)
16+
* An active [`Azure subscription`](https://azure.microsoft.com/en-gb) with App Services access.
17+
* The [`Spreadsheet Server Docker image`](https://hub.docker.com/r/syncfusion/spreadsheet-server) available.
18+
19+
## Deploy to Azure App Service using Azure CLI
20+
21+
**Step 1:** Log in to Azure
22+
23+
Open your terminal and sign in to Azure using the command below. This authenticates your CLI with Azure.
24+
25+
```bash
26+
az login
27+
```
28+
29+
**Step 2:** Create a resource group
30+
31+
Create a resource group with the following command in your preferred location.
32+
33+
```bash
34+
az group create --name < your-app-name> --location <your-selected-region>
35+
```
36+
37+
**Step 3:** Create an app service plan
38+
39+
Create a resource group with the following command in your preferred location.
40+
41+
```bash
42+
az appservice plan create --name --resource-group < your-resource-group> --sku S1 --is-linux
43+
```
44+
45+
This creates an App Service plan in the standard pricing tier (S1) and ensures it runs on Linux containers with the --is-linux flag.
46+
47+
**Step 4:** Create the docker-compose.yml file
48+
49+
Define your container configuration in a docker-compose.yml file. This file specifies the container name, image, and environment variables for the Spreadsheet Server:
50+
51+
```bash
52+
version: '3.4'
53+
54+
services:
55+
spreadsheet-server:
56+
image: syncfusion/spreadsheet-server
57+
environment:
58+
59+
# Provide your license key for activation
60+
SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
61+
ports:
62+
- "6002:8080"
63+
64+
```
65+
66+
Note: Replace YOUR_LICENSE_KEY with your valid Syncfusion license key.
67+
68+
**Step 5:** Create a Docker compose app
69+
70+
Deploy the containerized app to Azure App Service using the following command.
71+
72+
```bash
73+
az webapp create --resource-group <your-resource-group> --plan < your-app-service-plan> --name <your-app-name> --multicontainer-config-type compose --multicontainer-config-file docker-compose.yml
74+
```
75+
76+
This command creates a web app that runs your Spreadsheet Server Docker container using the configuration defined in the docker-compose.yml file.
77+
78+
**Step 6:** Browse your app
79+
80+
Once deployed, your app will be live at https://XXXXXXXXXX.azurewebsites.net.
81+
82+
![azure cli](../images/azure-cli.png)
83+
84+
**Step 7:** With your server running, verify that it supports import and export operations by testing the following endpoints:
85+
```
86+
openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open"
87+
saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save
88+
```
89+
Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md)
90+
91+
For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup.

‎Document-Processing/Excel/Spreadsheet/React/Server-Deployment/how-to-deploy-spreadsheet-server-to-azure-app-service-using-visual-studio.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
layout: post
3+
title: Deploy Spreadsheet Server to Azure App Service via VS | Syncfusion
4+
description: Learn how to publish the Syncfusion Spreadsheet Server Web API to Azure App Service using Visual Studio.
5+
control: How to publish Spreadsheet Server in Azure App Service using Visual Studio
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Deploy Spreadsheet Server to Azure App Service from Visual Studio
11+
12+
## Prerequisites
13+
14+
* `Visual Studio 2022` or later is installed.
15+
* [`.NET 8.0 SDK`](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later installed.
16+
* An active [`Azure subscription`](https://azure.microsoft.com/en-gb) with App Services access.
17+
* The [`Spreadsheet Web API project`](https://github.com/SyncfusionExamples/EJ2-Spreadsheet-WebServices/tree/main/WebAPI) repository cloned locally.
18+
19+
Make sure you build the project using the Build > Build Solution menu command before following the deployment steps.
20+
21+
## Publish to Azure App Service
22+
23+
**Step 1:** In Solution Explorer, right-click the project and click Publish (or use the Build > Publish menu item).
24+
25+
![azure publish ](../images/azure_publish.png)
26+
27+
**Step 2:** In the Pick a publish target dialog box, select Azure as deployment target.
28+
29+
![azure target ](../images/azure_target.png)
30+
31+
**Step 3:** After selecting Azure, choose Azure App Service under the target options.
32+
33+
![azure app service](../images/azure_app_service.png)
34+
35+
**Step 4:** Select Publish. The Create App Service dialog box appears. Sign in with your Azure account, if necessary, and then the default app service settings populate the fields.
36+
37+
![azure credentials](../images/azure_credentials.png)
38+
39+
**Step 5:** Select Create. Visual Studio deploys the app to your Azure App Service, and the web app loads in your browser with the app name at,
40+
```
41+
http://<app_name>.azurewebsites.net
42+
```
43+
44+
![azure_published_window](../images/azure_published_window.png)
45+
46+
**Step 6:** Once the deployment process is complete, The deployed API will be live at the following URL:
47+
https://XXXXXXXXXX.azurewebsites.net
48+
49+
**Step 7:** With your server running, verify that it supports import and export operations by testing the following endpoints:
50+
```
51+
openUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/open"
52+
saveUrl="https://XXXXXXXXXX.azurewebsites.net/api/spreadsheet/save
53+
```
54+
Append the App Service running URL to the service URL in the client‑side Spreadsheet Editor component. For more information about how to get started with the Spreadsheet Editor component, refer to this [`getting started page`](../getting-started.md)
55+
56+
For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup.

0 commit comments

Comments
 (0)