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
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 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 have currently deployed the React and Node.js on nginx which sits on AWS . I have no issues in deployment and no errors.
The current environment is: PRODUCTION.
But I have a doubt whether the method I follow is right or wrong. This is the method I followed, https://jasonwatmore.com/post/2019/11/18/react-nodejs-on-aws-how-to-deploy-a-mern-stack-app-to-amazon-ec2
The following is my nginx configuration
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
root /var/apps/front_end/build;
try_files $uri /index.html;
}
location /api/ {
proxy_pass http://0.0.0.0:3005/;
}
As shown above , I have copied the build folder after npm run build to the AWS instance and gave the location to nginx and the backend is copied as it is to the AWS instance and I gave npm start it runs on 3005 port , I gave that IP to /api location to proxy pass
I see a couple of others using server.js for the front end and putting the build folder files there and setting up the nginx to that server.js .
So should I do it that way ? or am I good with the current method as seen in the link above ?
Just like everything else, there are multiple ways to go about this. Depending on the way you have ended the question looks like you are open to exploring them.
Here are my preferences depending on the increasing order of responsibilities on my side vs what AWS handles for me:
AWS Amplify :
Given that you are already using React and Node, this will be a relatively easy switch. Amplify is a not only a set of very useful frontend framework by makeing it easy to add functionalities like Authentication, Social Logins, Rotating API keys (via Cognito and API Gateway) etc but also backend logic that can be eventually deployed on AWS ApiGateway and AWS Lambda. Not only this but AMplify also provides a CICD pipeline and connects with Gothub.
In minutes, you can have a scalable service, with opetion to host frontend via AWS CloudFront, a global CDN service or via S3 hosting, deploy the API via ApiGateway and Lambda, have a CICD pipeline setup via AWS CodeDeploy and Code Build and also have user management via AWS Cognito. You can have multiple enviornments dev, test, beta etc and have it setup such that any push to the master branch is automatically deployed on the infra, and so on and so forth other branches being mapeed to specific enviornment. To top it all off, the same stack can be used to test and develop locally.
If you are rather tied down to use a specific service or function in a specific way, you can build up any of the combination of the above services. API Gateway for managing API, Cognito for user management, Lambda for compute capacity etc.
Rememebr, these are managed services so you offload a lot of engineering hours to AWS and being serverles means you are paying for what you use.
Comming to the example you have shared, you don't want your node process to be responsible of serving static assets - its a waste of the compute power as there is no intelligence attached to serving JS, CSS or images and also because in that case you introduce a new process in the loop. Instead have NGINX serve static assets itself. Refer this official guide or this StackOverflow answer.
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
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