Node.js and Rest APIs
Frontend vs Backend, what is Node.js, and what are REST APIs,
What is Node.js?
Frontend vs. Backend
You might recall that the frontend, also referred to as the client-side, is what the user sees, while the backend, or server-side, runs on a server to serve resources. Unfortunately, this is a very generic and shallow representation of what the two actually are because what the user sees is often dependent on data that is fetched from a backend, which interacts with a database. Although it may start out a bit blurry, we won’t get any pickier with nomenclature because you will gain a clearer picture as you deepen your understanding of how the different components of the web work together.
However, it is extremely important to understand that frontends and backends are not as tightly coupled as they might initially seem. Countless projects exist as standalone frontends or backends, with independent frontend projects often in the form of static websites and backends in the form of an API. For example, Stripe is a massive suite of APIs for handling payments and can be considered a standalone backend. A standalone frontend might be a small club website, but as the site grows in complexity the developer might want to store the contents of the website in a database that is accessed via a backend. When the frontend and backend are coupled together, they form a full stack website. A good example of a full stack application would be an eCommerce website, which is commonly run with both a frontend and backend.
If frontends and backends can be completely separate, then how do the two interact? Welcome to the world of REST APIs, which rely on API endpoints to serve HTTP responses to HTTP requests. Let’s break each of these down.
HTTP is essentially a method of communication commonly used on the web. When you navigate to youtube.com
, you are sending an HTTP request
to an intricate system of servers called the DNS, which are really just specially configured computers that are constantly running and listening to these requests. The server then responds
with the IP address of youtube.com so that you can connect to it.
In the context of REST APIs, a frontend might send an HTTP request
to a server, which receives the request via an API endpoint
with some data, usually in the form of JSON. For example, Youtube internally uses its own custom-built REST API, which can also be accessed by developers
. When you create your website you can decide whether you want to consume an external REST API like those of Youtube
, and OpenAI
, a REST API built by you, or a combination of both based on your needs. As mentioned earlier, REST APIs can also be standalone projects.
There are different HTTP actions such as GET, POST, DELETE, and PUT, but most of the time you will be using GET and POST. REST APIs can also do some funky things like directly render HTML on each endpoint, or serve up static frontend build files in production.
REST API Demo with Node.js and Express.js
Now we can clarify how all of this actually looks when being implemented. For this demo, we’ll be using Express.js, which is a simple backend framework that handles all of the endpoint, request, and response stuff we talked about earlier.
In Express.js, each app.get() function specifies an endpoint such as "/" or "/alex" which receives an HTTP GET request via the `req` object (this can be used to access query parameters) and sends a response through the `res` object.
We can start this server (make sure you have Node.js installed!
) by running `node app.js`
in the same directory as the file, and now if we visit localhost:5000
then we should see greetings, universe
, and if we visit localhost:5000/alex
then we should see alex luo is cool
. Note that this is an extremely simple demo, and a REST API usually performs more complicated functionality like interacting with a database or handling dynamic routes (app.get("/path/:dynamic-thing", …)
). If configured properly, then a frontend can easily make requests to an internal backend using the browser’s built-in Fetch API or a library like Axios. A REST API already running on a server can also be accessed through the command line using cURL or through an API client like Postman or Insomnia.
One last thing worth briefly mentioning is how ports work - in our demo we had our server listen on the port specified in the PORT environment variable, or alternatively port 5000 if one is not specified. Ports are analogous to real-life ports (the ship loading sites, not the wine). There might be many different ports that securely handle requests from a sea of incoming ships. Some of these ports might already be occupied by a certain type of ship, and some might even be traditionally reserved by special ships, like 3306 for MySQL. All of the ports, however, eventually end up leading to the same final destination - the city it’s for, or a computer. In development, it is common to have the frontend listen on a separate port from the backend, and proxy the frontend’s requests to the backend port. A lot of the time you won’t have to worry too much about ports but it can be a handy topic to have a little knowledge on, especially when working with more advanced technologies like Docker.