You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/guides/reactjs/_index.md
+1-3Lines changed: 1 addition & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,12 +7,10 @@ summary: |
7
7
This guide explains how to containerize React.js applications using Docker.
8
8
toc_min: 1
9
9
toc_max: 2
10
-
aliases:
11
-
- /language/reactjs/
12
-
- /guides/language/reactjs/
13
10
languages: [js]
14
11
params:
15
12
time: 20 minutes
13
+
16
14
---
17
15
18
16
The React.js language-specific guide shows you how to containerize a React.js application using Docker, following best practices for creating efficient, production-ready containers.
description: Learn how to containerize a React.js application with Docker by creating an optimized, production-ready image using best practices for performance, security, and scalability.
7
-
- /language/react.js/run-containers/
7
+
8
8
---
9
9
10
10
@@ -27,10 +27,10 @@ This guide walks you through the complete process of containerizing a React.js a
27
27
By the end of this guide, you will:
28
28
29
29
- Containerize a React.js application using Docker.
30
-
- Create and optimize a **Dockerfile** for production builds.
31
-
- Use **multi-stage builds** to minimize image size.
32
-
- Serve the application efficiently with a custom **NGINX configuration**.
33
-
- Follow **best practices** for building secure and maintainable Docker images.
30
+
- Create and optimize a Dockerfile for production builds.
31
+
- Use multi-stage builds to minimize image size.
32
+
- Serve the application efficiently with a custom NGINX configuration.
33
+
- Follow best practices for building secure and maintainable Docker images.
34
34
35
35
---
36
36
@@ -104,11 +104,11 @@ The default Dockerfile generated by `docker init` serves as a solid starting poi
104
104
105
105
### Step 1: Review the generated files
106
106
107
-
In this step, we’ll improve the Dockerfile and configuration files by following best practices:
107
+
In this step, you’ll improve the Dockerfile and configuration files by following best practices:
108
108
109
-
- Use **multi-stage builds** to keep the final image clean and small
110
-
- Serve the app using **NGINX**, a fast and secure web server
111
-
- Improve **performance** and **security** by only including what’s needed
109
+
- Use multi-stage builds to keep the final image clean and small
110
+
- Serve the app using NGINX, a fast and secure web server
111
+
- Improve performance and security by only including what’s needed
112
112
113
113
These updates help ensure your app is easy to deploy, fast to load, and production-ready.
114
114
@@ -312,7 +312,7 @@ http {
312
312
313
313
With your custom configuration in place, you're now ready to build the Docker image for your React.js application.
314
314
315
-
**The updated setup includes**:
315
+
The updated setup includes:
316
316
317
317
- Optimized browser caching and gzip compression
318
318
- Secure, non-root logging to avoid permission issues
@@ -340,7 +340,7 @@ Run the following command from the root of your project:
340
340
$ docker build --tag docker-reactjs-sample .
341
341
```
342
342
343
-
**What this command does:**
343
+
What this command does:
344
344
- Uses the Dockerfile in the current directory (.)
345
345
- Packages the application and its dependencies into a Docker image
346
346
- Tags the image as docker-reactjs-sample so you can reference it later
@@ -363,7 +363,7 @@ REPOSITORY TAG IMAGE ID CREATED SIZE
363
363
docker-reactjs-sample latest f39b47a97156 14 seconds ago 75.8MB
364
364
```
365
365
366
-
**This output provides key details about your images:**
366
+
This output provides key details about your images:
367
367
368
368
-**Repository** – The name assigned to the image.
369
369
-**Tag** – A version label that helps identify different builds (e.g., latest).
@@ -389,6 +389,7 @@ $ docker compose up --build
389
389
390
390
Open a browser and view the application at [http://localhost:8080](http://localhost:8080). You should see a simple React.js web application.
391
391
392
+
Press `ctrl+c` in the terminal to stop your application.
392
393
393
394
### Run the application in the background
394
395
@@ -436,14 +437,14 @@ $ docker compose down
436
437
437
438
In this guide, you learned how to containerize, build, and run a React.js application using Docker. By following best practices, you created a secure, optimized, and production-ready setup.
438
439
439
-
**What you accomplished:**
440
+
What you accomplished:
440
441
- Initialized your project using `docker init` to scaffold essential Docker configuration files.
441
442
- Replaced the default `Dockerfile` with a **multi-stage build** that compiles the React.js application and serves the static files using **Nginx**.
442
443
- Replaced the default `.dockerignore` file to exclude unnecessary files and keep the image clean and efficient.
443
-
-**Built your Docker image** using `docker build`.
444
-
-**Ran the container** using `docker compose up`, both in the foreground and in **detached mode**.
444
+
- Built your Docker image using `docker build`.
445
+
- Ran the container using `docker compose up`, both in the foreground and in **detached mode**.
445
446
- Verified that the app was running by visiting [http://localhost:8080](http://localhost:8080).
446
-
- Learned how to **stop the containerized application** using `docker compose down`.
447
+
- Learned how to stop the containerized application using `docker compose down`.
447
448
448
449
You now have a fully containerized React.js application, running in a Docker container, and ready for deployment across any environment with confidence and consistency.
449
450
@@ -468,5 +469,5 @@ Explore official references and best practices to sharpen your Docker workflow:
468
469
469
470
With your React.js application now containerized, you're ready to move on to the next step.
470
471
471
-
In the next section, you'll learn how to **develop your application using Docker containers**, enabling a consistent, isolated, and reproducible development environment across any machine.
472
+
In the next section, you'll learn how to develop your application using Docker containers, enabling a consistent, isolated, and reproducible development environment across any machine.
In this section, you'll learn how to set up both production and development environments for your containerized React.js application using Docker Compose. This setup allows you to serve a static production build via Nginx and to develop efficiently inside containers using a live-reloading dev server with Compose Watch.
22
19
23
-
**You’ll learn how to:**
24
-
- Configure separate containers for **production** and **development**
25
-
- Enable automatic file syncing using **Compose Watch** in development
20
+
You’ll learn how to:
21
+
- Configure separate containers for production and development
22
+
- Enable automatic file syncing using Compose Watch in development
26
23
- Debug and live-preview your changes in real-time without manual rebuilds
Use **Compose Watch** to automatically sync source file changes into your containerized development environment. This provides a seamless, efficient development experience without needing to restart or rebuild containers manually.
29
+
Use Compose Watch to automatically sync source file changes into your containerized development environment. This provides a seamless, efficient development experience without needing to restart or rebuild containers manually.
To verify that **Compose Watch** is working correctly:
156
+
To verify that Compose Watch is working correctly:
160
157
161
-
1.Open the `src/App.tsx` file in your text editor.
158
+
1.Open the `src/App.tsx` file in your text editor.
162
159
163
-
2.Locate the following line:
160
+
2.Locate the following line:
164
161
165
162
```html
166
163
<h1>Vite + React</h1>
167
164
```
168
165
169
-
3.Change it to:
166
+
3.Change it to:
170
167
```html
171
168
<h1>Hello from Docker Compose Watch</h1>
172
169
```
173
170
174
-
4.Save the file.
171
+
4.Save the file.
175
172
176
-
5.Open your browser at [http://localhost:5173](http://localhost:5173).
173
+
5.Open your browser at [http://localhost:5173](http://localhost:5173).
177
174
178
175
You should see the updated text appear instantly, without needing to rebuild the container manually. This confirms that file watching and automatic synchronization are working as expected.
179
176
@@ -183,10 +180,10 @@ You should see the updated text appear instantly, without needing to rebuild the
183
180
184
181
In this section, you set up a complete development and production workflow for your React.js application using Docker and Docker Compose.
185
182
186
-
**Here's what you achieved:**
183
+
Here's what you achieved:
187
184
- Created a `Dockerfile.dev` to streamline local development with hot reloading
188
185
- Defined separate `react-dev` and `react-prod` services in your `compose.yaml` file
189
-
- Enabled real-time file syncing using **Compose Watch** for a smoother development experience
186
+
- Enabled real-time file syncing using Compose Watch for a smoother development experience
190
187
- Verified that live updates work seamlessly by modifying and previewing a component
191
188
192
189
With this setup, you're now equipped to build, run, and iterate on your React.js app entirely within containers—efficiently and consistently across environments.
Copy file name to clipboardExpand all lines: content/guides/reactjs/run-tests.md
+9-12Lines changed: 9 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,6 @@ linkTitle: Run your tests
4
4
weight: 30
5
5
keywords: react.js, react, test, vitest
6
6
description: Learn how to run your React.js tests in a container.
7
-
aliases:
8
-
- /language/reactjs/run-tests/
9
-
- /guides/language/reactjs/run-tests/
10
7
---
11
8
12
9
## Prerequisites
@@ -17,10 +14,10 @@ Complete all the previous sections of this guide, starting with [Containerize Re
17
14
18
15
Testing is a critical part of the development process. In this section, you'll learn how to:
19
16
20
-
- Run unit tests using **Vitest** inside a Docker container.
21
-
- Use **Docker Compose** to run tests in an isolated, reproducible environment.
17
+
- Run unit tests using Vitest inside a Docker container.
18
+
- Use Docker Compose to run tests in an isolated, reproducible environment.
22
19
23
-
We’ll use [Vitest](https://vitest.dev) — a blazing fast test runner designed for Vite — along with [Testing Library](https://testing-library.com/) for assertions.
20
+
You’ll use [Vitest](https://vitest.dev) — a blazing fast test runner designed for Vite — along with [Testing Library](https://testing-library.com/) for assertions.
24
21
25
22
---
26
23
@@ -32,7 +29,7 @@ We’ll use [Vitest](https://vitest.dev) — a blazing fast test runner designed
32
29
$ src/App.test.tsx
33
30
```
34
31
35
-
This file uses **Vitest** and **React Testing Library** to verify the behavior of `App` component.
32
+
This file uses Vitest and React Testing Library to verify the behavior of `App` component.
36
33
37
34
### Step 1: Install Vitest and React Testing Library
38
35
@@ -88,7 +85,7 @@ export default defineConfig({
88
85
89
86
### Step 3: Update compose.yaml
90
87
91
-
Add a new service named `react-test` to your `compose.yaml` file.This service allows you to run your test suite in an isolated containerized environment.
88
+
Add a new service named `react-test` to your `compose.yaml` file.This service allows you to run your test suite in an isolated containerized environment.
92
89
93
90
```yaml {hl_lines="22-26",linenos=true}
94
91
services:
@@ -143,7 +140,7 @@ To execute your test suite inside the container, run the following command from
143
140
$ docker compose run --rm react-test
144
141
```
145
142
146
-
**This command will**:
143
+
This command will:
147
144
- Start the `react-test` service defined in your `compose.yaml` file.
148
145
- Execute the `npm run test` script using the same environment as development.
149
146
- Automatically remove the container after the tests complete [`docker compose run --rm`](/engine/reference/commandline/compose_run) command.
@@ -156,10 +153,10 @@ $ docker compose run --rm react-test
156
153
157
154
## Summary
158
155
159
-
In this section, you learned how to run unit tests for your React.js application inside a Docker container using **Vitest** and **Docker Compose**.
156
+
In this section, you learned how to run unit tests for your React.js application inside a Docker container using Vitest and Docker Compose.
160
157
161
-
**What you accomplished:**
162
-
- Installed and configured **Vitest** and **React Testing Library** for testing React components.
158
+
What you accomplished:
159
+
- Installed and configured Vitest and React Testing Library for testing React components.
163
160
- Created a `react-test` service in `compose.yaml` to isolate test execution.
164
161
- Reused the development `Dockerfile.dev` to ensure consistency between dev and test environments.
165
162
- Ran tests inside the container using `docker compose run --rm react-test`.
0 commit comments