Introduction

Since we’ve been working a ton with NodeJS & AngularJS, we’ll be covering a lot of coding & hassles developers might encounter when using these technologies.
In this tutorial, we’re focusing on how you can use NodeJS with Express to serve an AngularJS application without needing to deploy a separate Web Server.
Stack:

Directory Structure

For this tutorial, we’re going to keep it simple with a bare-bones Web Application, although this applies to any project you’re working on. The directory structure is as follows.
Note: It’s a good idea to separate client & server code into separate project directories for version control.
tutorialproject/
├── backend
│   ├── app.js
│   ├── bin
│   ├── config
│   ├── controllers
│   ├── middleware
│   ├── migrations
│   ├── models
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── public
│   ├── seeders
│   ├── services
│   ├── templates
│   ├── tmp
│   └── views
├── frontend
│   ├── dist
│   ├── e2e
│   ├── karma.conf.js
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── protractor.conf.js
│   ├── src
│   ├── tsconfig.json
│   └── tslint.json

Building The Frontend

One of the great things in Angular2+ is how simple they’ve made the deploying process. In just a few commands with the Angular CLI tools, you’ll have a production built code base that can be deployed on the Web Server of your choice. We’re going to build this project as if we were deploying to production.

Step 1) Build the Project

cd frontend
ng build --prod --aot

> ng build

Date: 2018-11-26T16:04:55.811Z
Hash: 3e793e2d387dc475fb65
Time: 18548ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 313 kB [initial] [rendered]
chunk {pages.module} pages.module.chunk.js, pages.module.chunk.js.map () 118 kB [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 600 kB [initial] [rendered]
chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 2.21 MB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 728 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.78 MB [initial] [rendered]
What’s happening here?
“build”: Runs the build command from Angular CLI. This initiates the build process with a variety of parameters depending on your needs.
“–prod” : Uses UglifyJS to clean up any dead code.
“–aot” : Build using Ahead Of Time compilation since not all browsers fully support ES2015.
As you can see from the output, Angular successfully built polyfills, scripts, styles & vendor bundles into our dist folder. It also included the source maps, this makes debugging on browsers easier – you can omit them with the “–no-sourcemap” parameter.

Deploying On NodeJS / Express

Step 1) Make sure Express is able to serve your public folder.

In your app.js file. Make sure to have the following line. This tells express to allow static files to be served from the specified folder, in our case, we named it ‘public’.
app.use(express.static(path.join(__dirname, 'public')));

Step 2) Copy the contents from the Angular build process to your public folder

cd frontend
cp frontend/dist/* ../backend/public

Step 3) Run NodeJS / Express

cd backend
node ./bin/www 
“./bin/www” : In Express v4, the bin directory is used for any scripts you’ll need on startup. In this case, the default www file runs the node server on port ‘3000’ or any port specified in your environment. This allows for multiple scripts without having to edit your app.js file.

Step 4) Testing 1…2

Open your browser and head on to localhost:3000, you should see your Angular application deployed using NodeJS + Express.

 


 

Have any questions, concerns, found a bug or mistake? Leave us a comment below.
Need a Web Application or Website developed? Get in touch with us!

About the Author Sean Proulx

Fullstack Software geek with a passion for music and art.

One comment

Leave a Reply