Update:
I have found the issue to be that create-react-app is never changing the host to 0.0.0.0. This is due to the network I'm running this on at work. If I remove 0.0.0.0 from the flask server, it gives the same errors. It only works with 0.0.0.0 as the hostname in Flask but I can't find any way to run the react server on it. It only ever runs on localhost:3001 and ip:3001, both of which give me errors with https.
I am having trouble launching the sample app from create-react-app and TLS 1.2+ are the only protocols supported on my work network.
I've made an .env file for React as below. However, Chrome says it's not a trusted certificate and won't load. Is there any way to force the protocol used with an env variable?
HTTPS=true
HOST=0.0.0.0
PORT=3001
SSL_CRT_FILE=file.cer
SSL_KEY_FILE=file.key
I had similar problems with my flask server but eventually got it to work as below
def ssl_setup():
cer_file = file.cer
key_file = file.key
context = ssl.SSLContext(ssl.PROTOCOL_TLSv1_2)
context.load_cert_chain(cer_file, key_file)
if __name__ == "__main__":
app.run(host='0.0.0.0', port=5001, ssl_context=ssl_setup())
Using chrome dev tools, it shows that Flask is using AES256 while React is using AES128. Maybe this is the issue?
Forcing 256 bit is still not working, it keep saying my certificate is invalid even though it works just fine in Python. To force it I used export NODE_OPTIONS=--tls-cipher-list=''ECDHE-RSA-AES128-GCM-SHA256:!RC4''
Related
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 run my app to my local machine via ssl like this:
ng serve --ssl --host: 0.0.0.0
so it is up at: https://localhost:4200
I also using my ipv4 adress which is: XXX.XXX.XX.XXX to make my requests to the server via my services, so i make my api calls like this: https://XXX.XXX.XX.XXX:80/api...
In my back end, I have created an https server so my API calls are been made via https
Everything works great to my desktop
Problem is: The app wont cast to ther devices.. it wont even load and
after some time i get the msg this site cannot be reached
The built in webpack server that is used for ng serve is not meant for production or sharing to other computers, it is only supposed to work on local for development because of security reasons. You should consider hosting a compiled version with a separate web server such as nginx. If you absolutely NEED the built in webpack one to work, you can force it to bind to all of your IP addresses with this:
ng serve --host 0.0.0.0
You may need to disable the host check as well:
ng serve --host 0.0.0.0 --disable-host-check
You can access this, but you might need to turn off your Firewall, this mostly happens in windows machines.
Try turning it off and accessing the IP from other machine.
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 am creating one application that needs to be made on staging server from one point. Because creating it on local is impossible as it has some endpoints that other servers in network has to access.
I have created an application in Vue.js and Laravel. In local, I used to run npm run hot so that I don't have to re-compile when I change some code. But as I have to continue developing this application on a live server, I want to run npm run hot on a custom domain like staging.something.com instead of localhost:8080.
I don't have any issue if somehow localhost:8080 co-operates but when I run npm run hot on a live server, Here is the error I get when I try to access the web application.
GET http://localhost:8080//js/app.js net::ERR_CONNECTION_REFUSED
I think it should show IP address of my server instead of localhost. I don't know what's wrong with this but it's not working.
Laravel mix uses the webpack-dev-server package for the run hot command.
webpack-dev-server has a switch --useLocalIp which will make it use the servers local IP address.
It also has a --host switch which can be used to set the IP address manually --host 0.0.0.0
When running my ember application with ember serve -e local I get:
Port 4200 is already in use.
Which is weird because no application is running on 4200. I tried to open a dummy HTTP server on 4200 with http-server and it works just fine. It also works when I specify the port via a command line flag ember serve --port 4200.
Some things I've tried:
Restarted my computer.
Removed the node_modules.
Remove the ember tmp directory.
Disabled my firewall.
Tried with disabled wi-fi.
Any thoughts?
I'm running on masOS High Sierra 10.13.6 with the following versions:
node: 8.11.3
ember-cli: 2.18.2
npm: 5.6.0 (also tried with 6.3.0)
Also useful to know:
I have other ember applications running on my computer just fine.
I started to have this problem only recently.
In the past, macOS would keep asking me about authorizing incoming traffic whenever an app was opened, but now it stopped asking me.
I had this issue and tracked it down to using a string vs. integer for port in .ember-cli.
// .ember-cli
{
"port": 8080, // works
"port": "8080", // throws the error mentioned above
}
Not sure if this is the cause for others with this error. As mentioned, first thing is to make sure nothing else is actually running on that port. But OP had already checked that, and so had I.
After further investigation, it seems that the problem is not coming from macOS, but from something messed up in the dependencies causing ember-cli to fail...
It's not quite clear what is causing this, and I will try to post any additional information here, but for now if you happen to encounter this problem, just pass the port value directly to ember-cli like so:
ember serve --port 4200