Setting up a server locally shouldn't be such a daunting task, and quite frankly it isn't.
For starters, servers are computers, like the one you're probably reading this article with; except they usually don't have a graphical interface e.g monitor. Basically, they are just stacks of huge processing units that execute high-volume operations.
Like frontend applications, there is a myriad of frameworks used on the server-side (backend) to help foster development and maintain best practices.
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications Link.
Technically, nodeJS can be used to set up a server but we would not be using it because it requires more code and effort. Conversely, Express provides abstractions based on core node modules that we would leverage.
So, say you want to serve a simple portfolio website with an Express server and your folder structure looks like this.
main - public - style.css - index.js - index.html - about.html - server.js
If you don't have node and npm installed, follow this link for installation Link.
cd into the
main folder, run
npm init --yes and
npm install express. I would also advice you install
nodemon, a package that recompiles your server code with every change you make to your code; Otherwise, you would have to stop and restart your server on every change.
If you running your server with
nodemon, ensure you update your
server.js, we import the main express module and assign it to a variable, then invoke the function and assign it to another variable
app. NodeJS uses its default CommonJS module system for importing and exporting modules.
Check that terminal is currently reading the
main folder, run
BOOM!!, your express server is up; you should see 'listening on port 4000' in your console.
You might be thinking what the hell is this mysterious number?? Well, It is just an arbitrary port number, servers have ports that are specific to executing different protocols and if we were setting this up on a cloud resource, we wouldn't use an arbitrary number. But then again, that's beyond the scope of this article and since we are running our server locally any number works, feel free to mess around here.
This is the point you open your browser and navigate to
localhost:4000. We currently have a blank page, which is normal; the server is running but we're not serving any files yet.
We can try sending raw text back to our browser like this:
So let me quickly break down our new line, Express calls a
GET method - remember HTTP verbs
(GET, POST, PUT, PATCH, DELETE), you can call them in express as
app.post() etc, depending on what you're trying to do, here we are making a GET request. The first parameter in our GET method is our route name, and the second is a callback function with two objects - request and response
(req, res); feel free to log these objects to see the different properties on them.
res.send() returns the response to the user's request, here we are sending plain text.
Now refresh your browse:
To the fun part: As I mentioned earlier, we are going to use a built-in node module called
path; it allows us to manipulate directories and access files within our node environment.
We import the
path has a
join method that is used to join a number of path-segments to form a single path.
__dirname returns the absolute path with respect to where it's executed, we then join the path returned from
For the panoptic ones, you would also notice we are calling a different method
res.sendFile(), this is a specific method for sending files over a response, it also sets the
Content-Type response HTTP header field based on the filename extension.
Now refresh your browser, you should see that your html file is rendered but your styles aren't loaded. Let's inspect with our browser dev tool, navigate to the network tab.
.js files returned a 404 error status code i.e the server wasn't able to find the resource requested. This is usually the case when file you're requesting for, is also trying to get another external resource like our
.js, which are imported in our
script html tags respectively.
The good guys at Express have designed and built a middleware that helps us handle this cases. A middleware is a piece of software that sits between our request and response to process data exchange and other application-specific functions.
Middleware can be external modules or an abstracted piece of internal logic in our app. To use them, Express provides a built in
use method - apt right? I know.
Let's create another route to
Now we've expressJS serving our portfolio website.
Setting up multiple static files and different subdirectories in your public folder won't break the server, as long as they are properly imported. Conceptually, Express will bundles all our files into the public folder.
Bye for now.