I deployed my react app and Django app to Heroku. Django serves the API and React serves as frontend.
The frontend part is working quite well but just seems not to be communicating with the Django side.
My project is set up as
.
If I try to access the database it .
Now, I'm confused if I'm to use http://127.0.0.1:8000/graphql/ to access it or its meant to be a Herokuapp domain/8000 to fetch the API. I've done allowed Host on the Django side as well as whitelist, CorsMiddleware and CORS_ORIGIN_WHITELIST also used proxy on the package.json but everything still looks messed up and not communicating between each other
Related
I am making a web app that uses a Node.js/Express backend and a React.js Frontend. Right now I have my Node.js code that validities login/registration credentials in a separate folder running on localhost:5000 while my React.js frontend login/registration form code is running on localhost:3000.
My question is would it be easier to put both my frontend and backend code into one file structure so I don't have to send the data from my form to my backend running on another domain so for example both my Node.js and React.js code would be running on localhost:3000 and would just send the form information to the Node.js files that validate the user credentials instead of having to use a fetch method to send my form data to the backend. Is this even possible?
Yes, it is possible, you can use Express to serve your static files (frontend ReactJS) and also your backend routes. Take the following Github repository as an example.
https://github.com/Bikranshu/express-react-boilerplate
That is possible, A monolithic architecture with express and reactjs (https://medium.com/#sesitamakloe/easy-express-react-monolith-chapter-1-a1567c6ff483)
I am developing Social media app using NextJS & Node. I have created seperate backend using NodeJS. Now I want to connect NextJS frontend with Node backend. but when i set the "proxy": "http://localhost:8080/" inside package.json file that is inside my nextjs app. but still it's not fetching the API.
Based on my understanding, I don't think Next.js use proxy in package.json. If you want to achieve how proxy works in Create-React-App, you need to assign http://localhost:8080/ to an environmental variable in next.config.js.
You can access your base URL from when you try to make HTTP call like fetch(`${DEV_URL_HOST}/users`)
References
Proxying API Requests in Development
I am new in reactjs and nodejs.I made an application with react frontend and express backend. There are axios post and get requests for get data from mssql database via express.
When the project in production level, I write the IPv4 address and port for access dashboard from another device in local network. After build,when I use for example localhost:5000 for requests, I can see all datas which are come from database in the device which react project running but with this I cant see datas from android phone in local network.
What should I do? Isn't there any other way than writing a static IP address? This project can be run different machines.
I am sorry for my spelling mistakes.
I have a project with a client folder containing a React app bootstrapped with create-react-app. I also have a server folder with an express API server running on localhost:80.
Originally, I ran my frontend and backend as separate servers, making requests to the API server by making requests with fetch("url") and using "proxy": "localhost:80" in my package.json
I have recently altered the project so that my server serves the static frontend files like so: app.use(express.static(path.resolve(__dirname, "../client/build")))
I then tested running the server on two different ports 80 and 3000, and the frontend and backend both worked perfectly but I believed it would only work when the server was run on port 80
How does my frontend now know where to call the API server when it is running on different ports?
Proxy is used in the development environment and after that when you make build then its convert into the static HTML, CSS and JS files and that can be run in any port using node if you try that in a different port than it will also work as same
Proxy is not made for the production environment
https://github.com/facebook/create-react-app/issues/1087
I am trying to create a react-redux app using node server as backend. Is it possible to make the node server serve the react-redux app instead of running react-redux using dev server a=in one port and node on another port?
Need some idea to start with. Thanks in advance:)
Yes.. it is
you can serve you react app on '/'
and listen for API request in another route
so you don't have separate codebase for the react app and the api backend code
You can use express to serve the react app on a particular route
i.e my-app.com/
then serve backend related content on another route
i.e
my-app.com/api
so when a request is made to my-app.com/ express serves express serves backend resource or API
There are a few steps I take when creating an express/react app together. I'll create a server and a client directory. The client dir is created with create-react-app and the server can be created via express-generator for example. My project dir (the one that contains both of them) is basically just glue that melds the two together. In the client app, I'll add proxy:localhost:3001 (or whatever port your express api is running) and I use concurrently to run both servers (client and server - as client is being run by webpack-dev-server) at the same time. They run as separate servers during development, but when I make an api call, it's as if I'm making it directly to the express server itself.
The only other thing to worry about is deploying the application. You can use the build command that comes with create-react-app and copy that over to the public directory in your express application that is served up via express.static.
Here's a quick example to take a look at:
https://github.com/overthemike/heroku-skeleton
This is an useful doc for redux SSR setup. This helps avoiding running client and server at two ports.
Redux SSR