Setting up & serving static files in ExpressJS

Ayodeji Akinborewa — Fri, 24 Jun 2022 15:43:06 +0000

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.

So what is Express?

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.

Now 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 package.json scripts.

In our 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 npm start

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.get(), 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: Hello world.

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 module, 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 __dirname with public/index.html

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.

Notice the .css and .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 .css and .js, which are imported in our link and script html tags respectively.

Stressed??

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.

express.static() serves static files such as images, CSS files, and JavaScript files. The first parameter it accepts, is the folder containing the static assets. (Be mindful to call the middleware method before your routes).

Let's create another route to about.html

SUIIIII

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.

Ayodeji Akinborewa.

DEV Community: Ayodeji Akinborewa

Setting up & serving static files in ExpressJS

So what is Express?

SUIIIII