How to quickly create a skeleton of a Web application using Express.js

What is Express?

Express is a “server-side” or “back-end” web application framework for Nodejs. It is an open source software which is used to design web applications and APIs.

Installation

In order to use Express in your application, first you have to install Nodejs and the Node Package Manager (NPM) on your operating system. Following are some instructions which you can follow to install the Long Term Supported (LTS) version of Nodejs on Windows 10, macOS and Ubuntu 20.04.

For Windows and macOS:

1. Download the required installer:

• Go to https://nodejs.org/en/
• Select the button to download the LTS build that is “Recommended for most users”.

2. Install Node from the downloaded file and follow the installation prompts.

For Ubuntu 20.04:

To install most recent version of Node i.e. Node.js v16.x (you can choose any other version of Node from Ubuntu binary distribution repository) run following commands on your terminal:

curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

Create a single page web application:

After you have installed Nodejs, create a directory for your application:

$ mkdir Express_app
$ cd Express_app

Use npm init command to create package.json for your application:

$ npm init

This command prompts you for a number of things, such as the name and version of your application. For now, you can simply hit ENTER to accept the defaults for most of them, with the following exception:

entry point: (index.js)

Enter app.js, or whatever you want the name of the main file to be. If you want it to be index.js, hit ENTER to accept the suggested default file name.

Now install Express in the Express_app directory and save it in the dependencies list:

/Express_app$ npm install express --save

In the Express_app directory, create a file named index.js and paste the following code inside it:

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})

Then, run the app with the following command:

/Express_app$ node app.js

Then, load http://localhost:3000/ in a browser to see the output.

So, basically what we are doing is just initializing the “app” variable with express method which is imported from node modules.Then, we are accepting get request to the index route ‘/’ which has a callback function to send responses. And, in this example we are sending “Hello World!” text as a response in the browser.

Using Express Application Generator to create an application skeleton:

To quickly create a skeleton for your application, you can use the application generator tool, express-generator .

You can run the application generator with the npx command (available in Node.js 8.2.0)

$ npx express-generator

For earlier Node versions, install the application generator as a global npm package and then launch it:

$ npm install -g express-generator
$ express

Display the command options with the -h option:

$ express -h

  Usage: express [options] [dir]

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
        --no-view       generate without view engine
    -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

After you install the express-generator tool with ejs view engine, your directory structure will look something like this:

Now that we’ve got our project set up, we can start the new server by running the following command:

$ npm start

Then load http://localhost:3000/ in your browser to access the app.

The generated Application structure contains four main folders:

1. bin: The bin folder contains the executable file that starts your app.
2. public: This folder will contain all your javascript, css, html files and other assets used in your application and everything within this folder will be accessible to people connecting to your application.
3. routes: The routes folder is where you’ll put all your router files. Your application will be having different files for each route on your website which you can add inside this folder. By default, the generator creates two files, index.js and users.js, which serve as examples of how to separate out your application’s route configuration.
4. views: The views folder is where you have the files used by your template engine.

Outside of these folders, app.js file contains the code which sets up your Express application and connects all of the different parts together.

You can modify this whole structure according to the need for your web application.

Thank you very much for reading so far. I hope, this post has given you a basic understanding of express framework and how to quickly create file structure for your application using express-generator tool.

Resources: https://expressjs.com/, https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs