How to Serve Static Resource With Node.js

The static resource is that files can be downloaded from the server. It is very easy to serve the static resource.

The Express middleware can serve the static files to the server. The static files include HTML, javascript, CSS, images, and many more.

Nowadays a website has many static files. It has different fonts, styles scripts files. All these files send via the server so they can be loaded easily.

With Express we don’t have to manually send each file. We can send the entire static directory simultaneously.

For the absolute path, we have to install the path module.

Let’s do it practically

Step-1: Project structure

We will make the index.js file which contains the server code of the project. next, we create the .env file which has all the environment variables. Later on, 3 more directories will be added named node_module, package-lock.json and package.json which have the data of installed modules. And the last directory is the public folder which we will discuss later on.

LICENSE, .gitignore, and README.md are the git files.

Check out my previous blog on how to setup a project from scratch.

Step-2: Setting up the modules

We need to set up the package.json file by running the below command in the terminal inside the application directory:

$ npm init -y

npm init -y command will take default configuration like description, name and other config.

If you want to provide custom configuration use npm init and it will ask you to enter all the details manually.

Now Install the required Modules

$ npm i express path dotenv

1. Express: Express is used as a web application framework.
2. Path: Path provides the absolute path.
3. Dotenv: Dotenv helps to configure the environment variables.

Step-3: Serve the static files

By default, Express does not allow the serving of static files.

We need to enable it by using the middleware.

app.use(express.static('public'))

express.static() create the root route. So, now all the static files consider the public directory as root route.

Express itself looks for the static files. Therefore, the name of static files doesn’t go in the URL.

The public directory contains those files which are exposed to the server if the file is not in the public directory then that file will not be loaded to the server.

dotenv is helps to get environment variables. Dotenv configures the environment variables from the .env file to process.env.

Environmental variable An environment variable is a dynamic-named value that can affect the way running processes will behave on a computer.

server file index.js

Path module provides the way of working with directories and files.

path.join() helps to join the one specified path to the other path.

The first parameter __dirname gives the path of the current directory and the second one gives the public directory path.

We can serve the static images and js files in a public directory.

So create a directory named images and save an image named background.jpeg. Same for the javascript file creates a directory named js and save a file name myJsFile.js.

This is how your HTML file looks like. The HTML file renders the image under the path “/images/background.jpeg” and js file “/js/myJsFile.js”.

Step-4: Test your work

The last step of the project is to test your work.

Start the server up and check your work on chrome.

The file will server on URL:

http://localhost:3000 renders Html file.

http://localhost:3000/images/background render image.

http://localhost:3000/js/myJsFile.js render js file.

Conclusion

In this article, I explained how to serve the static files with NodeJs and the use of dotenv so that we can use environment variables. Environment variables are the dynamic values that can be changed from processor to processor.

I hope this article helps you with the serving static file in NodeJs.

You can find the project on GitHub [here]

Read my other articles:

Crud Operation

Getting started with NodeJs

Registration And Login With JWT Using NodeJs & ExpressJs

If you like this article give a clap 👏 ❤️.