Create your own app with node and Express in under 15 minutes!

6 min readJul 12, 2020

It is a perpetual dream for developers to create something for users. Are you among the herd who want to use the MEAN stack? You’re in luck! I’m one myself. Let’s put our heads together and start with the basics of creating a web app using node and express. I’ll tell you all the steps with which you can create your own application with multiple web pages and a myriad of functionalities. This is a very basic tutorial and hence, our app won’t do much. It will just display some messages for the user but hey! That’s good enough in the beginning.

Node is a backend framework written in JavaScript. In fact, it’s the only JavaScript framework which is used in the backend. The rest of the frameworks available out there which are built on JavaScript are exclusively frontend. This is where node sweeps in like a pirate and takes all the gold. It is a framework which builds the foundation and is very useful for beginners, being pretty robust. We will use the E and N of the MEAN stack now. E stands for Express JavaScript which is used to get dynamic data on web pages. It has a queer syntax. All the ExpressJS statements are actually JavaScript statements enclosed with brackets like <% %> individually.

We will first create a directory where the app will reside. Lets name it wizard.

mkdir wizardcd wizard

If you don’t have node and npm installed on your computer, I would suggest that you do that first. After its done. The following command is used to make a package.json file which keeps track of the packages being installed in the application.

npm init

We will now go ahead and install the packages that will be required in our application. At this point, I sound like a 50-year-old instructor who doesn’t care about the depression his student is going through :)

npm install express body-parser ejs nodemon mongoose — save

The mongoose being installed is actually used to create MongoDB databases. It’s a part of the backend and even though I will not be using it in this app now, you might as well have it installed because it’s the M in MEAN and its bound to be used sometime later.

Create a file named app.js in the folder wizard. It’s a personal preference. You can name it index.ejs/server.js or anything you want to.

touch app.js

Open the above file in any code editor and add the following code to it.

var express      = require(“express”),
    app          = express(),
    bodyParser   = require(“body-parser”),
    path         = require('path');
    mongoose     = require(“mongoose”);app.use(bodyParser.urlencoded({extended: true}));
app.set(“view engine”, “ejs”);
app.use(express.static(path.join(__dirname, 'public')));

Cool it, guys. I am explaining the code. You are creating a variable named express and requiring the package express in it. You are then creating another variable named app and making use of express with it. App is the variable that we are going to use extensively. It is used for routing us to the pages that we wish to show on our application. We do the same with all the packages installed, requiring them in our application.

The body-parser package extract s the entire body portion of an incoming request stream and exposes it on req. body .This body-parser module parses the JSON, buffer, string and URL encoded data submitted using HTTP POST request.(Don’t think too much about this.)

We will now create another directory called views and add an .ejs file to it.

mkdir viewscd viewstouch index.ejs

Open the file above and write the simple code below. (I promise I’ll make it fancy later.) These files have all the HTML data which can be made dynamic when the need arises.

<!DOCTYPE html> 
<html>
 <head>
  <title>Wizard app</title>
  <link rel='stylesheet' type='text/css'  href='/stylesheet/index.css' />
</head>
 <body>
  <div class=”wizard”>
   <h1>Hello there! Ready to be a wizard?</h1>
  </div>
 </body>
</html>

We will now check if things are working properly. The code tells your app to listen on port 3000.

app.listen(3000, process.env.IP, function(){ console.log(“Server has started”);});

We will now add the message that has to be displayed on the page when we start the app.

app.get(“/”, function(req, res){ res.send(“Hello there! Ready to be a wizard?”);});

The get request is used to show something on the page. It is generally used to display information from the database on to the page in your app but more of that, later. Here, the slash you see inside the double quotes is actually the URL. A simple slash is conventionally used for the homepage. The URL gets more complicated as we proceed.

Go to your terminal, navigate to the wizard directory and type the following command:

node app.js

Open a browser and type the following URL if you’re on Windows.

Localhost:3000

The URL below will be for everyone using Linux:

127.0.0.1:3000

If you see the message for the wizard above, congratulations! You have successfully created your very first simple app. Let’s make it fancy now.

Create another directory called public where we will keep out stylesheets. Create another folder called stylesheets and a file called app.css there. We will style our page there. So, your final directory structure should look like this:

app.js
views
 index.ejs
public
 stylesheets
  style.css

Now, go to the index.ejs and make changes to the code. When we need to send some text, we use res.send. This is generally not the case with large web apps. We need to display whole pages and this is where the view engine called ejs comes into use. We write HTML with JavaScript in .ejs files and show them with res.render. Therefore, the code takes the following form

app.get(“/”, function(req, res){  res.render(“index”);});

If you see the following page, then your app is working properly.

Notice that the app.get now displays the content that is there in the index.ejs file. We shall add in a few styles so that our page looks a little fancy. This will be added to style.css.

body {
 background-image:  url(https://cdn.pixabay.com/photo/2019/01/05/01/49/classic-3914475_1280.jpg);
 text-align: center;
}#wizard {
 color: white;
 padding-right: 290px;
 padding-top: 50px;
 font-family: 'Courier New', Courier, monospace;
 animation-name: example;
 animation-duration: 4s;
 animation-delay: 2s;
 animation-iteration-count: 100;
}@keyframes example {
 from {color: cornflowerblue;}
 to {color: white;}
}

If you followed all the steps properly, you’ll see the following screen:

Your simple app is ready. You can now get the horses or your imagination up and running. Add a few pages and navigate among them. Add buttons and their functionality. Whatever you do, don’t forget to have fun and don’t fail to notice the animation on your page!

Create your own app with node and Express in under 15 minutes!

Written by Bhawna Patnaik