Node.js and Rest APIs
Frontend vs Backend, what is Node.js, and what are REST APIs,
What is Node.js?
Node.js is not a language, framework, or IDE, but rather a
Javascript runtime. Traditionally, Javascript was intended to be run
only in the browser through a Javascript engine, such as Google’s
V8. Node.js was revolutionary because it enabled Javascript to be
run outside of the browser by taking the V8 engine and adding
additional functionality which comes built into Node.js, like the
ability to interact with the file system. While backends were
previously written in PHP, Python, Java, and Ruby using frameworks
like Laravel/Symfony, Django/Flask, Spring, and Rails, Node.js
introduced Javascript to the backend and allowed developers to use
the same language across both the frontend and backend.
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.
Rest APIs
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 and
responds 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,
Spotify, 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.