I run a react frontend application. I also serve an API in the backend. When I do "node server.js" it runs at port 5000 and then when I npm start it tries to run at port 5000 but as it is busy, I choose a different one and it goes to 5001.
However, if I use nodemon and concurrently to run both frontend and backend in one command, there is no backlash asking me that the ports are busy. I suspect backend does not run if I do that because I cannot reach it through localhost/api/data link.
How can I run them in different ports? I use craco in start scripts because I use tailwindcss, so cross-env does not work
I suspect that you're using the create-react-app boilerplate.
In that scenario you can add a proxy field in the package.json file to tell the react server to forward requests locally to a separate endpoint.
More on this is available here: https://create-react-app.dev/docs/proxying-api-requests-in-development/
If your backend is running on port 5000 add the following to your package.json
"proxy": "http://localhost:5000"
Once that's done start up the react server and it should do the forwarding on its own irrelevant of cors.
What you can do here is provide a proxy and a PORT:
"proxy": "http://localhost:5000"
...
"scripts": {
"start": "PORT=2000 react-scripts start",
...
This way the server will start on 2000 an all HTTP calls will be proxied to 5000.
Related
If I try to run the react app in one terminal, it opens on port 8000, and if I open a new terminal tab and try to run the app again I get the following, after which it opens the app on port 8001
Something is already running on port 8000.
Would you like to run the app on another port instead?(Y/n)
And this is possible because of:
"start": "react-scripts start"
Most of the solutions suggest to kill the process that occurs in the port.
But I'm trying to implement this sort of function for a Node(Express) application, such that if a particular port is running/in use, it should just open the app in another port.
I've also thought of this, as a solution, but this would only let me open the app either in 8000 or 8001. I want the app to be able to open on 'n' number of terminals with 'n' different ports. Essentially, is there a NodeJS alternative to "start": "react-scripts start" ?
Using express you can omit the port params when calling app.listen, which you make express run your app on a random unused port.
Doc: https://expressjs.com/en/4x/api.html#app.listen
EDIT:
The solution to the problem can be found here
I'm working on a react application and for testing some services I wrote a node server in my notebook. It seems that from the app and from the browser I cannot point to https://localhost:3000 due to ERR_SSL_PROTOCOL_ERROR.
I just tried doing some actions like reset all SSL certificates, trying different browser but the only result I found it's that I can reach my server from the browser but not via react.
Can someone help me?
Try http://localhost:3000
Just validated with one of my projects to make sure
The dev server doesn't support https
The localhost:3000 should be hit by: "http://localhost:3000"
If that is not working then the port number can be changed.
In REACT, the port number can be changed with:
"start": "set PORT=3006 && react-scripts start"
How are you running the app? Maybe with
set HTTPS=false&&npm start
I have a react app served with HTTPS (I need it for a service worker running in the background)
that is having CORS issues with my backend running locally with Firebase Functions.
Firebase Functions is just wrapping an express application with CORS module enabled.
I performed a few tests with OPTIONS calls to this backend and I'm getting the proper headers.
They problem is that my Frontend (HTTPS) cannot reach out to my backend (HTTP).
Is there any way to run firebase functions locally with HTTPS instead of HTTP?
running firebase serve --help only shows
Options:
-p, --port <port> the port on which to listen (default: 5000) (default: 5000)
-o, --host <host> the host on which to listen (default: localhost) (default: "localhost")
--only <targets> only serve specified targets (valid targets are: hosting, functions, database, firestore)
--except <targets> serve all except specified targets (valid targets are: hosting, functions)
-h, --help output usage information
The local emulator does not support HTTPS at this time. T here is a thread on GitHub about this, with advice to use ngrok for a similar use case. https://github.com/firebase/firebase-tools/issues
You can do it with native react-scripts:
REACT_APP_ENV=development yarn start
package.json:
"scripts": {
"start": "HTTPS=true sh -ac '. .env.${REACT_APP_ENV}; react-scripts start'",
...
See create-react-app docs.
I'm a newbie so sorry if this is a stupid question.
I was trying to setup this a-frame boilerplate code.
https://github.com/aframevr/aframe-boilerplate
This is the instructions given.
To serve the site from a simple Node development server:
npm start Then launch the site from your favourite browser:
http://localhost:3000/
This works as expected, but the webcam is restricted because the site is http and not https. I want to know how to serve this as https instead?
Furthermore I am confused on what actually happens when you do npm start.
The start script is budo --live --verbose --port 3000 --open.
But the project doesn't have any js files that could be the server. Only the html file in the front end. What actually happens with npm start?
npm start runs:
"start": "budo --live --verbose --port 3000 --open",
running budo starts the server
--live enables LiveReload on HTML/CSS/JS file changes
--verbose enables debug messages
--port defines the port
--open launches the browser once connected
by default it uses index.html which is in the main directory
If you want to create a https server instead of http you need to add one more option:
--ssl, -S create an HTTPS server instead of HTTP
If you see some unknown commands run, always try to find the documentation and search the keywords (like HTTPS).
When I run nodemon dist/server/app.js it works on default port 3000 and I'm able to reach my API. But if I run
nodemon --inspect-brk=localhost:3000 dist/server/app.js
I got error
WebSockets request was expected
What's wrong?
You can't run your web server and the debugger on the same port. They are each separate servers (the debugger is a server built into the node.js runtime).
So, you can either remove the port and host designation from the --inspect-brk option and just let it use the defaults (which is all I ever use) or you can select a different port for the debugger that doesn't conflict with your web server or anything else running on that host.