Summary, Accomplishments, Resources, and Next Steps for Containerizing a React.js App with Docker

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. 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. - 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`. 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. --- ## Related resources Explore official references and best practices to sharpen your Docker workflow: - [Multi-stage builds](/build/building/multi-stage/) – Learn how to separate build and runtime stages. - [Best practices for writing Dockerfiles](/develop/develop-images/dockerfile_best-practices/) – Write efficient, maintainable, and secure Dockerfiles. - [Build context in Docker](/build/concepts/context/) – Learn how context affects image builds. - [`docker init` CLI reference](/reference/cli/docker/init/) – Scaffold Docker assets automatically. - [`docker build` CLI reference](/reference/cli/docker/build/) – Build Docker images from a Dockerfile. - [`docker images` CLI reference](/reference/cli/docker/images/) – Manage and inspect local Docker images. - [`docker compose up` CLI reference](/reference/cli/docker/compose/up/) – Start and run multi-container applications. - [`docker compose down` CLI reference](/reference/cli/docker/compose/down/) – Stop and remove containers, networks, and volumes. --- ## Next steps 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.

This section summarizes the guide's content, detailing how to containerize, build, and run a React.js application using Docker. It highlights key accomplishments such as using `docker init`, creating a multi-stage Dockerfile with Nginx, using `.dockerignore` for efficiency, building the image with `docker build`, running the container in different modes using `docker compose up`, verifying the app at localhost:8080, and stopping it with `docker compose down`. It also provides a list of related resources for further learning about Docker, including multi-stage builds, Dockerfile best practices, build context, and Docker CLI references. Finally, it introduces the next step: developing the application using Docker containers for a consistent development environment.