3.2 Building Your Angular Project

  • Posted on: 7 August 2018
  • By: Ryoma Ohira
Tools: 
NodeJS
Angular
Express
Difficulty: 
Intermediate
Prerequisites: 
3.1 Web Storage

1. Build Your Angular Project

ng serve provides a development server that restarts each time you save a file within your angular project. This is great for development but not necessarily what you want for a live deployment.

ng build generates a non-optimised build of your projects and presents this in your "dist" folder (for ditributable). 

This tutorial will be going through how to build and have your server running through Express. For more information on build and what it does, make sure you watch Allan Browning's video below.

 

 

2. Express

Create a folder for your Express app. In this case we're going to call our server but you can go ahead and call yours what ever you like. 

Inside this folder, create a new npm project and install Express. Refer to Tutoral 1.2 for more information. 

Create the following files: server.jsroutes.js and listen.js

2.1 server.js

Create constants and require the modules as outlined below

const express = require('express');
const app = express();
const path = require('path');
const http = require('http').Server(app);
const bodyParser = require('body-parser');

Set up your app to use bodyParser and create a static route for express to your app. In our case it is '../dist/my-app' but it will depend on the name of your application. Require your routes.js and listen.js as functions. Refer to the video at the start of this tutorial for an example.

2.2 routes.js

Routes will be slightly different to your first Express project. As Angular will be rendering the HTML pages, we do not need the renderHTML() function. In fact, we only need our module.exports but we need to create it as a function. 

module.exports = function(app, path){
}

This ensures that our routes module has two input parameters, app and path. We can than package our route into a nice module and can use the app object that has been passed to the module. 

2.3 listen.js

Our listen.js module is similar where we can create a function with a http input parameter. From here, we can use the same server function as:

var server = http.listen(8080,'127.0.0.1',function(){
    console.log('Server listening on ' + host + ':' + port);
});

3. Running Your App

With your app built and Express set up, you can now run it with node server.js and you can access your Angular app on http:\\localhost:8080\

Category Terms: 
Tutorial Weight: 
32