docs: added a guide for Dockerized React.js 19 application #22375
+1,442
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ge documentation [feat] imrpove build images section [feat] updated the containerize react.js guide [feat] added documentation for how to develop and test react.js application [feat] added files for deploy, ci/cd [feat] added page ci-cd [feat] added deployment documentation for React.js application [feat] improve the react.js guide [feat] improve react.hs documentation to follow the same strcuture
✅ Deploy Preview for docsdocker ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
kristiyan-velkov
changed the title
craig-osterhout
requested changes
Apr 17, 2025
There was a problem hiding this comment.
Thanks @kristiyan-velkov. It looks great. I really like the formatting you did for the docker init command. I'm going to steal that for the other guides.
I left a lot of petty style nits. You can refer to the style guide or let me know if any questions. The biggest offender was bolding. Typically, we only use it for UI text.
|
|
||
| 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. | ||
|
|
||
| [React.js](https://react.dev/) is a widely used library for building interactive user interfaces. However, managing dependencies, environments, and deployments efficiently can be complex. **Docker** simplifies this process by providing a consistent and containerized environment. |
There was a problem hiding this comment.
Suggested change
| [React.js](https://react.dev/) is a widely used library for building interactive user interfaces. However, managing dependencies, environments, and deployments efficiently can be complex. **Docker** simplifies this process by providing a consistent and containerized environment. | |
| [React.js](https://react.dev/) is a widely used library for building interactive user interfaces. However, managing dependencies, environments, and deployments efficiently can be complex. Docker simplifies this process by providing a consistent and containerized environment. |
| --- | ||
| title: Containerize a React.js Application | ||
| linkTitle: Containerize | ||
| weight: 50 |
There was a problem hiding this comment.
Suggested change
| weight: 50 | |
| weight: 10 |
| weight: 50 | ||
| 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. | ||
| aliases: |
There was a problem hiding this comment.
Suggested change
| aliases: |
| 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. | ||
| aliases: | ||
| - /language/react.js/build-images/ |
There was a problem hiding this comment.
Suggested change
| - /language/react.js/build-images/ |
| aliases: | ||
| - /language/react.js/build-images/ | ||
| - /language/react.js/run-containers/ | ||
| - /language/react.js/containerize/ |
There was a problem hiding this comment.
Suggested change
| - /language/react.js/containerize/ |
|
|
||
| **This manifest defines two key Kubernetes resources, separated by `---`**: | ||
|
|
||
| - **Deployment** |
There was a problem hiding this comment.
Suggested change
| - **Deployment** | |
| - Deployment |
| (refer to [Configure CI/CD for your React.js application](configure-ci-cd.md)). | ||
| The container listens on port `8080`, which is typically used by [Nginx](https://nginx.org/en/docs/) to serve your production React app. | ||
|
|
||
| - **Service (NodePort)** |
There was a problem hiding this comment.
Suggested change
| - **Service (NodePort)** | |
| - Service (NodePort) |
|
|
||
| This output confirms that your app is available via NodePort on port 30001. | ||
|
|
||
| ### Step 4.Access your app in the browser |
There was a problem hiding this comment.
Suggested change
| ### Step 4.Access your app in the browser | |
| ### Step 4. Access your app in the browser |
|
|
||
| ## Summary | ||
|
|
||
| In this section, you learned how to deploy your **React.js application** to a local Kubernetes cluster using **Docker Desktop**. This setup allows you to test and debug your containerized app in a production-like environment before deploying it to the cloud. |
There was a problem hiding this comment.
Suggested change
| In this section, you learned how to deploy your **React.js application** to a local Kubernetes cluster using **Docker Desktop**. This setup allows you to test and debug your containerized app in a production-like environment before deploying it to the cloud. | |
| In this section, you learned how to deploy your React.js application to a local Kubernetes cluster using Docker Desktop. This setup allows you to test and debug your containerized app in a production-like environment before deploying it to the cloud. |
|
|
||
| In this section, you learned how to deploy your **React.js application** to a local Kubernetes cluster using **Docker Desktop**. This setup allows you to test and debug your containerized app in a production-like environment before deploying it to the cloud. | ||
|
|
||
| **What you accomplished:** |
There was a problem hiding this comment.
Suggested change
| **What you accomplished:** | |
| What you accomplished: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR introduces a comprehensive, language-specific guide for containerizing React.js applications using Docker, aimed at helping developers streamline development, testing, and deployment workflows. It includes practical steps and examples to set up CI/CD pipelines using GitHub Actions, aligning with modern DevOps best practices.
What’s Included
Credits
Krisityan Velkov, Docker Captain and experienced Front-end Engineer.