Running and Managing the Containerized React.js Application

docker-reactjs-sample latest f39b47a97156 14 seconds ago 75.8MB ``` 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). - **Image ID** – A unique identifier for the image. - **Created** – The timestamp indicating when the image was built. - **Size** – The total disk space used by the image. If the build was successful, you should see `docker-reactjs-sample` image listed. --- ## Run the containerized application In the previous step, you created a Dockerfile for your React.js application and built a Docker image using the docker build command. Now it’s time to run that image in a container and verify that your application works as expected. Inside the `docker-reactjs-sample` directory, run the following command in a terminal. ```console $ 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 You can run the application detached from the terminal by adding the `-d` option. Inside the `docker-reactjs-sample` directory, run the following command in a terminal. ```console $ docker compose up --build -d ``` Open a browser and view the application at [http://localhost:8080](http://localhost:8080). You should see a simple web application preview. To confirm that the container is running, use `docker ps` command: ```console $ docker ps ``` This will list all active containers along with their ports, names, and status. Look for a container exposing port 8080. Example Output: ```shell CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 88bced6ade95 docker-reactjs-sample-server "nginx -c /etc/nginx…" About a minute ago Up About a minute 0.0.0.0:8080->8080/tcp docker-reactjs-sample-server-1 ``` To stop the application, run: ```console $ docker compose down ``` > [!NOTE] > For more information about Compose commands, see the [Compose CLI > reference](/reference/cli/docker/compose/_index.md). --- ## Summary 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.

The guide explains how to run a React.js application in a Docker container, both in the foreground and background (detached mode). It covers using `docker compose up --build` and `docker compose up --build -d` to start the application, verifying its status with `docker ps`, and stopping it with `docker compose down`. The guide emphasizes the importance of creating a secure, optimized, and production-ready setup for React.js applications using Docker.