I just published my React app to vercel, the problem occurs when I make a call from my API, when I see the response from the server "Network" I get this error "You need to enable JavaScript to run this app". I have seen some problems regarding this and it seems that the problem may be in the package.json file, to be more precise in proxy, in this is the endpoint for my API:
"proxy": "https://URL"
Regarding the API, it is published on Heroku.
I have tested the project locally and the program works correctly, but when I run it in vercel I get the error.
just to show an example of how I consume my API this is an example.
const data = await axios.get("/places")
I have already restarted my server on heroku but the problem still continues
Related
Currently moving a work project from Create React App to ViteJS. I was a noob when I started working on this project, so I did what I was thought and started with CRA. Let the attacks begin.
In my CRA project I had an env variable called REACT_APP_SERVER_URL, which is self explanatory, but it just links to localhost:8000 on my local machine and to https://exampleserver.com when deployed. It's used for fetching data on the frontend. To get projects you hit https://exampleserver.com/api/projects
When I moved the project to Vite, I changed the env variable to VITE_SERVER_URL. It's all cool and it works amazing on my local machine.
Let's say client url is https://viteclient.com.
Now comes deployment... App crashes on load. I check the console, and good thong I forgot a console.log in on of the fetch functions to tell me what was the issue. I'm getting a 404 from the server. The app made a request to:
https://viteclient.com/exampleserver.com/api/projects
What happened there?? Is VITE_SERVER_URL a saved name for Vite env variables? if so, I can't find anything online about that. It didn't do that in CRA, it doesn't do that in my local machine. Does anyone have any idea what happened? And/or how to fix it.
I tried looking if anyone has a similar issue, but I can't seem to find any other developers having these issues.
My team is working on an NodeJS app with a ReactJS frontend that needs to be deployed on our Ubuntu server. It runs fine locally and it used to run fine on the server until we added a Router/Switch structure into the App.js. Now we get 404 and 502 errors and I'm thinking of adding some GitHub action to automate the deployment process with npm run build and all. Ideally, every time we push to GitHub, the app on the server should update without someone having to tunnel in and type something manually. Can anyone suggest a ready-made YAML file for that purpose? How would we trigger it on our Ubuntu server? Would we run it under nginx (like now) or apache?
This is more of a lack of understanding on my part but I cannot seem to debug this.
I have a react app that I use Auth0 for some authentication stuff.
I recently moved my site on production from using a docket container to running from S3. I thought this was working but its clearly not today it times out when I click login
Request URL: https://undefined/authorize?
This just times out
It works from local host and no longer says undefined it has my auth0 domain
In my react app I store that Auth0 Domain value in a .env file. I am assuming my issue is that react in my S3 bucket does not have my .env file because gitignore. I thought maybe at build that was somehow pulled into a build file ? So when I do npm run build does it do anything with that .env?
How do I use my .env with react running in S3
This assumes that is what my issue is it seems to be.
I had multiple issues going.
Cloudfront was caching my site so as I was debugging I was not viewing my latest code. I had to invalidate cloudfront cache after each push.
I added my Auth0 secrets into github action secret and then used them with an env: section in my github action. That allowed me to use environment variables when github action performed the build.
All works now I was just tangled up for a short time.
We're developing a web app in React using create-react-app. The backend is written in Python and therefore we define a proxy in package.json to forward API calls to it during development as described here.
This, however, seems to interfere with the live reloading of the React development server when a source file is modified. In the Browser console we see:
The development server has disconnected.
Refresh the page if necessary.
And the backend server sees unexpected requests:
127.0.0.1 - - [22/May/2019 08:01:38] "GET /sockjs-node/227/inixucqn/websocket HTTP/1.1" 401 -
Is there any way to fix this? I guess we could configure the proxy manually, but this must be a problem everyone has when using proxy.
I use
"webpack": "3.8.1" ,
"react": "^16.5.2"
when start to yarn start app is working
but after the yarn build and serve -s build, not to call api. (but react-router is working)
In other words, it does not work for the http request. After the build
But as a yarn start, http request runs well.
(I use proxy in package.json. front-end is react, backend is spring boot)
I suspect your issue is like this. When you are developing you are using a proxy setup in your package.json as you have stated in your question.
When you have this proxy setting, webpack dev server will proxy your request from the client to the server. This is what allows you to leave the baseurl off your request in the app. In other words, because of this proxy you can simply write /api/endpoint/.
When you build and serve using the serve module however, webpack dev server is no longer the one serving your app the the browser, which means there is no more proxying requests from client to server. This means you are making a request to just /api/endpoint/ which means there is no server actually getting your request.
Without actually changing your react code to use the full url including the base url in requests, you would need to actually have the server be responsible for serving the build folder to the web statically. By doing this, your /api/endpoint will point back the server that served the app which is also your api.