|
1 | | -# Dockerizing React applications with the Syncfusion Grid component |
| 1 | +# Dockerizing React Applications with the Syncfusion Grid Component |
2 | 2 |
|
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 |
4 | 19 |
|
5 | 20 | ## Prerequisites |
6 | 21 |
|
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 |
8 | 24 |
|
9 | 25 | ## Install Docker Desktop |
10 | 26 |
|
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 |
12 | 60 |
|
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. |
14 | 62 |
|
15 | | -To run the React application in Docker, use the below Docker Compose command, |
| 63 | +## Additional Resources |
16 | 64 |
|
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