I am having problems getting Heroku to recognize my api keys that I have gitignored on my React app.
I have created credentials.js with my api keys and exported it.
export const API_KEY = 'redacted';
Then I listed credentials.js in gitignore.
credentials.js
I then imported API_KEY into my project file.
import { API_KEY } from '../credentials.js';
This works fine in development but when I push to Heroku, it fails to resolve the path to credentials and the compile fails since it's in a gitignored file. I have also tried using a .env file, but that does not work either.
I have tried not importing it and just running the Heroku "config set" command in the terminal, but to no avail.
$heroku config:set API_KEY=<key>
Also the issue is importing the API_KEY gitignored variable in the index.html file. How do you do this in a React app like you can do with application.yml file in rails and referencing it with #{ENV[API_KEY]}?
Does anyone have a tried and tested solution?
As you have already set the API_KEY on Heroku env using the command you mentioned, in order to use it you need to do something like:
const API_KEY = process.env.API_KEY;
This way you'll be able to read from Heroku env. You can see more info here.
Related
I would like to know if it is possible to alter all the api calls made from my react app to my backend server. I used to have the static files to sit around in my project root directory, so when I made an api call with axios like await axios.get('/api/my-endpoint') it all worked fine and my requests were translated to GET https://www.example-url.com/api/my-endpoint. But now I am migrating to AWS EC2 and decided to serve static files from AWS S3. So now since the api is in a remote server all my api calls are broken. I need to replace all api calls to https://www.another-example-url.com/api/.... I know I can set the new URL in an environment variable, but that would force me to manually alter all of the api URLs in my front-end codebase. I would not be very happy to do this, since there are almost a thousand of them.
I tried to set the axios baseURL like so:
import axios from "axios";
const instance = axios.create({
baseURL: "www.another-example-url.com"
});
export default instance;
but then all the requests were translated to GET https://www.example-url.com/www.another-example-url.com/api/my-endpoint
Is there a lazy way of doing this? Or do I have to manually alter them all?
You can easily set this using "proxy" field in package.json file of client side. Just add following line
...
"proxy": "https://www.another-example-url.com",
...
edit: I almost forgot that you were asking for production build. So react-amazing-proxy is an alternate to create-react-app proxy which can have feature to use proxy in production build.
Another lazy way, if you are familiar with docker, would be to Dockerize your development built.
Hello guys may you help me?
I'm trying to configure my fake API to create some personal projects but in my case, the method using the /pages/api folder only works for me in localhost when I deploy to the server on Vercel the project can't find my endpoints.
In my case I'm using the src/ folder method to develop my app and I don't know if this structure can cause problems with api folder.
One thing that I tried and worked is deploying to vercel using the api folder at the root of the application (out of /src folder) but the api stop working on localhost.
This structure works on localhost but doesn't work on server:
├───public/
├───src/
├───api/
├───pages/
...
next.config.js
package.json
This structure works on server but doesn't work on localhost:
├───api/
├───public/
├───src/
├───pages/
...
next.config.js
package.json
This is the method that I'm using to get data:
AXIOS API:
import axios from 'axios'
const api = axios.create({
baseURL: '/api/'
})
export default api
SWR HOOK:
import api from 'src/services/api'
import useSWR from 'swr'
function SwrFetchHook<Data = any, Error = any>(url: string) {
const { data, error } = useSWR<Data, Error>(url, async url => {
const response = await api.get(url)
return response.data
})
return { data, error }
}
export default SwrFetchHook
SWR callback:
const { data } = SwrFetchHook<INavItem[]>('categories')
I hope that I could explain, my question here is how is the best way to work with this feature because the /src folder is common to use with nextjs but I don't know if this is the real problem with the api folder.
Thanks!
Not 100% sure if this is the same issue. I had this warning in my build phase:
warn - Statically exporting a Next.js application via `next export` disables API routes. This command is meant for static-only hosts, and is not necessary to make your application static.
Make sure you are using the correct build command in out package.json scripts.
I'm my case:
"next build && next export" needed to be changed to "build": "next build"
Note: I removed && next export
This disabled the static export feature and allowed the use of pages/api when running yarn start note: yarn start relies on the build script within Vercel's build pipeline. So do not override the default settings unless it is needed.
Also normal Node/JS projects you can define a source folder in the scripts area ie "start": "<SOME_COMMAND> ./src"....but Next.js does this automatically so I do not think having an src file is the issue. I too have an src file in my project and it is a very common way (preferred way) of organizing your JS project. You shouldn't have to touch this if you are using next.
I tried deploying my app on digital ocean and it worked cuz vercel was not providing a server. I was not able to call my api from POSTMAN as well. Deployed it on digitalOcean and then it ran a server just like my localhost.
I have Django Rest Framework server running in a terminal and React running in another terminal.
I consume Django API's in React using axios as mentioned below
axios.get('http://localhost:8000/songs/').then(res=>console.log(res)
It work well,in production mode I will hook main.js (created by npm run build, the build file of React) to Django template.
Will this method work in server ? Is it recommended ?
I used to integrate Django + React with this guid (https://www.valentinog.com/blog/drf/) but it do not support some npm packages
create constant.js file in your src react folder that contains all the api endpoints URLs. Like this:
const localhost = 'http://127.0.0.1:8000';
const apiURL = '/api';
export const endpoint = `${localhost}${apiURL}`;
export const productListURL = `${endpoint}/products/`;
export const productDetailURL = id => `${endpoint}/products/${id}/`;
export const addToCartURL = `${endpoint}/add-to-cart/`;
export const orderSummaryURL = `${endpoint}/order-summary/`;
Otherwise, you will have to change the endpoint domain on each request on the front end which can be time consuming.
I deploy apps on actual web-server like; ubuntu droplet on digital ocean, using NGINX.
You can have both react, and Django app deployed on the same droplet. You just need to write extra configurations for nginx. And configure the webserver correctly.
react deployment docs:
https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-to-digitalocean-app-platform
django deployment docs:
https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-20-04
Once you finish those both tutorials, you will understand how to configure your nginx for MVC.
Yes, it will work. There are several ways to deploy React and Django together.
However, my preferable way to deploy it is to use docker-compose and deploy it with nginx reverse-proxy.
Can you tell more details why some npm packages are not supported in Valentino Gagliardi tutorial?
found useful document
https://cuckootechnologies.medium.com/integrating-django-rest-framework-with-react-js-9bf9d7f051a1
Django will run in one terminal and React will run in another terminal. The API from the Django server will be consumed by React using Axios.
I have my heroku variables set like that:
(MODE is inserted because I thought that NODE_ENV may be getting overwritten)
In my React app I do this:
import dotenv from 'dotenv';
dotenv.config();
console.log(process.env)
But in my console (under the heroku URL of course) I see only:
What am I doing wrong?
Okay, the solution was changing the name of KEY to REACT_APP_KEY and restarting all dynos - we can do this here:
Hi everyone I moved my gatsby site to netlify, I installed google-map-react on localhost: 8000 everything works fine my key is in a .env.development file and in a .env.production i saw i must call my var with GATSBY_***** so i made this
GATSBY_GOOGLE_API_KEY = "**********************"
And i call it in my component Map :
const key = process.env.GATSBY_GOOGLE_API_KEY
It works well in local but in netlify i go in my settings of my site and Environment variables
I make GATSBY_GOOGLE_API_KEY Variable and his value but i've got an error message :
backend.js:6 Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
I must have missed something but I don't know what thank you very much if you have any leads