How to setup Node, Express and Angular2 properly

Question

I am trying to set-up a workspace with Node, Express, Angular2 (Database,- MongoDB or SQL)

But I am not sure how to correctly set it up combined. My file structure looks like this so far, and I intend to put the front-end under the public folder.

── package.json
├── public
├── routes
│   └── test.js
├── server.js
└── views

So far my my server.js looks like this

var express = require('express');
var mysql = require('mysql');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var path = require('path');

var lel = require('./routes/test');

var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/api/', test);

app.use(function(req, res, next) {
    // error handling
});


var server = app.listen(3000, function() {
    // shows the connection etc
});

module.exports = app;

My test.js is where I handle my API calls under /api/test.

And this is how my package.json looks like, with a script for npm, that will start the server with npm start And all the required dependencies, that can be downloaded with npm install

{
  "name": "testing",
  "version": "0.1.0",
  "description": "-",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "-",
  "license": "-",
  "dependencies": {
    "body-parser": "^1.15.0",
    "cookie-parser": "^1.4.1",
    "ejs": "^2.4.1",
    "express": "^4.13.4",
    "morgan": "^1.7.0",
    "mysql": "^2.10.2",
    "path": "^0.12.7"
  }
}

Now my question is how do I add Angular2 to work properly under public and so they start up together at npm start. I have been following the quickstart at Angulars documentation site, and noticed they use lite-server, but that shouldn't be necessary with node/express right? How should my package.json look like after Angular2 is added. For example like this:

├── package.json
├── public
│   ├── app
│   │   ├── app.component.js
│   │   └── main.js
│   └── index.html
├── routes
│   └── test.js
├── server.js
└── views

If it is still too early with Angular2, then I have the same question but with Angular1.X, or perhaps is it better to use Angular2 with TS?

How to setup Node, Express and Angular2 properly

2 Answers