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.
Related
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.
I'm trying to understand what needs to be done to put my react app online.
Until now, I launched it on my mac using npm start, and accessing localhost:3000 or http://127.0.0.1:3000.
So I currently have bought a small server, installed everything (last version of node and npm, git and other necessary things), cloned my repo, and installed all dependencies.
When I do npm start on the server, it says it's available on port 3000. But when I go in my server's ip with the following :3000, it times out.
I don't really understand what need to be done to do this, I found some things about configuring apache on the server, others about using pm2 so have a node script running even after leaving the terminal, but that would be my next step I guess.. And other about configuring things with express (but do I need node+ express here ? As it's a simple front end react page ?).
if you are using webpack devserver, use it for development only
The tools in this guide are only meant for development, please avoid using them in production!
back to your question, there is a difference between binding to 127.0.0.1 or binding to 0.0.0.0
try changing the devserver to listen to 0.0.0.0
webpack.config.js
module.exports = {
//...
devServer: {
host: '0.0.0.0'
}
};
Usage via the CLI
webpack-dev-server --host 0.0.0.0
also note, that you will need to allow ingress rules (incoming connections). that is, allow a request from the internet to reach your server
There are a lot of configurations you will have to do when you deploy your application on a server. Building the app, Nginx, pm2 and even ssl certification. This video is 20min and has all you need. https://www.youtube.com/watch?v=oykl1Ih9pMg&t=1s
I've both NodeJS and AngularJS applications. I'm using npm install to download the app's dependencies for both the application. The NodeJS application runs on port 4000 and AngularJS application runs on port 4200. I can access APIs from NodeJS application in the browser and cannot access the application's UI(AngularJS) in the browser. I have deployed these applications on Azure Virtual Machine.
I have opened the ports 4000 and 4200 in the network settings of Azure VM. I'm using npm start command to start both the applications. NodeJS working fine as like in the local machine but not the same case with AngularJS. There is no errors or warnings from AngularJS side. It shows that the app is listening on http://localhost:4200/ and it is not accessible.
In this case, you need to run ng serve --host 0.0.0.0 to allow that your AngularJS application is listening on 0.0.0.0 for outside connecting. You could refer to this How to allow access outside localhost
Try using:
ng serve --open --host 0.0.0.0 --disable-host-check
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).
Is there any way to host the same Angular app on two different hosts (different IP or different port) using Node.js?
The .angular-cli.json file allows you to specify Angular-CLI configuration options; including the default hostname and port.
serve: Properties to be passed to the serve command
• port (number): The port the application will be served on. Default is 4200.
• host (string): The host the application will be served on. Default is localhost.
You can define the used port in the .angular-cli.json file by defining the property like this:
{
"defaults": {
"serve": {
"port": 2500
}
}
}
See the Angular CLI documentation for more info and a complete listing of configuration options:
https://github.com/angular/angular-cli/wiki/angular-cli
Command line solution
If you're looking for a command line solution that does not require and configuration editing, simply run the ng serve or ng serve --prod commands with the optional host and port commands.
ng serve --host 0.0.0.0 --port 4201
Using these optional command line parameters, you can simply run the command twice, each with different a host and port.
Side note:
That being said, unless you are going to be serving your Angular application using the Angular CLI, you'll likely need to configure these options using the methods associated with your hosting platform.