Heroku Not Connecting to Mongo Atlas DB? - reactjs

My app won't properly deploy or connect to my Mongo Atlas DB on Heroku. It keeps crashing. The heroku URL just says to do the logs, so here are the command line logs:
Here is what my server.js file looks like:
Here is what my config/keys looks like:
Here is what my keys_prod.js file looks like:
Here is what my keys_dev.js file looks like (redacted username and password), but this is what I have for my config vars in the heroku backend as well
Also took this screenshot, not sure if it matters though:

I didn't set the Heroku config vars correctly. I had set it to mongoURI like it was in the prod.keys JS folder instead of being MONGO_URI like I had declared it. In addition, I had to whitelist all of the ip's in Heroku's settings.

In deployment platforms like heroku, its hard to configure .env . i solved this in my project by using a npm package dotenv. Whatever file need process.env init,use this package
common require.js way :
require('dotenv').config()
its also got some cool options to manage env
here is the link

Related

Hide db property variables Spring Boot Heroku

I have my database set up in heroku and have created my Config Vars to hide my DB credentials. I believe this will all work when my app is deployed, but for development, I'm stuck with an application.properties that looks like :
spring.datasource.url=DB_URL
spring.datasource.username=DB_USERNAME
spring.datasource.password=DB_PASSWORD
Obviously, this will not work when I'm trying to test things.
How can I set it up so that the spring.datasources will have the proper configuration details when I'm developing and testing but then the config vars when pushed to Heroku?
If it helps to see where my head is at, I am used to working with dotenv with Node.js and looking for something similar for java.
Or am I going about this the wrong way? How can I set this up so it will work when deployed on heroku and when I am working on it locally?
Thanks!

How do I use Config Vars in Heroku to get my API key to work?

So I have .env added to my .gitignore and in my .env file I have
REACT_APP_WEATHER_API_KEY=123456
This was a recent add on, I already have this app fully deployed and working on Heroku. Do I just go to settings => Config Vars and add key=REACT_APP_WEATHER_API_KEY and value=123456? How would I go about implementing my API key into Heroku within the settings?
You don't need key= or value=, just set REACT_APP_WEATHER_API_KEY to 123456 directly, either via heroku config:set:
heroku config:set REACT_APP_WEATHER_API_KEY=123456
or the dashboard.
The .env file you're using in development and Heroku's config vars are both just convenient ways of setting environment variables:
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.
As long as you are using the REACT_APP_WEATHER_API_KEY environment variable when your React application builds, or at runtime from your back-end (if you have one), you should be in business.

Pickup config change from Heroku with mars/create-react-app-buildpack

I currently have a create-react-app deployed on my Heroku server, and I'm using the mars/create-react-app-buildpack.
I would like to be able to change the Heroku REACT_APP_ config variables on Heroku, and have them used in the React App.
Right now, they config variables are only picked up once when I call git push heroku master which means I need to redeploy for the config settings to change.
Has someone been able to find a workaround for this?
I found out this is already handled by #mars/create-react-app-buildpack with runtimes configuration variables.
You can use them in your react app as follows: https://github.com/mikehanssen/create-react-app-buildpack#runtime-configuration.

How to set production environment variable in React app? (hosted on Netlify)

I was wondering how I can set environment variable in React to hid my API key?
I am hosting the app on Netlify so I am not sure if that matters. I am able to successfully do it in development but when it gets to production, the api key becomes undefined.
In my .env file when I have:
REACT_APP_API_KEY="my_api_key_etc"
In my app.js I have:
const apiKey = process.env.REACT_APP_API_KEY
when I console.log(apiKey) in development (npm start): it shows my api fine, but when in production mode (npm run build): it shows undefined.
I have already tried to create two more files like .env.development and .env.production and still that didn't work.
Also I made sure my .env files are outside of my src folder.
Do you guys think it has something to do with Netlify?
Thanks in advance!
Ideally you should be setting these variables in your dashboard instead. Head to your Project settings, and add this, and any other variables under environment:

Adding connection strings to a production app

I have an app ready for production. For it to work, each client needs to set a unique url to access their data. How would i prepare the app for making it easy to add a url as an access point to the clients?
Would a correct way to do this be to add it in the manifest.json file and somehow reference it from there? (Until now in development i've only used a global URL in a js file)
You need to install the package dotenv package and create a .env file in your root directory which should contain your environment variables.
Assuming that the URl you are referring to is http://localhost:3000/some/url on your localhost, then your .env file might look like:
MY_URL=http://localhost:3000/some/url
Then in your react application, you can get the value of MY_URL by doing:
const url = process.env.MY_URL
Note that if you are using the create-react-app package, then you do not need to install the dotenv package since it already comes with the create-react-app package. Also you need to change it:
REACT_APP_MY_URL=http://localhost:3000/some/url
Also make sure to add the .env file to your .gitignore file so that you do not push it to your repo.
Assuming that you are deploying your application to Heroku. Heroku provides a simple interface which allows you to add your environment variables which looks like:
That's it.
Maybe you could store them in environment variables?
that way you can always edit them later without having to change components.

Resources