Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
6049f5b
[feat] initial commit for react.js application guide; added build-ima…
kris-velkov Feb 27, 2025
932b344
[fix] fix minor issues flagged by Vale bot
kristiyan-velkov Apr 11, 2025
7526335
Update content/guides/reactjs/_index.md
kristiyan-velkov Apr 18, 2025
abd017d
Update content/guides/reactjs/containerize.md
kristiyan-velkov Apr 18, 2025
27ad67a
Update content/guides/reactjs/containerize.md
kristiyan-velkov Apr 18, 2025
8c4226f
Update content/guides/reactjs/containerize.md
kristiyan-velkov Apr 18, 2025
5f20010
Update content/guides/reactjs/containerize.md
kristiyan-velkov Apr 18, 2025
bde3429
Update content/guides/reactjs/deploy.md
kristiyan-velkov Apr 18, 2025
933a10e
Update content/guides/reactjs/deploy.md
kristiyan-velkov Apr 18, 2025
bdd1874
Update content/guides/reactjs/deploy.md
kristiyan-velkov Apr 18, 2025
d0d66cd
Update content/guides/reactjs/deploy.md
kristiyan-velkov Apr 18, 2025
6220962
Update content/guides/reactjs/deploy.md
kristiyan-velkov Apr 18, 2025
1212708
Update content/guides/reactjs/containerize.md
kristiyan-velkov Apr 18, 2025
852eaa1
Update content/guides/reactjs/containerize.md
kristiyan-velkov Apr 18, 2025
5391491
Update content/guides/reactjs/configure-ci-cd.md
kristiyan-velkov Apr 18, 2025
a3b62b0
[fix] Fix linting issues and bold texts.
kristiyan-velkov Apr 18, 2025
2f4e9fb
[fix] Fix linting issues and some bold text issues
kristiyan-velkov Apr 18, 2025
3bd8fc6
[fix] linting issues and improve the structure of the files.
kristiyan-velkov Apr 18, 2025
59ef47f
[feat] added linting improvements to develop file
kristiyan-velkov Apr 23, 2025
771fd65
[fix] FIx indent issue in develop.md file
kristiyan-velkov Apr 24, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[fix] Fix linting issues and bold texts.
  • Loading branch information
kristiyan-velkov committed Apr 18, 2025
commit a3b62b0054b242d802a93005742be72a9472239d
4 changes: 1 addition & 3 deletions content/guides/reactjs/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,10 @@ summary: |
This guide explains how to containerize React.js applications using Docker.
toc_min: 1
toc_max: 2
aliases:
- /language/reactjs/
- /guides/language/reactjs/
languages: [js]
params:
time: 20 minutes

---

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.
Expand Down
14 changes: 6 additions & 8 deletions content/guides/reactjs/configure-ci-cd.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ linkTitle: Configure CI/CD
weight: 50
keywords: CI/CD, GitHub( Actions), React.js, Next.js
description: Learn how to configure CI/CD using GitHub Actions for your React.js application.
aliases:
- /language/react.js/configure-ci-cd/
- /guides/language/react.js/configure-ci-cd/

---

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

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

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

2. **Create a repository in [Docker Hub](https://hub.docker.com/repositories/)**
1. Go to your **Docker Hub account → Create a repository**.
Expand Down
35 changes: 18 additions & 17 deletions content/guides/reactjs/containerize.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ linkTitle: Containerize
weight: 10
keywords: react.js, node, image, initialize, build
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.
- /language/react.js/run-containers/

---


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

- Containerize a React.js application using Docker.
- Create and optimize a **Dockerfile** for production builds.
- Use **multi-stage builds** to minimize image size.
- Serve the application efficiently with a custom **NGINX configuration**.
- Follow **best practices** for building secure and maintainable Docker images.
- Create and optimize a Dockerfile for production builds.
- Use multi-stage builds to minimize image size.
- Serve the application efficiently with a custom NGINX configuration.
- Follow best practices for building secure and maintainable Docker images.

---

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

### Step 1: Review the generated files

In this step, we’ll improve the Dockerfile and configuration files by following best practices:
In this step, you’ll improve the Dockerfile and configuration files by following best practices:

- Use **multi-stage builds** to keep the final image clean and small
- Serve the app using **NGINX**, a fast and secure web server
- Improve **performance** and **security** by only including what’s needed
- Use multi-stage builds to keep the final image clean and small
- Serve the app using NGINX, a fast and secure web server
- Improve performance and security by only including what’s needed

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

Expand Down Expand Up @@ -312,7 +312,7 @@ http {

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

**The updated setup includes**:
The updated setup includes:

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

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

**This output provides key details about your images:**
This output provides key details about your images:

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

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

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

### Run the application in the background

Expand Down Expand Up @@ -436,14 +437,14 @@ $ docker compose down

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.

**What you accomplished:**
What you accomplished:
- Initialized your project using `docker init` to scaffold essential Docker configuration files.
- Replaced the default `Dockerfile` with a **multi-stage build** that compiles the React.js application and serves the static files using **Nginx**.
- Replaced the default `.dockerignore` file to exclude unnecessary files and keep the image clean and efficient.
- **Built your Docker image** using `docker build`.
- **Ran the container** using `docker compose up`, both in the foreground and in **detached mode**.
- Built your Docker image using `docker build`.
- Ran the container using `docker compose up`, both in the foreground and in **detached mode**.
- Verified that the app was running by visiting [http://localhost:8080](http://localhost:8080).
- Learned how to **stop the containerized application** using `docker compose down`.
- Learned how to stop the containerized application using `docker compose down`.

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.

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

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

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

4 changes: 1 addition & 3 deletions content/guides/reactjs/deploy.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ linkTitle: Test your deployment
weight: 50
keywords: deploy, kubernetes, react, react.js
description: Learn how to deploy locally to test and debug your Kubernetes deployment
aliases:
- /language/reactjs/deploy/
- /guides/language/reactjs/deploy/

---

## Prerequisites
Expand Down
29 changes: 13 additions & 16 deletions content/guides/reactjs/develop.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@ linkTitle: Develop your app
weight: 30
keywords: react.js, development, node
description: Learn how to develop your React.js application locally using containers.
aliases:
- /get-started/react.js/develop/
- /language/react.js/develop/
- /guides/language/react.js/develop/

---

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

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.

**You’ll learn how to:**
- Configure separate containers for **production** and **development**
- Enable automatic file syncing using **Compose Watch** in development
You’ll learn how to:
- Configure separate containers for production and development
- Enable automatic file syncing using Compose Watch in development
- Debug and live-preview your changes in real-time without manual rebuilds

---

## Automatically update services (Development Mode)

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

## Step 1: Create a development Dockerfile

Expand Down Expand Up @@ -156,24 +153,24 @@ $ docker compose watch react-dev

### Step 5: Test Compose Watch with React

To verify that **Compose Watch** is working correctly:
To verify that Compose Watch is working correctly:

1.Open the `src/App.tsx` file in your text editor.
1. Open the `src/App.tsx` file in your text editor.

2.Locate the following line:
2. Locate the following line:

```html
<h1>Vite + React</h1>
```

3.Change it to:
3. Change it to:
```html
<h1>Hello from Docker Compose Watch</h1>
```

4.Save the file.
4. Save the file.

5.Open your browser at [http://localhost:5173](http://localhost:5173).
5. Open your browser at [http://localhost:5173](http://localhost:5173).

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.

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

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

**Here's what you achieved:**
Here's what you achieved:
- Created a `Dockerfile.dev` to streamline local development with hot reloading
- Defined separate `react-dev` and `react-prod` services in your `compose.yaml` file
- Enabled real-time file syncing using **Compose Watch** for a smoother development experience
- Enabled real-time file syncing using Compose Watch for a smoother development experience
- Verified that live updates work seamlessly by modifying and previewing a component

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.
Expand Down
21 changes: 9 additions & 12 deletions content/guides/reactjs/run-tests.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ linkTitle: Run your tests
weight: 30
keywords: react.js, react, test, vitest
description: Learn how to run your React.js tests in a container.
aliases:
- /language/reactjs/run-tests/
- /guides/language/reactjs/run-tests/
---

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

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

- Run unit tests using **Vitest** inside a Docker container.
- Use **Docker Compose** to run tests in an isolated, reproducible environment.
- Run unit tests using Vitest inside a Docker container.
- Use Docker Compose to run tests in an isolated, reproducible environment.

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

---

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

This file uses **Vitest** and **React Testing Library** to verify the behavior of `App` component.
This file uses Vitest and React Testing Library to verify the behavior of `App` component.

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

Expand Down Expand Up @@ -88,7 +85,7 @@ export default defineConfig({

### Step 3: Update compose.yaml

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

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

**This command will**:
This command will:
- Start the `react-test` service defined in your `compose.yaml` file.
- Execute the `npm run test` script using the same environment as development.
- Automatically remove the container after the tests complete [`docker compose run --rm`](/engine/reference/commandline/compose_run) command.
Expand All @@ -156,10 +153,10 @@ $ docker compose run --rm react-test

## Summary

In this section, you learned how to run unit tests for your React.js application inside a Docker container using **Vitest** and **Docker Compose**.
In this section, you learned how to run unit tests for your React.js application inside a Docker container using Vitest and Docker Compose.

**What you accomplished:**
- Installed and configured **Vitest** and **React Testing Library** for testing React components.
What you accomplished:
- Installed and configured Vitest and React Testing Library for testing React components.
- Created a `react-test` service in `compose.yaml` to isolate test execution.
- Reused the development `Dockerfile.dev` to ensure consistency between dev and test environments.
- Ran tests inside the container using `docker compose run --rm react-test`.
Expand Down