How to Create a Simple Web App with Express.js

Express.js is a web application server from Node.js. It has been mainly designed for creation of single-page applications, multiple page applications as well as hybrid web applications. More people around the globe prefer to use Express.js as it is easy to master, and has excellent features. When it comes to creating a simple web application, it is difficult to beat Express.js as it is minimalistic in nature, highly flexible, has very few complications and it also has arrange of features that are available as plugins. These can be used to your advantage for any web application that you may choose to create.

Express.js is a cross-platform application server, therefore it will work perfectly with whichever operating system that you are using. It is a web application framework that is designed for use by any person at all levels of skill, and not by a specific group of people.

To get started with Express.js, you have to make sure that you have it installed. Once you have installed Node.js, the installation of Express.js will not be a big deal.

Creation of a Basic Express App

Creation of a simple and basic Express app is not as complicated as the creation of a full app with all the JavaScript files, subdirectories and the bounty of other features that you will be using in the app. Here are the steps that you should follow.

Go to myapp directory and create a file; you can name it app.js. Add it to the code below to start a server:

var express = require(‘express’);
var app = express();

app.get(‘/’, function (req, res) {
res.send(‘Hello World!’);
});

var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;

console.log(‘Example app listening at http://%s:%s’, host, port);
});

The app will start a server and it will keep searching port 3000 for any connection. Any request that you will make to the URL or the route will generate a ‘Hello World’ response. If a request is made for any other path, you will get a 404 Not Found Error message.

You can now run this app and in this case, you will use the following command:

$ node app.js

The app will by now be ready to use. You can load it in your browser to see the output using the URL http://localhost:3000/

Creation of an Application Skeleton

This is the first step to getting you started with a full web App with Express.js. This can be done by use of an application generator tool. The results of this generation will be a full app that has a good number of JavaScript files, a good number of Jade Templates as well as an app with various subdirectories that will serve different purposes in your created app. You have to install it using this command

$ npm install express-generator –g

in order to use it.

Use the –h option in order to display all command options as illustrated below:

$ express -h
Usage: express [options] [dir] Options:
-h, –help output usage information
-V, –version output the version number
-e, –ejs add ejs engine support (defaults to jade)
–hbs add handlebars engine support
-H, –hogan add hogan.js engine support
-c, –css add stylesheet support (less|stylus|compass|sass) (defaults to plain css)
–git add .gitignore
-f, –force force on non-empty directory

After this, install all the decencies like shown:

$ cd myapp
$ npm install

If you are using MacOs of Linux, you will run the app as

$ DEBUG=myapp npm start

But if you are using Windows, this is the command to use:

$ DEBUG=myapp npm start

After this, you can now access your app with ease if you load http://localhost:3000/in your browser.

You will now have a well-developed app with a good structure. You can change the structure to your preference.

Structuring your simple Web App

Every person has their own way through which they structure their web apps. There is usually not a specific way through which it is done. The way that you will structure your web app will mainly depend on the scale of your app as well as the team that you have involved in its creation, if at all you have one.

Express.js is a very flexible web application framework which allows a user to structure your web application exactly the way you want.

Creating a New Project Using Express.js App

After creating a simple web app, it will be time to try and create a new project just to see if your new app is working. You need to open a dialog box; from the project type, there are drop down options from where you choose ‘create a new project’. This is what will lead to the opening of the dialog box that you will use. The dialog box will guide you on what will be needed for your project creation.

From the dialog box, you will have to choose the location in the first box, which is the path where files that are related to the project will be stored. There is the Node Interpreter box as the second box, which in most cases is filled in automatically and it is the location of the Node.js executable file.

There is the nexecutable box as the third box, which is also filled in automatically. The fourth box is the version box. You have to choose the version that you want for the template. There is a drop-down list of options that you can chose from here. Choose the template engine as well from a list of drop down options that are provided for the fifth box.

The other box is the CSS option, where you get to choose the CSS that you want to use for that project. There are available options here too, in a drop down list. This shall be the last box in the creation of your new project.

Creating an app does not require you to have intense technical knowledge, especially when it comes to software and systems. Express.js simplifies everything for you as it is simple to use, easy to understand and has excellent features that will ensure app development is a fantastic experience.