Setting up & serving static files in ExpressJS
Tags: backend, javascript, servers, beginners
Published: 2022-06-24 15:43:06

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](https://expressjs.com/). 

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](https://nodejs.org/en/).

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.

![npm install express](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebabrc93sgfrit0trwuk.png) 

If you running your server with `nodemon`, ensure you update your `package.json` scripts.

![Updating your scripts in package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6d7t55w16xoxasx0pig8.png)

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.

![create express server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4krom8mwq3fvh4v7plek.png)

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:

![res.send()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6n79bavfvyl79balmtz.png)

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.

![Using node path to read files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yyyoqowiffct1nvouva.png)

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.


![Network tab, Chrome dev tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz7oleph9ppuvvj6f28f.png)

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??*

![Calma calma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03nj61qbh2ksvgmvw088.gif)

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.*

![using express.static to serve static files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do69lkpextw0h51sibbg.png)

`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`

![Multiple routes in expressJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfj0tajtzlujucb432jq.png)

####SUIIIII

![SUIIIII](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/311pd93rheljtt7yldr2.gif)

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.