I'm using heroku to deploy a nodejs backend, and amazon s3 to deploy the static files of a react app, so the frontend stored on an s3 bucket makes requests to the heroku backend.
Once I finished creating my staging environment for heroku, I just needed to create a new bucket and hook up the new url so the staging frontend can correctly make requests to the staging backend, I ended up with something like this on my react app:
// index.js
let BASE_API_URL;
if (process.env.NODE_ENV === "production") {
BASE_API_URL = "https://myproductionapiurl.com";
else if (process.env.NODE_ENV === "staging") {
BASE_API_URL = "https://mystagingapiurl.s3-website.us-east-2.amazonaws.com";
} else {
BASE_API_URL = "https://someotherurl.com";
}
axios.defaults.baseURL = BASE_API_URL;
But then I noticed that s3, being a service to save your static files, doesn't have a way to set environment variables, so I can't specify based on process.env.NODE_ENV to what url to make the requests, and I got stuck.
Right now I'm just hard coding the url so it works, but once I try to merge the staging and production environments a git conflict will always appear, is there any way I can do this using amazon s3 buckets and react?
Thanks to #jonrsharpe I was able to get it working, since I'm using react, instead of using NODE_ENV (which cannot be overwritten) I used REACT_APP_ENV, and I set it as an environment variable before running the build:
REACT_APP_ENV=staging npm run build
Related
My question is regarding setting different API_ENDPOINTS for different environments(test/dev/staging/production) React App that is running in a Kubernetes container.
For dev environment API_ENDPOINT = 'https://dev-cluster.api/endpoint'
For test environment API_ENDPOINT = 'https://test-cluster.api/endpoint'
For staging environment API_ENDPOINT = 'https://staging-cluster.api/endpoint'
etc
Should I be creating a dynamic .env file from environment specific(each environment is on a different cluster) ConfigMaps and then accessing the api endpoint as process.env.API_ENDPOINT?
If so, how to do that?
Or is there any way for the react app to directly access the ConfigMap? Or any other suggestions?
React App is created using CRA
I'm trying to deploy my Gatsby app with auth0 to Heroku, but it doesn't work like on localhost.
I have the auth0 config in my .env file and all required URLs added to the auth0 dashboard.
To deploy it I added the regarding production URLs in the auth0 dashboard and set the environment variables in Heroku. I tried both AUTH0_CALLBACK and GATSBY_AUTH0_CALLBACK (for client-side availability), but both didn't work.
To see whether the environment variables are available I added this process.env... and on localhost, I can see the variable content here, on the Heroku version there is nothing.
const Account = () => {
if (!isAuthenticated()) {
login()
return <p>Redirecting to login... {process.env.AUTH0_DOMAIN}</p>
}
Does anybody have an idea how to make the environment variables accessible?
see Heroku config vars - https://devcenter.heroku.com/articles/config-vars - you can set these using either the Heroku CLI or Dashboard.
Config vars are exposed to your app’s code as environment variables. For example, in Node.js you can access your app’s DATABASE_URL config var with process.env.DATABASE_URL.
I have an app with django backend and react frontend. When testing and coding i run my django app on local server 127.0.0.1:8000 and connecting all my react requests to those endpoints. However in production my django app run on a different ip address and everytime i changed my code and push my reactjs app to production server i have to change all the endpoints ip's.
What is the best way to handle it? (as a source control i use git i do not know if it makes any differences)
I set the axios.defaults.baseURL depending on the window.location.origin. Here is my setting:
if (window.location.origin === "http://localhost:3000") {
axios.defaults.baseURL = "http://127.0.0.1:8000";
} else {
axios.defaults.baseURL = window.location.origin;
}
The above config is from my article Docker-Compose for Django and React with Nginx reverse-proxy and Let's Encrypt certificate. I'm serving React with nginx, and have reverse-proxy to Django (also in nginx), that's why for production setting I'm just using the same address. In the case of development, I have REST API at 127.0.0.1:8000.
I prefer this dynamic setting than settin env files because I don't need to set any environment variables.
I am having trouble understanding the concept of static and dynamic sites within the context of a React app. I am reading about how you can deploy React apps to Netlify which is known for hosting static sites. But all the React apps I've made make requests to Node/Express backends and shows the data that gets returned from them. I'm pretty sure that would make my React apps dynamic. Does this mean that I wouldn't be able to deploy them to Netlify?
You would be able to host the frontend part on Netlify that makes request to a backend elsewhere. But you won't be able to host the backend on Netlify, unless you convert it into serverless functions.
let api = ""
if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
//production
API = "https://project-sprint.herokuapp.com";
} else {
//development
API = "http://localhost:3001";
}
/
/ after i concat endpoint complement with this base, then no problem when i deploy
I'm trying to figure out what are the best practices to deploy a React app that consumes an API on a different host in production.
Currently in DEV I have the following:
frontend - React app running on webpack server: http://localhost:3000/
backend - API (django-rest) running on: http://localhost:7000/
Right now I define the API url in package.json proxy attribute: "proxy": "http://localhost:7000/", and I make API calls using Axios to api/something/something/ etc.
Both apps are standalone with separate repos and I'd like to keep it that way (I don't want to merge both apps into a single codebase.)
My question:
What is the best way to configure React in production to consume the production URL?
Use process.env.NODE_ENV to find out the current environment and assign the proper url to your base url constant.
In development, you will get process.env.NODE_ENV as "development" and in production, you will get process.env.NODE_ENV as "production".