DEV Community

Cover image for Serving Your Static Files With Express
Cherrypick14
Cherrypick14

Posted on

Serving Your Static Files With Express

Getting started with Express

What is Express?

It's basically a web application framework for Node.

First things first. Ensure your node.js env is set up. If not and you are a linux user, you can use a tool called Node Version Manager to help install node on your machine. Note: You should have git and curl installed. To get started with git and curl if at all you don’t have them installed in your system’s package manager. Example on an ubuntu or Debian, one would run

sudo apt-get install curl git 
Enter fullscreen mode Exit fullscreen mode

So back to Express. Some of its merits include its flexibility _and _minimality. To get started using Express, you need to use NPM to install the module.

npm install -g express
Enter fullscreen mode Exit fullscreen mode

To get all dependencies that are needed to run the app, you run

npm install
Enter fullscreen mode Exit fullscreen mode

Once you have Express installed and an already existing directory like the one below, you’ll get to see something like this in the package.json file in “dependencies”.

Image description

Let's talk about nodemon for a sec:

From the above snip, you guys can note the nodemon in the devdependencies. It’s actually a tool that helps node.js based applications by automatically restarting the node application
when file changes in the directory are spotted. To install nodemon on your project as dev-dependency, just type;

npm install nodemon --save-dev
Enter fullscreen mode Exit fullscreen mode

So to get started on serving your files with Express, make sure you have all your files including the index.html in your public directory.

The files can be served as below:

Image description

Incase this doesn’t work out for you, you can try using serve-index. Much is explained in this article. Check it out here:

Opened to any feedback. #Learning never stops

https://medium.com/swlh/serve-directory-listings-in-an-express-app-with-serve-index-ff54f20c9636

Top comments (0)