I am using react, graphql and node. Currently, my react codes are on codesandbox, whilst my server codes are on my local computer. How do i link up my frontend with my backend in this case? Do i need to deploy my server codes onto heroku or digital ocean before i can link them? I like to be able to test them first before deploying my codes
I am also thinking of migrating my backend codes to codesandbox. In this case, am i still able to link my frontend and backend codes in order to test them out before deploying to the hosting provider servers?
Thanks
Charlie is correct. I actually build my react frontend on codesandbox and connected to my node graphql backend on codesandbox too. Both must be running for that to work. Must enable cors too for both to connect. As im using apollo server 2, can pass a cors: true to the apollo server constructor.
Related
I created a react App which talks to a node back-end. Everything works fine in development mode. The connection between the front-end and back-end is made through websocket.
Most interesting thing is, that after doing yarn build to create the production build of the app, all the pages work fine. The only thing is that, the page that integrates connection with the back-end is returning error when I inspected it in the browser. I am using Apache Server to run the build version of the app on localhost.
I am using Apache server since python server throws errors on page refresh.
Below is the screenshot. As you can see, node server command, return the expected response from the backend app. The structure of the app is also shown; revealing the relationship between the front-end (smartschool and smartresult) and back-end (smartapi). Only the smartresult makes the request to back-end. How do I resolve this connection problem? Any help will be appreciated. Thank you.
I have a NodeJS backend running at http://localhost:4050, and I had configured my react application to make API calls to there. For deploying on heroku, I had to change the PORT variable in the backend to be process.env.PORT. As a result when I put the react app's build folder in the backend's server folder, the react application was still searching for localhost:4050 when I deployed to heroku and naturally failed to make calls, because heroku ran the application on an arbitrarily different port. But apparently adding the very same http://localhost:4050 as "proxy":"http://localhost:4050" in the package.json file worked. I'm really curious as to how doing that got it to work.
proxy field in package.json is used to proxy all requests from frontend domain to backend. For example, you have:
Backend (REST API): localhost:5000/api/user/:id
Frontend (React.JS app): localhost:3000/user
If you call axios.get('/api/user/123'), the browser will send this request to localhost:3000/api/user/123, but then react dev server will peoxy it to localhost:5000/api/user/123
Please note that this is only for development environment. If you want to deploy your React.JS, there's a better way: https://blog.heroku.com/deploying-react-with-zero-configuration
I feel like I have exhausted all possible searches and documentation trying to figure this out. I have a React native app which runs perfectly locally with a node server with websockets, I will like to know steps on how I could deploy this app to the store. I understand the server has to be hosted for example on heroku, but the workaround of the whole process from local server to heroku, then AppStore still confuses me. I will appreciate any suggestions, or clarification on how I could achieve this(deploying server and connecting to React native). Thanks
Host your Node.js server;
Use the remote server's endpoint on the app;
This can be useful to have a dynamic endpoint (dev and production env):
const endpoint = __DEV__ ? 'http://localhost:8080' : 'https://myServer/';
After your app get published on App Store it will communicate with remote server.
Hello Experts
My problem is I am developing a react js application with some Axios call, I am connecting my serverside backend (which is an indifferent location like a real IP address) with writing a proxy in package.json which is working on my pc is fine,
But when I am going to deploy my application on AWS in production mode, unfortunately, the backend is not connecting (Maybe proxy is not working as I learn by google search ), in this situation what should I do to connect my react js app with my backend
please help me if you can thanx in advanced
Usually browsers block cross-origin request by default.
Please check cors npm package to whitelist/allow requests from your react app to backend server.
link: https://www.npmjs.com/package/cors
Hope this helps. :)
The frontend is a React SPA and the backend is NodeJs app that exposes an API. The frontend queries the API for data from time to time but other than that it is fairly independent. What is the best way to host an app like this? Should I include the build folder in the NodeJs app and have the express server serve the static contents from a route? Or should I host both separately, set up a Nginx server for the React app on something like DO? I will host the backend on something like Heroku or Google App Engine. So considering this, what is the ideal solution? What are the pros and cons of either approach?
In case of production, include build folder in the nodejs app. Performance increase in case production. You can refer react docs for details.
In case of development, host it separately, so its easier to work on it.