Skip to content

Commit a3b62b0

Browse files
[fix] Fix linting issues and bold texts.
1 parent 5391491 commit a3b62b0

File tree

6 files changed

+48
-59
lines changed

6 files changed

+48
-59
lines changed

content/guides/reactjs/_index.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,10 @@ summary: |
77
This guide explains how to containerize React.js applications using Docker.
88
toc_min: 1
99
toc_max: 2
10-
aliases:
11-
- /language/reactjs/
12-
- /guides/language/reactjs/
1310
languages: [js]
1411
params:
1512
time: 20 minutes
13+
1614
---
1715

1816
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.

content/guides/reactjs/configure-ci-cd.md

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ linkTitle: Configure CI/CD
44
weight: 50
55
keywords: CI/CD, GitHub( Actions), React.js, Next.js
66
description: Learn how to configure CI/CD using GitHub Actions for your React.js application.
7-
aliases:
8-
- /language/react.js/configure-ci-cd/
9-
- /guides/language/react.js/configure-ci-cd/
7+
108
---
119

1210
## Prerequisites
@@ -37,11 +35,11 @@ To enable GitHub Actions to build and push Docker images, you’ll securely stor
3735

3836
### Step 1: Connect your GitHub repository to Docker Hub
3937

40-
1. **Create a Personal Access Token (PAT) from [Docker Hub](https://hub.docker.com)**
41-
- Go to your **Docker Hub account → Account Settings → Security**.
42-
- Generate a new Access Token with **Read/Write** permissions.
43-
- Name it something like `docker-reactjs-sample`.
44-
- Copy and save the token — you’ll need it in Step 4.
38+
Create a Personal Access Token (PAT) from [Docker Hub](https://hub.docker.com)
39+
1. Go to your **Docker Hub account → Account Settings → Security**.
40+
2. Generate a new Access Token with **Read/Write** permissions.
41+
3. Name it something like `docker-reactjs-sample`.
42+
4. Copy and save the token — you’ll need it in Step 4.
4543

4644
2. **Create a repository in [Docker Hub](https://hub.docker.com/repositories/)**
4745
1. Go to your **Docker Hub account → Create a repository**.

content/guides/reactjs/containerize.md

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ linkTitle: Containerize
44
weight: 10
55
keywords: react.js, node, image, initialize, build
66
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+
88
---
99

1010

@@ -27,10 +27,10 @@ This guide walks you through the complete process of containerizing a React.js a
2727
By the end of this guide, you will:
2828

2929
- 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.
3434

3535
---
3636

@@ -104,11 +104,11 @@ The default Dockerfile generated by `docker init` serves as a solid starting poi
104104

105105
### Step 1: Review the generated files
106106

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:
108108

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
112112

113113
These updates help ensure your app is easy to deploy, fast to load, and production-ready.
114114

@@ -312,7 +312,7 @@ http {
312312

313313
With your custom configuration in place, you're now ready to build the Docker image for your React.js application.
314314

315-
**The updated setup includes**:
315+
The updated setup includes:
316316

317317
- Optimized browser caching and gzip compression
318318
- Secure, non-root logging to avoid permission issues
@@ -340,7 +340,7 @@ Run the following command from the root of your project:
340340
$ docker build --tag docker-reactjs-sample .
341341
```
342342

343-
**What this command does:**
343+
What this command does:
344344
- Uses the Dockerfile in the current directory (.)
345345
- Packages the application and its dependencies into a Docker image
346346
- Tags the image as docker-reactjs-sample so you can reference it later
@@ -363,7 +363,7 @@ REPOSITORY TAG IMAGE ID CREATED SIZE
363363
docker-reactjs-sample latest f39b47a97156 14 seconds ago 75.8MB
364364
```
365365

366-
**This output provides key details about your images:**
366+
This output provides key details about your images:
367367

368368
- **Repository** – The name assigned to the image.
369369
- **Tag** – A version label that helps identify different builds (e.g., latest).
@@ -389,6 +389,7 @@ $ docker compose up --build
389389

390390
Open a browser and view the application at [http://localhost:8080](http://localhost:8080). You should see a simple React.js web application.
391391

392+
Press `ctrl+c` in the terminal to stop your application.
392393

393394
### Run the application in the background
394395

@@ -436,14 +437,14 @@ $ docker compose down
436437

437438
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.
438439

439-
**What you accomplished:**
440+
What you accomplished:
440441
- Initialized your project using `docker init` to scaffold essential Docker configuration files.
441442
- Replaced the default `Dockerfile` with a **multi-stage build** that compiles the React.js application and serves the static files using **Nginx**.
442443
- 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**.
445446
- 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`.
447448

448449
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.
449450

@@ -468,5 +469,5 @@ Explore official references and best practices to sharpen your Docker workflow:
468469

469470
With your React.js application now containerized, you're ready to move on to the next step.
470471

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.
472473

content/guides/reactjs/deploy.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ linkTitle: Test your deployment
44
weight: 50
55
keywords: deploy, kubernetes, react, react.js
66
description: Learn how to deploy locally to test and debug your Kubernetes deployment
7-
aliases:
8-
- /language/reactjs/deploy/
9-
- /guides/language/reactjs/deploy/
7+
108
---
119

1210
## Prerequisites

content/guides/reactjs/develop.md

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ linkTitle: Develop your app
44
weight: 30
55
keywords: react.js, development, node
66
description: Learn how to develop your React.js application locally using containers.
7-
aliases:
8-
- /get-started/react.js/develop/
9-
- /language/react.js/develop/
10-
- /guides/language/react.js/develop/
7+
118
---
129

1310
## Prerequisites
@@ -20,16 +17,16 @@ Complete [Containerize React.js application](containerize.md).
2017

2118
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.
2219

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
2623
- Debug and live-preview your changes in real-time without manual rebuilds
2724

2825
---
2926

3027
## Automatically update services (Development Mode)
3128

32-
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.
3330

3431
## Step 1: Create a development Dockerfile
3532

@@ -156,24 +153,24 @@ $ docker compose watch react-dev
156153

157154
### Step 5: Test Compose Watch with React
158155

159-
To verify that **Compose Watch** is working correctly:
156+
To verify that Compose Watch is working correctly:
160157

161-
1.Open the `src/App.tsx` file in your text editor.
158+
1. Open the `src/App.tsx` file in your text editor.
162159

163-
2.Locate the following line:
160+
2. Locate the following line:
164161

165162
```html
166163
<h1>Vite + React</h1>
167164
```
168165

169-
3.Change it to:
166+
3. Change it to:
170167
```html
171168
<h1>Hello from Docker Compose Watch</h1>
172169
```
173170

174-
4.Save the file.
171+
4. Save the file.
175172

176-
5.Open your browser at [http://localhost:5173](http://localhost:5173).
173+
5. Open your browser at [http://localhost:5173](http://localhost:5173).
177174

178175
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.
179176

@@ -183,10 +180,10 @@ You should see the updated text appear instantly, without needing to rebuild the
183180

184181
In this section, you set up a complete development and production workflow for your React.js application using Docker and Docker Compose.
185182

186-
**Here's what you achieved:**
183+
Here's what you achieved:
187184
- Created a `Dockerfile.dev` to streamline local development with hot reloading
188185
- 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
190187
- Verified that live updates work seamlessly by modifying and previewing a component
191188

192189
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.

content/guides/reactjs/run-tests.md

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ linkTitle: Run your tests
44
weight: 30
55
keywords: react.js, react, test, vitest
66
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/
107
---
118

129
## Prerequisites
@@ -17,10 +14,10 @@ Complete all the previous sections of this guide, starting with [Containerize Re
1714

1815
Testing is a critical part of the development process. In this section, you'll learn how to:
1916

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.
2219

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.
2421

2522
---
2623

@@ -32,7 +29,7 @@ We’ll use [Vitest](https://vitest.dev) — a blazing fast test runner designed
3229
$ src/App.test.tsx
3330
```
3431

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.
3633

3734
### Step 1: Install Vitest and React Testing Library
3835

@@ -88,7 +85,7 @@ export default defineConfig({
8885
8986
### Step 3: Update compose.yaml
9087

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.
9289

9390
```yaml {hl_lines="22-26",linenos=true}
9491
services:
@@ -143,7 +140,7 @@ To execute your test suite inside the container, run the following command from
143140
$ docker compose run --rm react-test
144141
```
145142

146-
**This command will**:
143+
This command will:
147144
- Start the `react-test` service defined in your `compose.yaml` file.
148145
- Execute the `npm run test` script using the same environment as development.
149146
- 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
156153

157154
## Summary
158155

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.
160157

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.
163160
- Created a `react-test` service in `compose.yaml` to isolate test execution.
164161
- Reused the development `Dockerfile.dev` to ensure consistency between dev and test environments.
165162
- Ran tests inside the container using `docker compose run --rm react-test`.

0 commit comments

Comments
 (0)