Building my own mean framework : a-mean - Part 1

TL;DR

In this series of articles we will be building a very basic mean framework with login and registration functionality.

Features of the framework:

1. Angular 6
2. Angular material 2
3. Login — Registration
4. Authentication using JWT & passport
5. dashboard

Goals :

1. Creating a node server
2. Create authentication using passport & JWT
3. Setup angular 6
4. Use material design 2
5. Integrate frontend with backend.

As the process is a bit long we will be dividing this article into multiple parts -

Part 1 : Setting up a node back-end
Part 2 : Creating authentication in the backend
Part 3 : Setup front-end with angular
Prat 4 : Tie up everything together.

Part 1 : Setting up a node back-end

I have used this method of setting up a node server in previous post “File Upload with Progress bar using Angular 5 and NodeJS”. Also this article helped me set up the back-end. But I think that needs to be in a separate post. So, here goes nothing…

1. Lets call our framework ‘a-mean’. So, lets create a folder named ‘a-mean’ and cd into it

mkdir a-mean && cd a-mean

2. Now lets initiate a node project here.

npm init

add the entry point as app.js white the init process

3. Then, add bin folder and www file inside bin folder.

mkdir bin
touch bin/www

4. Open and edit www file then add this lines of codes.

#!/usr/bin/env node
/**
 * Module dependencies.
 */
var app = require('../app');
var debug = require('debug')('mean-app:server');
var http = require('http');
/**
 * Get port from environment and store in Express.
 */
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
 * Create HTTP server.
 */
var server = http.createServer(app);
/**
 * Listen on provided port, on all network interfaces.
 */
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
 * Normalize a port into a number, string, or false.
 */
function normalizePort(val) {
  var port = parseInt(val, 10);
  if (isNaN(port)) {
    // named pipe
    return val;
  }
  if (port >= 0) {
    // port number
    return port;
  }
  return false;
}
/**
 * Event listener for HTTP server "error" event.
 */
function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }
  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;
  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}
/**
 * Event listener for HTTP server "listening" event.
 */
function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

5. Now, create app.js in the root of project folder.

touch app.js

6. Open and edit app.js then add all this lines of codes.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var morgan = require('morgan');
// Use body-parser to get POST requests for API use
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(morgan('dev'));
// Create API group routes
var apiRoutes = express.Router();
//routes
require('./server/routes/routes.js')(apiRoutes);
// Set url for API group routes
app.use('/api', apiRoutes);
module.exports = app;

7. Next, create a server folder and a routes folder inside the server folder then create routes file routes.js for apis

mkdir server
mkdir server/routes
touch server/routes/routes.js

8. Open and edit server/routes/routes.js file then add this lines of codes.

module.exports = function(apiRoutes) {
/* GET home page. */
 apiRoutes.get('/', function(req, res, next) {
   res.send('Express RESTful API with nodemon');
 });
};

9. Update your package.json

{
  "name": "a-mean",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ./bin/www",
    "dev": "./node_modules/nodemon/bin/nodemon.js bin/www"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "morgan": "^1.9.0",
    "serve-favicon": "^2.5.0"
  },
  "devDependencies": {
    "nodemon": "^1.18.2"
  }
}

10. run npm install

11. to start the server run npm run dev

On visiting http://localhost:3000/api on your browser you will be greeted with the follownig

Express RESTful API with nodemon

This brings us to the end of the Part 1 of the mean framework series.

Here is the link for the Part 2 of this series : Part 2 : Creating authentication in the back-end. Links to the rest of the parts will be added later along with a Github repository with the full framework.

Feel free to Comment, Share, Clap this post. Thanks for reading!