Getting Started with Express

Now that we have the basic front-end for our Flapper News coded up with Angular, we're going to start work on our backend. Because Angular is able to handle the templating and rendering, our backend server will mainly serve as a communication layer with our database. Over the next few sections, we are going to focus on modeling our data needs and creating a REST API that our Angular app can use to interact with this data.

If you haven't already done so, make sure you have node, npm, and mongodb installed on your system. As a quick reminder, this tutorial assumes Node v7.2.0 and MongoDB v3.4.0.

Creating A New Project

npm install -g express-generator

express --ejs flapper-news
cd flapper-news

This will create a new folder called flapper-news and populate it with various files and folders.

We are passing the --ejs flag because we'd like our server to use standard HTML in its templates as opposed jade. Theoretically we are free to use Jade if we'd like to but the front-end is already written in plain HTML.

Our first order of business is to add the relevant npm modules we're going to need. When starting a new project, a generator will include a list of packages that are required by default.

npm install

This will automatically download any packages specified in the packages.json file and store them in the node_modules/ directory.

Next, we are going to install Mongoose, which is a library that provides schemas and models on top of MongoDB.

npm install --save mongoose

The --save flag passed to npm install instructs the program to also save the package to the packages.json file. This allows you (or your teammates) to automatically install missing packages with the npm install command.

If you're using any version control software such as git, now is a good time to make your initial commit.

The Anatomy of Node Project

Right now the root directory of our Node project should look something like this:

app.js
bin/
node_modules/
package.json
public/
routes/
views/

Let's go step by step and explain what each folder/file is:

• app.js - This file is the launching point for our app. We use it to import all other server files including modules, configure routes, open database connections, and just about anything else we can think of.

• bin/ - This directory is used to contain useful executable scripts. By default it contains one called www. A quick peak inside reveals that this script actually includes app.js and when invoked, starts our Node.js server.

• node_modules - This directory is home to all external modules used in the project. As mentioned earlier, these modules are usually installed using npm install. You will most likely not have to touch anything here.

• package.json - This file defines a JSON object that contains various properties of our project including things such as name and version number. It can also defines what versions of Node are required and what modules our project depends on. A list of possible options can be found in npm's documentation.

• public/ - As the name alludes to, anything in this folder will be made publicly available by the server. This is where we're going to store JavaScript, CSS, images, and templates we want the client to use.

• routes/ - This directory houses our Node controllers and is usually where most of the backend code will be stored.

• views/ - As the name says, we will put our views here. Because we specified the --ejs flag when initializing our project, views will have the .ejs extension as opposed to the '.jade' extension Jade views use. Although views are ultimately HTML, they are slightly different than any HTML file we might specify in the public/ directory. Views are capable of being rendered directly by Node using the render() function and can contain logic that allows the server to dynamically change the content. Because we are using Angular to create a dynamic experience, we won't be using this feature.

In addition to the above files structure, we are going to add one more folder.

mkdir models

This folder will contain our Mongoose schema definitions.

Importing Our Angular Project

The final step before we begin building out the backend is to import our Angular portion into our Node.js project. First move the index.html file to the views/ directory. Because we're using the ejs engine, Node is looking for files with the .ejs extension so we're going to have to rename our index.html to index.ejs, replacing the existing one.

Next, move the Angular app.js file to the public/javascripts/ directory. To avoid confusion with Node's app.js, also rename the Angular file to angularApp.js.

Finally let's update the <script> tag in our index.ejs file to reflect these changes:

<script src="/javascripts/angularApp.js"></script>

Now we can start our application by running npm start.

If we point our browser to http://localhost:3000 we should be greeted with our Angular application.

Check your work

You can view the completed & working code for this tutorial here:

Now our AngularJS application is being served by our node server. Up next, we'll go over how to configure Mongoose and persist data to MongoDB.