I have a situation where I am running a React App with PHP to generate Dynamic Pages for search engines.

$ cp .env .env.production

The challenge was using different URL enpoints. For example:

DEVELOPMENT:

In development, I needed to use the URL for a blog page as: http://localhost:5173/chat-box-hovering-icon-test

PRODUCTION:

When I build the dist/ package with $npm run build I needed to use http://forums-react.test/chat-box-hovering-icon-test.html

SOLUTION:

Create two .env files:

  • .env [For Development]
  • .env.production [For Production] ($npm run build)

Resource:

https://vitejs.dev/guide/env-and-mode#modes