1 - Introduction

Introduction

Hey all! So I created a large project a bit ago of a web app using a MEAN Stack. Instead of keeping the project in one huge tutorial, It is more appropriate to make a tutorial set with more descriptive modules. The project that we will be creating is a simple forum.

The forum will be a simple topic board. In order to view the topics, users would have to create an account. Once authenticated, users can go into topics and view comments. They should also be able to post, update, and delete comments that they have made themselves. Simple enough? We got to choose to build this project using LAMP (Linux, Apache, MySQL, PHP) or MEAN (MongoDB, Express, AngularJS, NodeJS).

Let’s get started!

Downloading Dependencies

First we need to download all of our dependencies. I will provide commands for Linux and OSX (I’m using OSX myself). I’m not much of a PC user but if you are developing on PC the commands are very similar and probably not difficult to look up.

First we need node, which will give us the node package manager (npm). We are going to use Node as a primary piece of our backend (That’s what the N stands for in MEAN).

# Linux 
$ sudo apt-get install node
# OSX (using homebrew)
$ brew install node

Let’s download MongoDB, the database for our project

# Linux
$ sudo apt-get install mongodb-org
# OSX (Homebrew)
$ brew update
$ brew install mongodb

If you have never had Mongo running before, you need to make sure you have the right folder to store your databases, or else the program won’t run (beware you may have to mess with permissions depending on your filesystem’s config).

$ mkdir -p /data/db

Coolio, now we can spin up our database with the following command:

$ mongod --smallfiles --syslog --fork

Beautiful, moving right along.

Let’s now create the folder structure for our project:

Create a folder called forum. Inside forum, we want folders called app, client, and config.

We also want to create a couple files: package.json and server.js

Here’s the commands:

$ cd
$ cd Desktop (Assuming you want the folder on your desktop)
$ mkdir forum
$ cd forum
$ mkdir app client config
$ touch package.json
$ touch server.js

Awesome, now let’s edit our package.json with the following information:

{
  "name": "forum-example",
  "version": "0.0.0",
  "description": "A forum example to showcase an Authentication MEAN stack with CRUD capabilities",
  "main": "server.js",
  "private": true,
  "licence": "UNLICENSED",
  "author": "Joshua Streger <jdstreger@gmail.com>",
  "dependencies": {
  }
}

This file is specifying information for our project, each field is pretty self-explanatory. We currently don’t have any dependencies that we want to include, and we want our main run file to be our server.js file. Make sure to put in whatever information matches you and your project.

Let’s install our first dependency: Express. Now Express is a web framework for NodeJS, and it is our E in MEAN.

$ npm install express --save

This will install express in an automatically created folder “node-modules” and will also add it to our package.json’s dependencies section.

And as of right now we have exactly what we need to run a simple server.

server.js

Now let’s spin up a simple express server:

// server.js
// Joshua Streger

// Dependencies
var express = require('express');
var http = require('http');

// Create our express app
var app = express();

// Create our router
var router = express.Router();

// Create our simple response
router.get('/', function(req, res) {
	res.json({message: "Hello, World!"});
});

// Tell our app to use our router.
app.use(router);

// Create our server using our app
var server = http.createServer(app);

// Tell our server to listen to requests
var ip = process.env.IP || "0.0.0.0";
var port = process.env.PORT || 3000;

server.listen(port, ip, function(){
	var addr = server.address();
	console.log("Generic server listening at", addr.address + ":" + addr.port);
});

Let’s break this down:

  1. We import two dependencies: express and http. Express is what we are using to package our application, and http is what we are using to create our server.
  2. We initialize an app in express
  3. We create a main router in express. Routers are what we are going to use to seperate the different paths to our application.
  4. We tell our router that whenever someone sends a request to the root of our app (‘/’), then we will return a response containing the JSON message “Hello, World”.
  5. We make sure to tell our app to use our main router.
  6. We put our app in the created server.
  7. Finally we specify ip and port values, and then make our server live by listening to incoming connections.

Now all we have to do is run the following:

$ node server.js

If it runs properly, then we should be able to visit to where our program is running and see the following message: Hello World

Congrats! Our first running server. Check out the next tutorial to start seeing some data persistance using Mongo!

Updated: