Connect a React App to Nginx Reverse Proxy for Node Server with Docker Compose

Learn how to connect a custom React app to an Nginx reverse proxy for a Node server with Docker Compose. We will create the React app from scratch using Webpack and Express. We will also learn how to handle CORS related issues with Nginx.

Become a Better Developer

My Software

Download Code

⌛ Timestamps
0:00 - Introduction
0:12 - Project Demonstration
1:18 - Project Architecture Overview
2:02 - Environment Variable Setup
2:52 - Node Project Initialization and Webpack Installation
4:48 - Configuring Webpack
6:33 - Creating a React App
8:33 - Coding an Express Server
10:25 - Adding Hot Module Replacement to Express
12:03 - Creating a Node Docker Image
12:37 - Configure Nginx as a Reverse Proxy
14:06 - Nginx Reverse Proxy and CORS
16:46 - Creating a Nginx Docker Image
17:03 - node_modules and Docker Issues
18:10 - Creating a Node Service with Docker Compose
18:49 - Creating a Nginx Service with Docker Compose
19:50 - Debugging
20:43 - Project Demonstration and CORS Demonstration
22:20 - Outro

[saurabh]

Bro you're doing great work. Keep this devops kinda things coming 🎉

[habibosaye]

How do you handle downtime when upgrading docker assuming you use a containerized nginx service as a middleman between your other services. Do you think it’s better for nginx to be running on the docker host not as a container?