In my Vercel's app dashboard I set environment variable BACKEND_URL for Preview environment and dev branch:
However after deploying it, the variable doesn't seem to work. My site can't access the api.
I added this quick way of checking what is inside process.env.BACKEND_URL and as expected - it is empty.
<Text>Backend URL: {process.env.BACKEND_URL}</Text>
Here is the screenshot of Vercel build which shows that the newest deploy is in fact Preview and from dev branch:
What am I doing wrong?
I have the same problem in my deployed react app. When I try to call my backend using a vercel env, instead of just calling the url it appends the vercel app url to the env for no reason causing it to fail.
For example:
REACT_APP_API_UR = "https://www.example.com"
and I create a post request to my api the url it post to is:
https://yourapp.vercel.app/%22https:/www.example.com%22
Related
I am working on the latest nextJS version. I am trying to load images from a Magento CMS. They work fine in local, but on deployment to Vercel, I get not found error
GET https://consumer-omega.vercel.app/a/b/absinthe20teichnnd_vhi6ffkxpdwl9ism.jpg 404
I have already added the domain name of CMS to the domains setting in images under next.config.js.
images: {
domains: ["devconsole.appname.com", "appname-omega.vercel.app"],
}
For reference for debugging, this is the URL that gets requested for in local
http://localhost:3000/_next/image?url=https%3A%2F%2Fdevconsole.appname.com%2Fmedia%2Fcatalog%2Fproduct%2F8%2F2%2F820pm20whisky_c0ihwxvhlkqdbupv.jpg&w=256&q=75
Where as in the deployed environment for, the requested URLs are something like this
https://appname-omega.vercel.app/_next/image?url=%2F8%2F2%2F820pm20whisky_c0ihwxvhlkqdbupv.jpg&w=256&q=75
I am developing a React app using freetogame API and it works perfectly on localhost, but I deployed it on Netlify and it's not working because it's making the API call to a different adress.
Here is the API call on localhost: localhost API Call
and here is the API call on the deployed site: Deployed Site API Call
As you can see in the deployed site API call, the Request URL is completely different and there is an /undefined/ part in the API call. I don't know what's causing this problem.
Here is the Github link to the project: Project Github Link
Please help me find the solution. Thanks in advance
Edit: I did some more research and figured that the problem may be caused by the axios call. There is baseURL, headers, and params in my axios call and I didn't defined them in the Netlify deploy. Here is my axios call: Axios Call and here is my package.json file: package.json
. How can I define them in netlify?
Have you added your environment variables to Netlify?
api_key = process.env.REACT_APP_API_KEY
api_host = process.env.REACT_APP_API_HOST
api_base_url = process.env.REACT_APP_API_BASE_URL
If you don't declare the above variables in your Netlify project it won't know what values to insert, which is why they are currently undefined. Visit this link for more information: Netlify Environment Variables
I found a solution and wanted to post it here so it can help others. I tried deploying my build file to Netlify manuelly and the site is working now.
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'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
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