Launch a React App in a Docker Environment
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (207)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (214)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (132)JavaScript  (220)Microsoft  (118)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (911)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (158)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (130)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (624)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (505)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (386)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (589)What's new  (330)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Launch a React App in a Docker Environment

Launch a React App in a Docker Environment

This article will walk you through the process of launching a React app that utilizes Syncfusion React components in a Docker environment.

Docker 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 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 documentation instructions.

You’ll also need the basic requirements for utilizing Syncfusion React components. Refer to the System Requirements documentation for details.

Create a React app with Syncfusion React components

To create a React app that uses the Syncfusion React Data Grid component, follow the steps provided in this 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

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

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

Syncfusion React App Launched in the Docker Environment
Syncfusion React App Launched in the Docker Environment

GitHub repository

Check out the complete code example to launch the Syncfusion React app on the Docker environment on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve learned how to launch a React app that utilizes Syncfusion React 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 page. If you are not a Syncfusion customer, try our 30-day free trial to check out our available features.

You can also contact us through our support forumssupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Comments (1)

Nice article, but I think that this will be good for development, while in production you should use NGINX.
The key is to build the app once and run it multiple times, so support for the runtime environment is missing – https://github.com/kunokdev/cra-runtime-environment-variables
In production, you build he frontend once and deploy it multiple times (you connect to different API servers). Changing an API server shouldn’t involve rebuilding the entire container, just replacing a single variable in Docker or Portainer, but this should be a part of the next article.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed