In the next few posts, we are going to create a login form. I know, your asking yourself why a login form? Everyone and their mother has tutorials on how to create one.

While there is a lot of content out there on creating login forms, we are going to take a little bit of a different approach and cover every aspect of user registration and loggin in from front to back.

Over the course of these tutorials, we will learn how to

  • Create our front-end with Angular and ngx-bootstrap
  • Create our REST API with NodeJS and MongoDB
  • Integrate SendGrid to send emails to validate new users
  • Encrypt passwords in our database
  • Handle password recovery when someone forgets their password
  • Add multi-factor authentication by sending users SMS messages

By the end of this series, we will have a fully functional user registration and login form which we can use as boilerplate for your future projects.

Introduction

Let's get started. In this first post, we are going to simply setup our project.

Start by creating a new folder named login-form and go into that folder

mkdir login-form
cd login-form

Now, lets initialise Node and install our back-end dependencies

npm init  # Use the default settings, except change the entrypoint to server.js

Front-end

For this project, we are going to combine our back-end and front-end code in the same project. For the angular part, lets use the angular-cli to create a new project in the angular-src folder.

ng new angular-src

For the options, we are going to select yes for angular routing and CSS for the styling.

This will take a few minutes to finish. When it does, lets change some of the default angular settings.

The first thing we are going to do is change the build directory. Open angular.json and find the outputPath parameter and change it to the following

"outputPath": "../public",

This tells Angular to build in the public folder of our application root. We will also be telling Express to load files from the same directory. This allows us to run Node and Angular on the same port as part of the same application.

Backend

Now it's time to install our back-end dependencies.

npm install express body-parser mongoose mongoose-timestamp
npm install --save-dev nodemon dotenv

Lets break these down

Name Notes
express the node framework that will serve our API and server
body-parser A module to parse the body of HTTP requests
mongoose The MongoDB library we are going to use to connect to the database
mongoose-timestamp A mongoose template that automatically adds timestamping to our database entries
nodemon A dev utility that will automatially restart our node server whenever we make a change to it.
dotenv A module that will handle environment variables for us during development

Environment Variables

When you go and run your Node applications in projection, it is best practice that you use environment variables for things like the port number, database connection, etc. This allows your application to run seamlessly in any environment. When developing your project though, manually dealing with environment variables can be a pain. This is why we installed dotenv as one of our development dependencies. We will use it to handle our environment variables without needing to depend on it when deploying to production.

First, lets create a .env file in your project folder. If you are using GIT, be sure to add this to your .gitignore file, as you don't want this as part of your repository.

.env

NODE_ENV=development
PORT=3000

Our file is pretty basic right now. We are setting the node environment and the port our server is going to run on. Later on, we will add our database settings, etc.

Now it's time to update our package.json file, so we can tell it to include dotenv only while we are developing.

package.json

Under the scripts section, add a new 'dev' script, which will use nodemon to authentication restart the server when we make changes to it and require dotenv, which will load our .env file from the previous step

"dev": "nodemon -r dotenv/config server",

Now we can start our server with 'npm run dev' when we are ready to start testing.

server.js

Inside your project folder, lets create 'server.js', which is the entry point for our application.

For right now, we will create a very basic express server, which will load our Angular front-end and have a test API route.

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');

// Init app
const app = express();

// Set Static Folder - where our angular code is built
app.use(express.static(path.join(__dirname, 'public')));

//// Middleware ////

// Body Parser
app.use(bodyParser.json());

//// Routes ////

// Serve 404 errors for any unknown route.
app.get('/', (req, res) => {
  res.status(404).send('Invalid Entry');
});

// API Test
app.get('/api/test', (req, res) => {
  res.send('Hello, Friend');
});

// Start Server
app.listen(process.env.PORT, () => {
  console.log(`Server running in ${process.env.NODE_ENV} mode`);
  console.log(`Server Started on port ${process.env.PORT}`);
});

Highlights

  • We start by creating our express app
  • We set express' static directory to be our public folder, which is where our Angular code gets built
  • We are adding the body-parser middleware in order to obtain the information that is included in requests
  • We then set a 404 page and a test API route
  • Finally, we start our server on the port from our .env file, which is port 3000

Testing

Now that our project has some boilerplate code in it, lets make sure it works.

Start by going into your angular-src folder and execute

ng build

when that is finished, go back to your project's root folder and you should now see a public folder, which contains the built angular code.

From the same directory, run npm run dev to start our node server.

Once the server has started, we can open a web browser and go to http://localhost:3000 and we will be presented with the default Angular page.

If we go to http://localhost:3000/api/test, we should also see 'Hello, Friend'.

Now that are project is setup, we are ready to start building out our login form in the next post.

Summary

In this tutorial, we reviewed the different components of a registration/login form and outlined what we will be working on in the next few posts. We setup our project with Angular for the front-end and NodeJS for the back-end.

The code can be found on GitHub. Tag v0.1 reflects the the changes we  have so far.

Next time, we will be building out our Angular front-end, which will include reactive forms and form validation.

Thanks for stopping by as we start a new project. Your comments are always welcome below, so feel free to leave one below.

If you are interested in following this series, be sure to subscribe so you don't miss any of my future posts.