title: How to deploy Angular 5 app with Node.js Server
body: <p>I've written an Angular 5 application which gets its data from a node.js server.  I have been able to deploy the application to my web server (which will run node.js at FastComet) but the server doesn't seem to work. I'm not sure if I have to deploy that separately, or if that gets included as part of the main ng build. </p>
  
  <p>Here are my settings so that you can see, just in case they help:</p>
  
  <p><strong>package.json</strong></p>
  
  <pre class="lang-json prettyprint-override"><code>{
    "name": "paracordcalc",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "concurrently --kill-others \"ng build --watch --no-delete-output-path\" \"node server.js\"",
      "build": "ng build &amp;&amp; node server.js",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e",
      "postinstall": "ng build --prod --base-href /para-calc/"
    },
    "private": true,
    "dependencies": {
      "@angular/cli": "1.5.0",
      "@angular/compiler-cli": "~5.0.0",
      "@angular/animations": "~5.0.0",
      "@angular/common": "~5.0.0",
      "@angular/compiler": "~5.0.0",
      "@angular/core": "~5.0.0",
      "@angular/forms": "~5.0.0",
      "@angular/http": "~5.0.0",
      "@angular/platform-browser": "~5.0.0",
      "@angular/platform-browser-dynamic": "~5.0.0",
      "@angular/router": "~5.0.0",
      "body-parser": "~1.18.2",
      "bootstrap": "~3.3.7",
      "cookie-parser": "~1.4.3",
      "core-js": "~2.4.1",
      "debug": "~3.1.0",
      "express": "~4.16.2",
      "jade": "~1.11.0",
      "morgan": "~1.9.0",
      "ngx-image-gallery": "^1.3.1",
      "rxjs": "~5.5.2",
      "serve-favicon": "~2.4.5",
      "zone.js": "~0.8.14"
    },
    "devDependencies": {
      "@angular/language-service": "~5.0.0",
      "@types/jasmine": "~2.5.53",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "~3.2.0",
      "concurrently": "~3.5.0",
      "jasmine-core": "~2.6.2",
      "jasmine-spec-reporter": "~4.1.0",
      "karma": "~1.7.0",
      "karma-chrome-launcher": "~2.1.0",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "~1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "~0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~3.2.0",
      "tslint": "~5.7.0",
      "typescript": "~2.4.2"
    }
  }
  </code></pre>
  
  <p><strong>server.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>    var express = require('express');
      var path = require('path');
      var favicon = require('serve-favicon');
      var logger = require('morgan');
      var cookieParser = require('cookie-parser');
      var bodyParser = require('body-parser');
  
      var routes = require('./server/routes/index');
      var items = require('./server/routes/items');
      var config = require('./server/routes/config');
      var errors = require('./server/routes/errors');
  
      var app = express();
  
      // view engine setup
      app.set('views', path.join(__dirname, '/server/views'));
      app.set('view engine', 'jade');
  
      app.use(favicon(path.join(__dirname, 'dist/favicon.ico')));
      app.use(logger('dev'));
      app.use(bodyParser.json());
      app.use(bodyParser.urlencoded({ extended: false }));
      app.use(cookieParser());
      app.use(express.static(path.join(__dirname, 'dist')));
  
      // app.use('/', routes);
      app.use('/api/config', config);
      app.use('/api/items', items);
      app.use('/api/errors', errors);
      app.get('*', function(req, res) {
      res.sendFile(path.join(__dirname, 'dist/index.html'));
      });
  
      // catch 404 and forward to error handler
      app.use(function(req, res, next) {
          var err = new Error('Not Found');
          err.status = 404;
          next(err);
      });
  
      // error handlers
  
      // development error handler
      // will print stacktrace
      if (app.get('env') === 'development') {
          app.use(function(err, req, res, next) {
              res.status(err.status || 500);
              res.render('error', {
                  message: err.message,
                  error: err
              });
          });
      }
  
      // production error handler
      // no stacktraces leaked to user
      app.use(function(err, req, res, next) {
          res.status(err.status || 500);
          res.render('error', {
              message: err.message,
              error: {}
          });
      });
  
      var debug = require('debug')('server');
  
      app.set('port', process.env.PORT || 3000);
  
      app.listen(app.get('port'));
  
      console.log('Listening on port: ' + app.get('port'));
  
      module.exports = app;
  </code></pre>
  
  <p>Here's a screenshot of what my server code structure looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/iNEhZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iNEhZ.png" alt="enter image description here"></a></p>
  
  <p><strong>Am I Missing Anything?</strong></p>
  
  <p>It all runs ok in debug on my machine.  I'm not sure if the node server is being deployed and just not run on the server, or what I need to do.  I've Googled a LOT to try and find an answer and I can't see anything that makes sense. </p>
  
  <p>I'm also trying to embed it into a Wordpress website page, which is another problem I can't find help for either, but that's for another discussion another day. I'm most likely going to try to embed it in an iFrame.</p>
  
  <p>Any help that you can offer on deploying and running the server would be greatly appreciated.  I've only been developing in Angular for about 3 months. </p>