Build a Simple Beginner App With Bootstrap, MongoDB and Node

Are you thinking of building a simple beginner’s app with Bootstrap, MongoDB, and Node.js? If you do, then you have come to the right place.

In this tutorial, we will build a basic app that uses the Express framework to code the registration form with validation. The database that we are going to use is MongoDB. In the end, the app will show the list of successful registrations. Also, we are going to use Bootstrap to style our app.

1. Installing Node.js and npm
2. Installing MongoDB
3. Application Initialization
4. Getting The App Structure Ready
5. Making nodemon work
6. Installing Pug and integrating with Express
7. Templating with Pug
8. Pug Layout File And Using Child Template
9. Dealing with Forms
10. What’s Next?

Before we start developing our app, we need to set up our environment.

We need three things installed on our machine to start coding. They are Node, npm, and MongoDB.

Installing Node.js and npm

To install node.js on your machine, you need to go to their official site and download the installer to your machine. For this tutorial, we are going to use Windows 10, and that’s why we downloaded the Windows Installer.

Once you install it, your windows 10 now have Node.js installed.

To verify that it is installed, you need to open up the command prompt or PowerShell and type the command:

node -v

or

npm -v

This will show you the installed Node.js version.

Also, npm will automatically be installed with Node.js.

Installing MongoDB

Next, we install MongoDB. To do so, you can go to their official page and download it based on your OS and version requirements. During the installation, you will be asked to install MongoDB compass. It is the official MongoDB GUI, which can come handy while manipulating and visualizing data.

However, if you miss installing it during the initial MongoDB installation, you can visit their official MongoDB Compass page to download it separately.

Now, it is time to see if MongoDB is installed correctly or not. To do so, type the command in either command prompt or PowerShell.

To run the MongoDB server, you need to open Compass, and there connect to a new server by clicking “Fill in connection fields individually.”

And then fill the details as below:

server: localhost
port: 27017

Now press “Connect”. This will open a new window where you will have three new databases automatically created, local, config, and admin.

To check if MongoDB is installed correctly on your system, then you need to add the installation folder of MongoDB /bin folder to the PATH variable.

Application Initialization

Next, we need to initialize the application. To do so, you need to create a folder known as “demo-app.” Once done, move to the folder and then type:

npm init -y

This will create a new package.json file in the root folder. This file is where all the dependencies are listed.

Note: Also, we are going to use the Visual Studio Code for our project. You can use any editor of your choice. We use Visual Studio Code because it provides the ability to run the project directly from the editor itself.

Next, we need to install Express. As we already have npm installed and working, we can install it using the following command.

npm install express

Next, we also want to install nodemon. It automatically restarts the Node server if there are any changes made to the code.

To install it, you need to run the following command.

npm install –save-dev nodemon

After all the operations, the package.json will look like below:

{
  "name": "demo-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

Getting The App Structure Ready

With other tools, libraries, and frameworks installed, we now need to create the basic skeleton of the app we are going to code.

The main files that we need will be app.js and start.js.

Apart from that, we also need to create a router folder where we will create a brand new index.js file.

app.js

In the app.js, you need to copy-paste the following code:

const express = require('express');
const routes = require('./routes/index');

const app = express()
app.use('/', routes);

modules.exports = app;

In the first line, we export the express module and also the index file from the routes folder. Next, we create an app variable where we create a new Express app.

In the last line, we export our app variable so that it can be used by other files.

start.js

const app = require('./app');

const server = app.listen(3000, () => {
    console.log(“ The Express framework is running on port ${server.address().port}');
});

In the start.js file, we import the Express app using the const app = require(‘./app’).

We create another variable server, which then listens to the port 3000 and outputs the message on which server address and port the app is running.

routes/index.js

Next, we need to update our routes. That’s why we now need to add the following code to routes/index.js

const express = require('express')
const router = express.Router();

router.get('/', (req,res) => {
    res.send('The app is running!')
});

module.exports = router;

Here we create the routes file for our Express app. So, if you open up the root URL, the message, “The app is running!” will be shown.

Making nodemon work

We now need to update scripts to make our npm script to use nodemon with our app.

To do so, you need to change the package.json’s script section with the following.

"scripts": {

  "watch": "nodemon ./start.js"

},

Now type npm run watch and you will be able to see your app running at http://localhost:3000

Installing Pug and integrating with Express

To improve our work, we are now going to use a pug template engine.

For those who are new to template engines, it is a way to use static template files. The template engine is good at replacing variables with values. It acts as a layer of code that translates based on the user requirement.

To install pug, we need to use the following command.

npm install pug

Once installed, we need to edit the app.js to use the pug. To do so, you need to update it as below.

const express = require('express');
const path = require('path');
const routes = require('./routes/index');

const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use('/', routes);

module.exports = app;

We also need to alter the template route by going to routes/index.js and then using the new route.

Templating with Pug

With pug installed, we can now use it to create our first form.

Now we can push a message to our app using the router handler; it is now time to expand our application to do more!

To do so, we need to create a views folder.

From there, create the form.pug file and copy-paste the code as below.

form(action = "." method = "POST")
    label (for ="first_name") First Name:
    input (
        type = "text"
        id = "first_name"
        name = "name"
    )

 label (for ="last_name") Last Name:
    input (
        type = "text"
        id = "last_name"
        name = "name"
    )

    label (for="email") Email Address:
    input(
        type="email"
        id="email"
        name="email"
    )

    input(type="submit" value="Submit")

Pug Layout File And Using Child Template

Next, we will create a layout.pug file. We will create it in the views folder and type in the following code.

doctype html
html
head
title = ‘${title}’
body
h2 Our Demo Ap
block content

With our layout created, we now need to make sure that the layout is being used by the form.pug

To achieve the desired result, we need to update our views/form.pug.

We also need to update our routes/index.js file so that it can use the template.

router.get('/', (req, res) => {
    res.render('form', { title: 'Get Registered Now' });
  });

Now, if you open the https://localhost:3000, you will see the following.

Dealing With Forms

If you click submit on the above, you will get the message “Cannot POST\”

To fix it, we need to get the submitted content and then handle it properly.

To define the handle we need to add with the following code in routes/index.js

router.post('/', (req, res) => {
    res.render('form', { title: 'Registration Form 2020' });
});

What’s Next?

There are a lot of things you can do after this tutorial. For example, you can validate form input using the express-validator package and interact with our MongoDB database using the mongoose package for connecting databases and connect it using dotenv package.

Finally, you can also use the http-auth package to do HTTP authentication to your app.

Lastly, you can use the Bootstrap to style the app.

We leave the rest of the journey to you. Also, we are going to cover all of these in our next part, so stay tuned for it!