Disclaimer: I would not recommend doing this on just any Network and I would not recommend keeping this things open when you’re not using them for security purposes.
So right after presenting our Mod 2 Project, I realized that it would have been cool if some other people were also able to login to our App during our presentation. Alas, it was just a bit too late and I told myself that I would really want to do this during the next project that would allow it and that was the Mod 4 Project.
Jumping to it quickly, we would need to clarify some the following words first:
Host
IP Address
Port
Let’s start with Host, a quick Google search gives us this definition:
In the computer world tho, it’s a little bit different but the definition above holds its meaning when use in context of what is hosting your server. If you’re up to it, you can read more information about what host means in the computing world using the link below:
Moving on, what is an IP Address? A very simplistic way define it is it’s the address your computer will be assigned when you join a network. This is a way to let people know which computer is yours in a specific network and will kind of act as your “id” if you will in a network.
Lastly, Port, or more over a network port is a number in used to identify what protocol or network service is to be used. A few things to remember is that there are reserved ports assigned by Internet Assigned Numbers Authority (IANA) so if you have any issues, I guess you can talk to them. More importantly though here’s the range of ports that can and cannot be used:
- Ports 0–1023 — system or well-known ports
- Ports 1024–49151 — user or registered ports
- Ports >49151 — dynamic / private / ephemeral ports
To wrap those up, a simple analogy that comes to mind is that a Host is a the building you’re looking for, for our building it is : Met Square. The IP address would then be more or less equivalent to the building’s address which is : 655 15th St NW, Washington, DC 20005 . Lastly, the Port will be specific company, suite or room that we are looking for inside the building, in our case it’ll be Flatiron School.
Alright, so how does this relate to what we do in the program and how was I able to allow your computer to connect to my computer which was running our API and Node server.
Let’s start with the backend, I’m sure by now you used to the command
rails server
The command above allows you to start your server and implicitly it starts it and only binds it / listens to the localhost and uses the port 3000 and that is the default. To allow other users to connect to your Rails server, you need to bind it to 0.0.0.0 which will then tell your Rails to serve anyone connecting to it using the port it is started on. The command to do such thing would be:
rails -b 0.0.0.0
You can also add a specific port since most if you would like by adding the argument “-p xxxx” in our case, we moved our API to port 5000 so we’re using the command below:
rails -b 0.0.0.0 -p 5000
If you do everything correctly everyone that’s currently in the same network as your computer should be able to connect to your rails server using their web browser. They’ll be able to do this by trying to connect to the Host which is your computer by using the IP address provided to you when you connected to the “WeWork” wireless network plus the Port 5000 to specifically connect to the app using 5000 which is our rails server.
It’s almost the same thing for your Node server and if you actually look back in our React Routing lecture, Bruno shared an IP that was provided by the Node when you started the server. If you look at it carefully, it is just your IP Address and the Port Node is using when it started you ran the command :
npm start
Now just a few things in mind, normally in the real world, a particular computer or Host will be running your app and it itself has its own IP address(Fun fact, the web address we are typing in our browser gets converted to an IP Address). But in our case, since we only have our own macs as machine which acts both the Server and Client we use the word localhost or 127.0.0.1 which is a loopback interface.
With that in mind though, you will need to have your fetch URL be dynamic so that it’ll always point to your computer. If you just leave them as localhost, their session will try to fetch from their computer which will not have the data your app needs. For our project, we used:
{window.location.hostname}
or to be more specific in an example:
campaignURL = http://${window.location.hostname}:5000/campaigns`
window.location.hostname gets your IP Address and put’s it in as the host to connect to in this particular case, it’ll be pointing to our Rails server which I had setup a route for to display all campaigns.
And that’s about it, I would just reiterate to keep security in mind when doing this. Other than that, use it to have fun!
