The MEAN stack is used to describe development using MongoDB, Express.js, Angular.jS and Node.js. In this tutorial I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database. It will also show all items that have been entered into the database.
Before we get started I will describe a few terms that you will frequently hear when creating a MEAN stack application. After that we will start building our example.
CRUD
CRUD is an acronym that means Create, Read, Update and Delete. It is used to describe the process of having your data persisted into a database. In this example you will be providing examples of Creating new data into the database and then Reading the data from the database.
Restful API
A RESTful API is an application program interface that uses HTTP requests to GET, PUT, POST and DELETE data. We will be using an API to define when we add data to our database and when we read from the database.
Creating a Node Application
To get started I would recommend creating a new database that will contain our application. For this demo I am creating a directory called node-demo. After creating the directory you will need to change into that directory.
mkdir node-demo cd node-demo
Once we are in the directory we will need to create an application and we can do this by running the command
npm init
This will ask you a series of questions. Here are the answers I gave to the prompts.
The first step is to create a file that will contain our code for our Node.js server.
touch app.js
In our app.js we are going to add the following code to build a very simple Node.js Application.
var express = require("express"); var app = express(); var port = 3000; app.get("/", (req, res) => { res.send("Hello World"); }); app.listen(port, () => { console.log("Server listening on port " + port); });
What the code does is require the express.js application. It then creates app by calling express. We define our port to be 3000.
The app.use line will listen to requests from the browser and will return the text "Hello World" back to the browser.
The last line actually starts the server and tells it to listen on port 3000.
Installing Express
Our app.js required the Express.js module. We need to install express in order for this to work properly. Go to your terminal and enter this command.
npm install express --save
This command will install the express module into our package.json. The module is installed as a dependency in our package.json as shown below.
To test our application you can go to the terminal and enter the command
node app.js
Open up a browser and navigate to the url
http://localhost:3000
You will see the following in your browser
Creating Website to Save Data to MongoDB Database
Instead of showing the text "Hello World" when people view your application, what we want to do is to show a place for user to save data to the database.
We are going to allow users to enter a first name and a last name that we will be saving in the database.
To do this we will need to create a basic HTML file. In your terminal enter the following command to create an index.html file.
touch index.html
In our index.html file we will be creating an input filed where users can input data that they want to have stored in the database. We will also need a button for users to click on that will add the data to the database.
Here is what our index.html file looks like.
<!DOCTYPE html> <html> <head> <title>Intro to Node and MongoDB<title> <head> <body> <h1>Into to Node and MongoDB</h1> <form method="post" action="/addname"> <label>Enter Your Name</label><br> <input type="text" name="firstName" placeholder="Enter first name..." required> <input type="text" name="lastName" placeholder="Enter last name..." required> <input type="submit" value="Add Name"> </form> <body> <html>
If you are familiar with HTML, you will not find anything unusual in our code for our index.html file. We are creating a form where users can input their first name and last name and then click an "Add Name" button.
The form will do a post call to the /addname endpoint. We will be talking about endpoints and post later in this tutorial.
Displaying our Website to Users
We were previously displaying the text "Hello World" to users when they visited our website. Now we want to display our html file that we created. To do this we will need to change the app.use line our our app.js file.
We will be using the sendFile command to show the index.html file. We will need to tell the server exactly where to find the index.html file. We can do that by using a node global call __dirname. The __dirname will provide the current directly where the command was run. We will then append the path to our index.html file.
The app.use lines will need to be changed to
app.use("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
Once you have saved your app.js file, we can test it by going to terminal and running node app.js
Open your browser and navigate to "http://localhost:3000". You will see the following
Connecting to the Database
Now we need to add our database to the application. We will be connecting to a MongoDB database. I am assuming that you already have MongoDB installed and running on your computer.
To connect to the MongoDB database we are going to use a module called Mongoose. We will need to install mongoose module just like we did with express. Go to your terminal and enter the following command.
npm install mongoose --save
This will install the mongoose model and add it as a dependency in our package.json.
Connecting to the Database
Now that we have the mongoose module installed, we need to connect to the database in our app.js file. MongoDB, by default, runs on port 27017. You connect to the database by telling it the location of the database and the name of the database.
In our app.js file after the line for the port and before the app.use line, enter the following two lines to get access to mongoose and to connect to the database. For the database, I am going to use "node-demo".
var mongoose = require("mongoose");
mongoose.Promise = global.Promise;
mongoose.connect("mongodb://localhost:27017/node-demo");
Creating a Database Schema
Once the user enters data in the input field and clicks the add button, we want the contents of the input field to be stored in the database. In order to know the format of the data in the database, we need to have a Schema.
For this tutorial, we will need a very simple Schema that has only two fields. I am going to call the field firstName and lastName. The data stored in both fields will be a String.
After connecting to the database in our app.js we need to define our Schema. Here are the lines you need to add to the app.js.
var nameSchema = new mongoose.Schema({
firstName: String,
lastNameName: String
});
Once we have built our Schema, we need to create a model from it. I am going to call my model "DataInput". Here is the line you will add next to create our mode.
var User = mongoose.model("User", nameSchema);
Creating RESTful API
Now that we have a connection to our database, we need to create the mechanism by which data will be added to the database. This is done through our REST API. We will need to create an endpoint that will be used to send data to our server. Once the server receives this data then it will store the data in the database.
An endpoint is a route that our server will be listening to to get data from the browser. We already have one route that we have created already in the application and that is the route that is listening at the endpoint "/" which is the homepage of our application.
HTTP Verbs in a REST API
The communication between the client(the browser) and the server is done through an HTTP verb. The most common HTTP verbs are
GET, PUT, POST, and DELETE.
The following table explains what each HTTP verb does.
| HTTP Verb | Operation |
|---|---|
| GET | Read |
| POST | Create |
| PUT | Update |
| DELETE | Delete |
As you can see from these verbs, they form the basis of CRUD operations that I talked about previously.
Building a CRUD endpoint
If you remember, the form in our index.html file used a post method to call this endpoint. We will now create this endpoint.
In our previous endpoint we used a "GET" http verb to display the index.html file. We are going to do something very similar but instead of using "GET", we are going to use "POST". To get started this is what the framework of our endpoint will look like.
app.post("/addname", (req, res) => {
});
Express Middleware
To fill out the contents of our endpoint, we want to store the firstName and lastName entered by the user into the database. The values for firstName and lastName are in the body of the request that we send to the server. We want to capture that data, convert it to JSON and store it into the database.
Express.js version 4 removed all middleware. To parse the data in the body we will need to add middleware into our application to provide this functionality. We will be using the body-parser module. We need to install it, so in your terminal window enter the following command.
npm install body-parser --save
Once it is installed, we will need to require this module and configure it. The configuration will allow us to pass the data for firstName and lastName in the body to the server. It can also convert that data into JSON format. This will be handy because we can take this formatted data and save it directly into our database.
To add the body-parser middleware to our application and configure it, we can add the following lines directly after the line that sets our port.
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
Saving data to database
Mongoose provides a save function that will take a JSON object and store it in the database. Our body-parser middleware, will convert the user's input into the JSON format for us.
To save the data into the database, we need to create a new instance of our model that we created early. We will pass into this instance the user's input. Once we have it then we just need to enter the command "save".
Mongoose will return a promise on a save to the database. A promise is what is returned when the save to the database completes. This save will either finish successfully or it will fail. A promise provides two methods that will handle both of these scenarios.
If this save to the database was successful it will return to the .then segment of the promise. In this case we want to send text back the user to let them know the data was saved to the database.
If it fails it will return to the .catch segment of the promise. In this case, we want to send text back to the user telling them the data was not saved to the database. It is best practice to also change the statusCode that is returned from the default 200 to a 400. A 400 statusCode signifies that the operation failed.
Now putting all of this together here is what our final endpoint will look like.
app.post("/addname", (req, res) => {
var myData = new User(req.body);
myData.save()
.then(item => {
res.send("item saved to database");
})
.catch(err => {
res.status(400).send("unable to save to database");
});
});
Testing our code
Save your code. Go to your terminal and enter the command node app.js to start our server. Open up your browser and navigate to the URL "http://localhost:3000". You will see our index.html file displayed to you.
Make sure you have mongo running.
Enter your first name and last name in the input fields and then click the "Add Name" button. You should get back text that says the name has been saved to the database like below.
Access to Code
The final version of the code is available in my Github repo. To access the code click here. If you like this tutorial, please star my github repo.
Great article, but it says in the intro that it would explain how to ‘show’ all the data in the database, and I can’t see where in the article this is explained?
hello friend you can see the data by making run of mongo on cmd prompt by taking the path of bin of mongodb then simply write the “db node-demo” command to access to database created automatically on run of above program and the simply enter “db” to check the current database and then enter “show collections” which displays “users” collection name automatically formed via app.js;;;;;;;;;;;;;;;;;;;;;finally to show the stored data ;;;;;;;enter “db.users.find().pretty();
thankyou
Hi,
I am following this article but seems like data is not getting inserted or i am unable to read it.
When i try db it just shows me local admin config.
This was an awesome tutorial for a beginner like me.
Above code is not saving the details entered to database. please check it once
Guys..this code will run only if you correct the syntax of index.js file..the closing tags are not there in it.
Thanx me later.
Thanks for the tut…concise and efficient. Helped clear up HTTP verb concept as well as communication with client/server via get
This is really awesome. I will suggest this page for some of my friends who are beginners like me.
Could you please let me know have you make something like the following Angular.js as front end and Node.js as bankend using mangodb as database.
(I’m little bit confused with the angular.js)
Thanks in advance.
Dear Jennifer
thanks very much for you teaching example. I finished several hi-rated paid Node/Express/MongoDB courses, but your example how to send user data to MongoDB is more clear and easier to understand than all those three courses together. I needed to repeat those lessons twice and still wasn’t able to understand what is happening and what to do, like you did here.
Maybe you should make Node/MongoDB course on Udemy, I think it surely would be appreciated, based on your very good teaching style. I think those programmers/teachers too often teach in a confusing, abit ‘pompous’ way known only to them, while not very understandable to majority of sudents.
Thank you again
Hi, I tried as you said But that index.html file is not showing to me. But I am getting hello world msg . what should I do.
var express = require(“express”);
var app = express();
var port = 3000;
app.get(“/”, (req, res) => {
res.send(“Hello World”);
});
app.use(“/”, (req, res) => {
res.sendFile(__dirname + “/index.html”);
});
app.listen(port, () => {
console.log(“Server listening on port ” + port);
});
var mongoose = require(“mongoose”);
mongoose.Promise = global.Promise;
mongoose.connect(“mongodb://localhost:27017/node-demo”);
var nameSchema = new mongoose.Schema({
firstName: String,
lastNameName: String
});
var User = mongoose.model(“User”, nameSchema);
var bodyParser = require(‘body-parser’);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.post(“/addname”, (req, res) => {
var myData = new User(req.body);
myData.save()
.then(item => {
res.send(“item saved to database”);
})
.catch(err => {
res.status(400).send(“unable to save to database”);
});
});
change app.use to app.get.
hey everthing is working fine but cant find my data using db.dbname.find()
in database only the first name is stored , it was suppose to store both firstname and lastname , ?
Thanks for the great post Jennifer. It helps.
For all who were looking for this article’s code in github. Here’s the URL – https://github.com/ratracegrad/node-mongo-demo
Thank you so much for this awesome tutorial!! Saved the day!
Awesome ! Thank you !!
Hi Jennifer, many thanks for the nice tuto … ( just to highlight for your intention, there are a small typo in the 11th title : ‘HTML verbs in a REST API’ … should be ‘HTTP verbs …’ :))
best regards,
A.Hakim
Great Explanation. Really enjoyed the article reading. I suggest you to write more and more tutorials like these.
Thanks for the kind words. Keep watching my website as I will be posting more articles in the near future.
Hi. Awesome tutorial, but I had a question. It is possible that I screwed things up somehow, but I am unable to get the “Hello World” program to run as written. When I run node app.js, I get a syntax error on line 7, where node is complaining about an unexpected token, specifically the leading ampersands in the ‘ ‘ entries:
SyntaxError: Unexpected token &
at new Script (vm.js:73:7)
at createScript (vm.js:245:10)
at Object.runInThisContext (vm.js:297:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:266:19)
I am going to try and figure it out myself but if you know what is going on here I would love to know. I am doing the tutorial on High Sierra. If I remove the non-breakable spaces then the server runs. Thanks again for the tutorial, you have a nice website here!
Best,
Anthony
Hey,
If you send me a link to your code on GitHub I will take a look at it and see if I can help you figure out what is causing the error.
Jennifer
This is a copy and paste error due to different character encoding. The ” ” in the above code are basically “translated” spaces. And the html text has the backspace “translated” into “/”. Once you get rid of these and replace the &bsp stuff with a space or tab and the &47 stuff with a “/” everything works fine. Cheers 🙂
This site truly has all the information I needed about this subject and didn’t know who to
ask.
Hello,
Thank you very much for posting useful document on insert record in mongoDB using NodeJS.
I tried all the steps following instruction mentioned in the document but somehow when I hit Submit button then nothing happens. I tried with console.log statement inside the app.post but it is not getting printed on console. So it seems that somehow app.post is not getting triggered.
Could you please revert with missing step.
Appreciate your response.
Regards,
Parag
Send me a link to your code on GitHub and I will look at it.
it is not saving the data and not even creating any collection and database. Do I need to create collection in database?
Thanks for the write up. It was really useful. But I am not able to see the data getting populated in the database though I am getting the “Data is saved” message.
Hello,
Thank you very much for posting live example as it is very useful.
Could you please share one more example for Parent child relation like Account as a parent and multiple Activities as child records.
Regards,
Parag
please am receiving a response unable to save to database .what should i do.
Thank you a lot, Jennifer Bland. This tutorial helped me to progress in building my website wich is e-commerce like amazon, but a small one. I am trying to buil my website using minimum number of technology – only javascript and it’s libriaries and frameworks. Thanks to Google as well, for supporting angular.js. and other libriaries.
This example is very useful.
Thanks for the tutorial Jennifer,
I used a free mongodb set up at https://cloud.mongodb.com/.
Everything works great but my data values come through very strange.
This is how they show up, any idea why?
_id:ObjectId(“5c9966ba5027082f56eec52d”)
__v:0
It appears that the data is not being stored in the database. That is usually when the form cannot read the values for the input fields. Your input fields need to have a name and id.
I am using Angular 7 and node server (with mean stack) and having a bit of a challenge. I’m attempting to work with a mongodb collection that has fields with spaces in the names, “Employee Name”, as an example. I was able to use an alias in the server model which allows me to save data into the field, however I am not able to get and display the data for my html. I’m a bit of a novice in Angular I admit, so any ideas as to how I can do this? I would even consider coping the data into another variable, although I haven’t been able to make that work either. Thanks
Very nice blog post. I definitely appreciate this site.
Continue the good work!
For anyone trying to get this to work i needed to make some adjustments.
The first ref to app.js has some broken code (viewing on ubuntu firefox/chrome or mac safari)
app.get(“/”, (req, res) => {
res.send(“Hello World”);
});
the first chunk of html has broken urlencoding.
html, title, head, body have no closing tag
h1, label have incorrect encoding
You will need to install MongoDB outside of this app and have it running:
sudo apt install -y mongodb
sudo systemctl start mongodb
Also i didnt use mongoose as i was having some issues with it so i stripped it out.
Final app.js looks like this (sorry if this doesnt parse correctly.)
var express = require(‘express’);
var bodyParser = require(‘body-parser’);
var app = express();
var port = 3000;
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Mongo Start
const mongo = require(‘mongodb’).MongoClient;
const url = ‘mongodb://localhost:27017’;
let db, collection;
mongo.connect(url, {
useNewUrlParser: true,
useUnifiedTopology: true
}, (err, client) => {
if (err) {
if (err.toString().indexOf(“ECONNREFUSED”)) {
console.log(“Cant connect to Mongodb\n\n\
1) start it with :\n\
sudo systemctl start mongodb \n\n\
2) or install it with:\n\
sudo apt install -y mongodb\
“);
} else {
console.error(err);
}
return;
}
db = client.db(‘demo’);
collection = db.collection(‘users’);
});
// Mongo End
app.post(‘/addname’, (req, res) => {
collection.insertOne(req.body,(err, result) => {
if (err) {
console.log(‘show warrning’);
res.status(400).send(‘unable to save to database’);
} else {
res.send(‘item saved to database’);
}
});
});
app.use(‘/’, (req, res) => {
res.sendFile(‘index.html’, { root: __dirname });
});
app.listen(port, () => {
console.log(‘Server listening on port ‘ + port);
});
Excellent post. I’m experiencing many of these issues as well..
Fantastic Tutorial! Could you do a followup that shows how to include the .css file to render? And how to get the site to automatically go back to the root after so many seconds of displaying the data went in successfully??
I loved your tutorial. It was so great and closed so many gaps I had between Forms, and Database calls. Would like to seem more examples with different input types like boolean states and inputs that show up when another input is selected. or if you have a good ref 😛
Best wishes and Kudos
var express = require(‘express’);
var router = express.Router();
// //get page model
var Page = require(‘../models/page’);
//get page index
router.get(‘/’,function(req,res){
page.findOne({}).sort({sorting: 1}).exec(function(err,pages){
res.render(‘admin/pages’,{
pages : pages
});
});
});
//get add page
router.get(‘/add-page’,function(req,res){
var title = “”;
var slug = “”;
var content = “”;
res.render(‘admin/admin_page’,{
title : title,
slug : slug,
content : content
});
});
//post add page
router.post(‘/add-page’,function(req,res){
req.checkBody(‘title’,’Title must has a value’).notEmpty();
req.checkBody(‘Content’,’Content must has a value’).notEmpty();
// var string = “”,
// regex = /\s+/g;
// var modified = string.replace(regex, function(match) {
// return match.toLowerCase();
// });
var title = req.body.title;
var slug = req.body.slug.replace(/\s+/g, “-“).toLowerCase();
if (slug == “”)
slug = title.replace(/\s+/g, “-“).toLowerCase();
var content = req.body.content;
var errors = req.validationErrors();
if(errors){
res.render(‘admin/admin_page’,{
errors : errors,
title : title,
slug : slug,
content : content
});
console.log(“error”)
}else{
Page.in({slug:slug },function(err,page){
if(page){
req.flash(‘danger’,’page slug exist,choose another’);
res.render(‘admin/admin_page’,{
title : title,
slug : slug,
content : content
});
}else{
var page = new Page({
title:title,
slug : slug,
content : content,
sorting:0
});
page.save(function(err){
if(err)
return console.log(err);
req.flash(‘success’,’Page added’);
res.redirect(‘/admin/pages’);
});
}
});
}
});
//Exports
module.exports = router;
my data are not go to mongodb compass collection
Hey! This is my first comment here so I just
wanted to give a quick shout out and tell you
I really enjoy reading your blog posts. Can you suggest any other blogs/websites/forums that cover the same topics?
Thank you!
I tried it and got the positive response. However, I am still very far from how I can view these data stored in the database. I would be very grateful if you can do a brief tutorial on how I can view my database in a table created on my prospective website.
Thanks alot
how can find the data in the mongodb terminal
Dear Jennifer,
It worked almost instantly, great work, great material, I enjoy the way you explained , very clear, concise.
You are good teacher.
I also will explore your other work
Big thanks.
It looks like you are trying to access MongoDB over HTTP on the native driver port. How to fix this???