Launch a React App in a Docker Environment
Tags: react, webdev, docker
Published: 2023-04-19 12:14:23

---
title: Launch a React App in a Docker Environment
published: true
date: 2023-04-19 11:00:00 UTC
tags: react, webdev, docker
canonical_url: https://www.syncfusion.com/blogs/post/launch-react-app-in-docker.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgm2jbchxnvm03n3alqe.png
---
This article will walk you through the process of launching a React app that utilizes Syncfusion React components in a Docker environment.

[Docker](https://en.wikipedia.org/wiki/Docker_(software) "Wikipedia Link: Docker (software)") is an open-source platform that automates the deployment, scaling, and management of applications, especially those built with microservices architecture. It allows developers to package applications in containers, which are self-contained units including everything needed to run the app, such as code, runtime, system tools, libraries, and settings.

The [Syncfusion React UI components](https://www.syncfusion.com/react-components "Syncfusion React UI components") library is a comprehensive suite of over 80 high-performance, lightweight, modular, and responsive UI components that come in a single package.

Before diving into the steps of launching a Syncfusion React app in Docker, let’s look at the prerequisites you’ll need to have.

## Prerequisites

You first need the Docker setup installed on your machine. Follow the [Install Docker Desktop](https://docs.docker.com/desktop/install/windows-install/ "Install Docker Desktop on Windows documentation") documentation instructions.

You’ll also need the basic requirements for utilizing Syncfusion React components. Refer to the [System Requirements](https://ej2.syncfusion.com/react/documentation/system-requirement/ "System requirements for Syncfusion React components") documentation for details.

## Create a React app with Syncfusion React components

To create a React app that uses the Syncfusion [React Data Grid](https://www.syncfusion.com/react-components/react-data-grid "React Data Grid") component, follow the steps provided in this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start/ "Getting started with Syncfusion React UI components documentation"). Once you have created the app, you can integrate it with Docker.

## Integrate the React app into Docker

You then need to create a container image to integrate the React app with Docker. A container image is an instruction manual for creating a Docker container, which is a runnable image instance. You can manage containers using the Docker API or CLI.

### Step 1: Create a container image.

To create the container image, you need to create a Docker file in the root directory of the React app. The Docker file contains instructions for generating the container image. The following is an example of what the Docker file might look like. ![Create the docker file](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Create-the-docker-file.png)

Once the **Docker**  **file** is created, add the relevant code snippet to generate the container image for the React app.

```
# Dockerfile
 
# Use an existing node alpine image as a base image.
FROM node:18-alpine
 
# Set the working directory.
WORKDIR /app
 
# Copy the package.json file.
COPY package.json .
 
# Install application dependencies.
RUN npm install
 
# Copy the rest of the application files.
COPY . .
 
# Expose the port.
EXPOSE 3000
 
# Run the application.
CMD [“npm”, “start”]

```

As per the configuration, Docker will copy the React app into the **app** container folder. During the creation of the React app, the node module files will be installed automatically. You can also keep these files or directories from being copied to the container using the **dockerignore** file.

Refer to the following code example.

```
// .dockerignore file
 
node_modules
Dockerfile
.git
.gitignore
.dockerignore

```

### Step 2: Build a Docker container using Docker Compose.

Now, we’ll build a Docker container using the Docker Compose tool, designed to define and operate multi-container Docker apps. With just a single command, Docker Compose provides an easy way to set up and launch a group of connected containers.

To utilize Docker Compose, create a **docker-compose.yml** file and specify your app’s services, networks, and volumes.

Refer to the following code example.

```
# docker-compose.yml
 
# Reference compose file version 3
version: “3”
services:
# Service name is react-app
react-app:
# build from Dockerfile
build: .
# expose 3000 as hosting port & 3000 in container port
ports:
- “3000:3000”
environment:
#Provide your license key for activation as environment variable to docker container
REACT_APP_SYNCFUSION_LICENSE_KEY: ${REACT_APP_SYNCFUSION_LICENSE_KEY}

```

### Step 3: Run the Docker container.

Finally, run the Docker container using the following Docker Compose command.

```
Docker-compose up
```

Now, you can check the container status in the Docker Desktop app’s container tab. ![Run the Docker container](https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Run-the-Docker-container-1.png)

The React application will be accessible at **http://localhost:3000/,** and the output will look like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/04/Launching-the-Syncfusion-React-app-in-the-Docker-environment-1.png" alt="Syncfusion React App Launched in the Docker Environment" style="width:100%">

  <figcaption>Syncfusion React App Launched in the Docker Environment</figcaption>

</figure>

## GitHub repository

Check out the complete code example to [launch the Syncfusion React app on the Docker environment on GitHub](https://github.com/SyncfusionExamples/Dockerizing-React-applications-with-the-Syncfusion-Grid-component "Launch the Syncfusion React app on Docker GitHub demo").

## Conclusion

Thanks for reading! In this blog, we’ve learned how to launch a React app that utilizes Syncfusion [React components](https://www.syncfusion.com/react-components "Syncfusion React UI components") in a Docker environment. Try the steps discussed in this blog post and leave your feedback in the comments section below!

The new version of Essential Studio is available for existing customers from the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio license and downloads page") page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products") to check out our available features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easily Integrate the React Image Editor into the Rich Text Editor](https://www.syncfusion.com/blogs/post/integrate-react-image-editor-into-rich-text-editor.aspx "Blog: Easily Integrate the React Image Editor into the Rich Text Editor")
- [Empowering Mobile Users with Syncfusion React Data Grid’s Adaptive UI Layout](https://www.syncfusion.com/blogs/post/empowering-mobile-users-with-syncfusion-react-data-grids-adaptive-ui-layout.aspx "Blog: Empowering Mobile Users with Syncfusion React Data Grid’s Adaptive UI Layout")
- [Integrating Google Calendar Events with Syncfusion React Scheduler [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/integrate-google-calendar-with-react-scheduler.aspx "Blog: Integrating Google Calendar Events with Syncfusion React Scheduler")
- [Creating a CRUD-Enabled Scheduling App with Syncfusion React Scheduler, Node.js, and PostgreSQL](https://www.syncfusion.com/blogs/post/crud-react-scheduler-node-js-postgresql.aspx "Blog: Creating a CRUD-Enabled Scheduling App with Syncfusion React Scheduler, Node.js, and PostgreSQL")