Unable to reach localhost:3000/ - node.js

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

Related

ECONNREFUSED error when proxying from React to Flask running in docker-compose

I've been all over this so finally asking.
I basically have a flask API and a react front end running on my dev machine.
They are running via docker-compose on the same virtual network.
The flask api runs perfectly when I postman to it via the 5000 port and the react front end works perfectly in the browser on port 3000.
I edited the react package.json file and added "proxy": "http://localhost:5000",
Then when running the route I want from react over on localhost:3000/movies it tries to proxy on over to localhost:5000/movies but I get this error:
Proxy error: Could not proxy request /movies from localhost:3000 to http://localhost:5000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED)
I've tried changing that line to various things including my docker image name. So proxy": "http://image-name:5000", and I've also tried the internal docker network name like proxy": "http://127.0.0.1:5000", and they all give the same kind of error.
Does anyone have any suggestions as to what I can try beyond that? Any advice would be greatly appreciated. Thank you.
Here it is for anyone in the future.
The container name needed to be used. So I updated my docker-compose.yml to have:
services:
flask-api:
container_name: flask-api
In my API (flask app) my config.py was like so:
SERVER_NAME = 'localhost:5000'
I changed it to:
SERVER_NAME = 'flask-api:5000'
The react package.json was updated to:
"proxy": "http://flask-api:5000",
Then on reload docker-compose build --up it worked.
The proxy from react forwards to the flask api. So in my case localhost:3000/movies proxies to locahost:5000/movies to get my api data.
I trust that helps someone in the future.

How does a react app can be set up on server

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

How do I run this aframe boilerplate code locally with https instead of http?

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).

Proxy error: Could not proxy request /api/register from localhost:3000 to http://localhost:8000/ (ECONNREFUSED)

I have a React frontend that uses jwt to authenticate with the laravel backend. The backend works and is connecting just fine using laravel views, but when I try to proxy a request from React, it gives me a Connection Refused error.
Proxy error: Could not proxy request /api/register from localhost:3000
to http://localhost:8000/ (ECONNREFUSED).
Connecting to http://localhost:8000/api/register works normally. And sending a POST request with Axios also works normally and returns the token json. But when I proxy it with node, it doesn't work.
in my package.json code is
"proxy": "http://localhost:8000",
Please anyone help me. how to fixed it?
I think you should add "/" after the port number in package.json file
"proxy": "http://localhost:8000/"
Please check these points and solve your problem:
Please check your ip of backend server.(https://127.0.0.1:3000 or http://127.0.0.1:3000)
Please check your backend server is running or stop if stopped then start ypur server.
Please check protocol http or https used in your backend server.(https or http)
I hope with the help of these points you can solved your problem which is facing by you.
You need to run both of the local host (3000 and 8000) in different terminal. For example, run the backend server in os(windows's) command prompt cmd and frontend server in vscode terminal.

Vue application running on Digitalocean times out in browser

First time I try to use a node.js droplet on Digitalocean: I have a vue.js application running on port 8080, but it times out when I try to load the masterpiece in the browser (I don't have a domain so I use the [server IP]:8080 to access it).
I made sure 8080 is open in the firewall (ufw):
Netstat -pln gave the result seen in the screenshot below, a node program is running but nothing is named vue in case that would be required:
Tried export HOST=0.0.0.0 on advice from a friend, but didn't seem to do anything.
Tested curl 127.0.0.1:8080 from the digitalocean console and it works correctly.
The browser error message is err _ connection timed out.
Any tips on how to get this to show in the browser? As I'm not experienced in working with servers please give me step by step instructions. Thanks!

Resources