How to set environment variables.

set_environment variables.md

Setting environment variables can be slightly different depending on your production environment and platform (e.g., Linux server, Vercel, AWS, etc.). However, I'll guide you through a general approach and provide some platform-specific examples.

General Approach: Linux Server

If you're deploying your React app on a basic Linux server, you can set environment variables in various ways:

1. Directly in Your Session: When you SSH into your server, you can set an environment variable that lasts for the duration of the session.

   export REACT_APP_API_URL="https://yourapiurl.com"

   Then, when you run your app from the same session, it should have access to that variable.

2. Permanently for a User: You can add the export line to a user's profile script (like ~/.bashrc or ~/.bash_profile), so it's set every time you log in.

   echo 'export REACT_APP_API_URL="https://yourapiurl.com"' >> ~/.bashrc
   source ~/.bashrc

Platform-Specific Approaches:

• Vercel: You can set environment variables directly in the Vercel dashboard.

  1. Navigate to your project.
  2. Go to the "Settings" tab.
  3. Under the "Environment Variables" section, you can add REACT_APP_API_URL and its value.

• Netlify: Similar to Vercel, Netlify allows you to set environment variables through the dashboard.

  1. Go to "Site settings".
  2. Then "Build & deploy".
  3. Find the "Environment" section, where you can set REACT_APP_API_URL.

• Heroku: If you’re using Heroku, you can set environment variables (Config Vars) via the dashboard under your app's "Settings" tab or via the Heroku CLI:

  heroku config:set REACT_APP_API_URL="https://yourapiurl.com" -a your-app-name

• AWS Amplify: AWS Amplify allows you to set environment variables through the AWS Management Console.

  1. Open the Amplify Console.
  2. Navigate to “App settings > Environment variables”.
  3. Add REACT_APP_API_URL and its value.

Note:

When your React app is built using npm run build, it creates a static build where all your environment variables are embedded and replaced as static strings. So, you need to rebuild your React app every time you change an environment variable for the changes to take effect in the app.

Ensure you don’t embed sensitive information in your React app, even through environment variables, as the built app is entirely client-side and exposes them to users. Always keep sensitive information on the server side and ensure secure communication via HTTPS.

Lastly, ensure you test the application thoroughly in a staging environment that mimics production to ensure that the environment variables are being applied correctly and your app behaves as expected.