I am new in WebStorm. I have got a sample application that consist two projects: client(angularJs) and server (node.js).
When I start server app.js (api that return json), it listening port 7200
Wnen start client (AngularJS app) index.html, it works on port 63342
But the api call from client to server does not work. because client ask url
$http({method: 'GET', url: 'api/maa'}).
http://localhost:63342/quickstart/src/client/api/maa, but server works on port 7200 (http://localhost:7200/api/maa).
How to fix this, it is possible to launch both server and client on same port?
Sure. You can even start both using the same run configuration. Node.js run configuration has a 'Browser/LiveEdit' tab that allows to launch the browser and debug the client code. Check the 'After launch' checkbox there, specify the URL of the server your front end is served on (http://localhost:7200) and enable the 'with javaScript Debugger' option
Related
I am new to React and Express. The thing that I am trying to do is auto redirect all existing requests from HTTP to HTTPS. I want this redirection to be done automatically so clients does not need to change anything. In Express I am running Http on port 3000 and then running my application on port 3001 over HTTPS with valid certificates. When testing locally, I am able to see the redirection happening whereby http gets changed to https and port changes from 3000 to 3001 . So I passed http://localhost:3000 which got modified to https://localhost:3001. But when I deploy to my application server, when clients request for http://example.com:3000 , only the protocol changes from http to https but port no does not change. Its like https://example.com:3000. I want to know why the port number does not get changed as well. Strange thing is when I do curl -X GET http://example.com:3000 it says found and redirecting to https://example.com:3001. Had been struggling for while on this.
I am expecting both protocol and port number should reflect in browser rather only protocol changes but port number is not getting changed
While connecting to my socket.io server from react app, request is getting blocked. Its working with localhost but when i am trying from VPS, its not working.
From VPS:
From localhost:
http://server_ip:8007/socket.io/?EIO=4&transport=polling
above url returning valid response 0{"sid":"VaHqLXI5UVRRaeUAAAAV","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":20000,"maxPayload":1000000}
The error ("mixed block") seems to say, you must connect using HTTPS to localhost when hosting files from an HTTPS server. Meaning, should use wss:// instead of ws://. Or connect to your vps host using http:// protocol not https://.
I have an application that runs fine when viewing the application from your local machine/vm, but if I start the application in a vm and try to access the application using {vm-IP:PORT}, Express and React are not able to communicate with each other.
How React communicates -
const api = axios.create({
baseURL: "http://localhost:5000"
})
How Express communicates -
router.use(cors({
origin: 'http://localhost:3000'
}))
I would have to hard code the ip address of the machine into the code to have them communicate correctly (replace localhost with ip), but that would also mean the application would have to be edited every time it is ran on a different machine.
Is there a workaround to this issue? The application is also dockerized, so I don't mind being able to paste a ip address in the docker-compose so that React and Express can communicate but I'm not sure if that's possible.
You can use ngrok for this issue.
refer this doc: https://ngrok.com/docs
Basically what ngrok does is that it will allow you to serve your port on internet without actually hosting it.
It is very easy to use. First install ngrok to your system and then run ngrok http 5000 command in your terminal to server your express port 5000 on internet.
ngrok will allow you to serve your port on internet for 8 hours after that ngrok url will be deactivated.
Running above command will give you one url which you can use as below in your react application
const api = axios.create({
baseURL: <<url_generated_by_ngrok>>
})
According to the documentation
app.use(cors({origin: true}));
will accept every origin and set a corresponding Access-Control-Allow-Origin header. That is better than setting Access-Control-Allow-Origin: *, which browsers do not accept when credentials are involved.
If accepting every origin is too broad, you can also implement rules in a function and use
app.use(cors({origin: myOriginFunction}));
I am new to web development and slowly understanding the web process . I want to know which how nodejs helps to build webserver in frontend ? for react applications npm start --> react-scripts start which runs application in localhost .here where exactly it create webserver and executes in localhost
An application can have front end and back end. A ReactJs application can be the front end for example, and nodeJs can be the back end. The back end will offer the server and will communicate with the database.
So, concretely, you will have 2 different projects: client and server. The client project will be your ReactJS application. The server project will be the NodeJS server. You create each one separetly.
A server can be accessed by paths, for example
http://my-server.localhost/login
http://my-server.localhost/logout
http://my-server.localhost/users
So, a basic connection between client and server can be based on the url paths, so in your client project you can do:
window.location.href = "http://my-server.localhost/login";
to call the login service from the server. And then, in your server, you can redirect to a client's url path.
BUT: the best way (for me) to establish connection between client and server is by using socket.
Socket is very simple, your client can emit requests to the server, and vice-versa:
socket.emit('hello', data);//where data can be any type of object, a string for example..
Similarly, the server can also emit requests to the client:
socket.emit('welcom', new_data);
Then, in the server and the client, you should hear for each request. Finally the code can be something like this:
Client side:
socket.emit('hello', data);// I will say 'hello' message (request) to the server..
socket.on('welcome', (data, callback) => {//I will hear to 'welcome' message(request) from the server..
console.log('server emited welcome with data =>', data);
});
Server side:
socket.on('hello', (data, callback) => {//I will hear to 'hello' message(request) from the client..
console.log('client emited hello with data =>', data);
socket.emit('welcome', ':)');//I will say(reply) 'welcome' to the client..
});
Hope this helps you to understand the concept.
I write a Google Chrome Extension that uses Socket.io capabilities. More precisely, it's an AngularJS app with angular-socket.io on board.
I allow users to set up socket.io server address and port in the options page. Everything works fine until a user wants to change the address because I don't know how to reset the Socket.io connection. Ideally, I would like to close previous connection and reconnect with new connection without restarting the app (remember, it's an Chrome Extension, I cannot restart it by itself).
So my question is: How to reset the Socket.io client connection and reconnect with new DSN?
PS. I'm using socket.io-client#1.3.6
You are using angular-socket.io, so you inject socket.io (with a given config) as a service into your angular app. Assuming your service is called socketIOService you can do following:
Disconnect on client-side with socketIOService.disconnect();
Reconnect with socketIOService.connect(SERVER_IP, {'force new connection': true});