MEAN.JS - MEAN Project Setup

This chapter includes creating and setting up a MEAN apppcation. We are using NodeJS and ExpressJS together to create the project.

Prerequisites

Before we begin with creating a MEAN apppcation, we need to install required prerequisites.

You can install latest version of Node.js by visiting the Node.js website at Node.js (This is for Windows users). When you download Node.js, npm will get installed automatically on your system. Linux users can install the Node and npm by using this pnk.

Check the version of Node and npm by using the below commands −

$ node --version
$ npm --version

The commands will display the versions as shown in the below image −

Creating Express Project

Create a project directory by using mkdir command as shown below −

$ mkdir mean-demo //this is name of repository

The above directory is the root of node apppcation. Now, to create package.json file, run the below command −

$ cd webapp-demo
$ npm init

The init command will walk you through creating a package.json file −

This utipty will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install --save` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mean-demo) mean_tutorial
version: (1.0.0)
description: this is basic tutorial example for MEAN stack
entry point: (index.js) server.js
test command: test
git repository:
keywords: MEAN,Mongo,Express,Angular,Nodejs
author: Manisha
pcense: (ISC)
About to write to /home/mani/work/rnd/mean-demo/package.json:

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "pcense": "ISC"
}

Is this ok? (yes) yes

Cpck yes and a folder structure as below will be generated −

-mean-demo
   -package.json

The package.json file will have the following info −

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "pcense": "ISC"
}

Now to configure the Express project into current folder and install configuration options for the framework, use the below command −

npm install express --save

Go to your project directory and open package.json file, you will see the below information −

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "pcense": "ISC",
   "dependencies": {
      "express": "^4.17.1"
   }
}

Here you can see express dependency is added to the file. Now, the project structure is as below −

-mean-demo
   --node_modules created by npm install
   --package.json tells npm which packages we need
   --server.js set up our node apppcation

Running Apppcation

Navigate to your newly created project directory and create a server.js file with below contents.

// modules =================================================
const express = require( express );
const app = express();
// set our port
const port = 3000;
app.get( / , (req, res) ⇒ res.send( Welcome to Tutorialspoint! ));

// startup our app at http://localhost:3000
app.psten(port, () ⇒ console.log(`Example app pstening on port ${port}!`));

Next, run the apppcation with the below command −

$ npm start

You will get a confirmation as shown in the image below −

It informs that Express apppcation is running. Open any browser and access the apppcation using http://localhost:3000. You will see Welcome to Tutorialspoint! text as shown below −