Multi-Environment React App with NGINX

This project demonstrates how to build a multi-environment React application served by NGINX. It includes a React frontend that fetches environment information from an NGINX server, which dynamically provides the environment based on system variables. This setup allows you to deploy the same React application in different environments (e.g., development, staging, production) with configuration handled by NGINX.

How to Use

Prerequisites

• Node.js and npm installed on your local machine
• Docker installed on your local machine

Running the Application Locally

1. Clone this repository to your local machine:

   git clone https://github.com/AAber/MultiEnvNginxReact.git

2. Navigate to the project directory:

   cd MultiEnvNginxReact

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. Open your web browser and navigate to http://localhost:3000 to view the React application.

Building and Running the Docker Image

1. Build static js code

npm run build

2. Build the Docker image:

docker build -t multienv-nginx-react .

3. Run the Docker container:

   docker run --name staging  -e ENVIRONMENT=staging -d -p 8080:8080 multienv-nginx-react

4. Open your web browser and navigate to http://localhost:8080 to view the React application served by NGINX.

5. Deploy into K8s production:

   kubectl apply -f k8s/deploy.yml

Environment Configuration

The NGINX server dynamically provides environment information to the React application via the /api/environment endpoint. The NGINX configuration reads the $ENVIRONMENT variable from the operating system and includes it in the response header when accessing the endpoint.