Skip to content

Commit f64032a

Browse files
authored
Merge pull request #3 from SyncfusionExamples/1022901-readme-correction
Task(1022901): Updated README content
2 parents ad83c73 + 09d7a2b commit f64032a

1 file changed

Lines changed: 57 additions & 9 deletions

File tree

README.md

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,67 @@
1-
# Dockerizing React applications with the Syncfusion Grid component
1+
# Dockerizing React Applications with the Syncfusion Grid Component
22

3-
This repository holds a project showcasing how to dockerizing a React application that utilizes Syncfusion React Grid component.
3+
## Repository Description
4+
5+
This repository contains a sample React application that demonstrates how to Dockerize a React project using the Syncfusion React Grid component and run it inside a Docker container using Docker Compose.
6+
7+
## Project Overview
8+
9+
This sample showcases how a standard React application that uses the Syncfusion React Grid can be containerized using Docker. The project includes a Dockerfile and a docker-compose configuration that allow the application to be built, packaged, and run consistently across environments without requiring local Node.js setup.
10+
11+
The React application renders a Syncfusion Grid with paging and sorting enabled and uses an environment variable to register the Syncfusion license key inside the Docker container. This approach is useful for teams that want to deploy React applications in containerized environments while ensuring consistent runtime behavior.
12+
13+
## Key Features
14+
15+
- Demonstrates Dockerizing a React application
16+
- Uses Syncfusion React Grid with paging support
17+
- Environment-based Syncfusion license registration
18+
- Docker Compose setup for simplified execution
419

520
## Prerequisites
621

7-
- [Docker Desktop](https://docs.docker.com/desktop/install/windows-install/)
22+
- Docker Desktop installed on the machine
23+
- Basic knowledge of Docker and Docker Compose
824

925
## Install Docker Desktop
1026

11-
Please follow the installation steps outlined in the official Docker documentation for installing Docker Desktop on a Windows operating system. You can find the instructions on the Docker website under [Docker on Windows](https://docs.docker.com/desktop/install/windows-install/#install-docker-desktop-on-windows).
27+
Follow the installation steps outlined in the official Docker documentation for installing Docker Desktop on Windows:
28+
<https://docs.docker.com/desktop/install/windows-install/>
29+
30+
## Running the Application
31+
32+
Follow the steps below to build and run the React application using Docker.
33+
34+
1. Clone the repository and navigate to the project directory:
35+
36+
```bash
37+
git clone https://github.com/SyncfusionExamples/Dockerizing-React-applications-with-the-Syncfusion-Grid-component.git
38+
cd Dockerizing-React-applications-with-the-Syncfusion-Grid-component
39+
```
40+
41+
2. Build and run the application using Docker Compose:
42+
43+
```bash
44+
docker-compose up
45+
```
46+
47+
Docker will build the image using the provided Dockerfile, install dependencies, and start the React application inside a container.
48+
49+
3. Open the application in a browser:
50+
51+
Navigate to the following URL once the container is running:
52+
53+
```bash
54+
http://localhost:3000
55+
```
56+
57+
The Syncfusion React Grid will be displayed with sample data rendered from the application.
58+
59+
## Configuration Notes
1260

13-
## Run the Docker Image
61+
The Syncfusion license key is passed to the container using an environment variable defined in the `docker-compose.yml` file. Update the `REACT_APP_SYNCFUSION_LICENSE_KEY` value with a valid license key before running the application.
1462

15-
To run the React application in Docker, use the below Docker Compose command,
63+
## Additional Resources
1664

17-
```sh
18-
Docker-compose up
19-
```
65+
- [Syncfusion React Grid Documentation](https://ej2.syncfusion.com/react/documentation/grid/getting-started)
66+
- [Syncfusion React Grid Demos](https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/overview)
67+
- [Docker Documentation](https://docs.docker.com)

0 commit comments

Comments
 (0)