Setup a single project for Node/Express/Typescript and Angular

Question

I'm a .NET dev (ASP.NET Core etc.) So I'm used to working on a single project with both server and client code. I want to do the same with Node/Express (using Typscript) and Angular.

I've gone through the tutorials for Angular using its CLI, and with Node/Express using its generator. So I understand how to get them to work independently, but I'm not sure how to structure a single project with both.

From experience I expect something like this:

• .git
• node_modules
• client
  • src
  • config related to Angular
• server
  • src
  • config related to Node/Express/Typescript
• package.json
• config related to project as a whole

But there are so many moving parts in a MEAN stack, it's confusing. I'm not sure where to put the various typescript files, config files, etc. And how to run the dev servers for each given that node_modules is one level up.

There are existing questions about this which are opinionated, or are criticisms against this, or are obsolete (the Node world changes so quickly!). However, what I want to know is different:

How do I setup Node/Express (using Typescript) and Angular from the same project:

• so they can be committed to the same git repo
• so I can work on them using the same IDE instance
• so I can still use express and angular scaffolding tools (CLI / generator / etc)
• so at dev-time the ng serve and node app servers still work
• (any sample code or repos appreciated too)

Answer 1

You could use a setup like this:

-client/         // for your angular application (frontend)
-node_modules/   // node modules
-routes/         // route files for your express
-app.js          // your main app
-package.json    // your package.json with all the dependencies and so on

Create a project-folder and run npm init which automatically creates a package.json for you. Then you could create the client app via ng new client .

Then you just run git init in the rootfolder of your project. In case you don't want to have the certain parts of the project committed make use of the .gitignore file.

In your app.js of your node backend simply require express and other relevant packages like:

var express = require('express');
var path = require( "path" );
var bodyParser = require('body-parser');
var expressValidator = require('express-validator');
var cors = require('cors');
var app = express();
var port = 65500;
var router = express.Router();
....
..

and define your express-routes

var authRouter = require('./routes/auth')(router);
var servicesRouter = require('./routes/services')(router);
....
..

app.use('/auth', authRouter); // Route to authenticate login attempt 
app.use('/services', servicesRouter); // Route to perform other services
....
..
// wildcard:
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});

// INFO: Start the node server */
app.listen(port, () => console.log(`Node's Express ice-dashboard-new is listening on 
Port ${port}..`));

In /client/src/app/components for example you can generate any component with CLI via ng generate component someComponentName and the Angular CLI will do all the magic for you. (generating .html .css/.scss, .ts & .spec.ts and adding it to app.modules.ts).

Same works for services connecting the font to backend. Just use the CLI like ng generate service someServiceName - but keep in mind that you have to add those to the 'providers' of the @NgModule-declaration in the app.module.ts.

If you have additional backend-assets just create a folder in the root folder of your app and require them additionally in your app.js to make of use them (like /config or /helperz etc..)

For front-end assets (like images, i18n translation files or whatever) use the /client/src/assets folder.

Basically your app consists of two parts - the node backend serving the app and providing the routes for backend ops and the angular frontend application (html,css/scss & js), here's a little graphic to illustrate that setup for better understanding.

A quite handy tool is Nodemon , a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.

Just use nodemon instead of node to run your code, and now your process will automatically restart when your code changes. To install, get node.js, then from your terminal install it globally with the -g option via:

 npm install -g nodemon

To get a better understanding, have a look at these examples on how others have set up their project:

• Angular 2 Express Starter (angular 2 node express)
• Angular Universal Starter (angular 4 node)
• Angular MEAN Boilerplate (angular 2/4 node express mongodb)

Answer 2

What you have proposed is perfectly fine.

It is typical to either have all of the server folders on the root level ( src/ , lib/ , etc.) with a client/ folder that contains the entire client project, or a dedicated server/ folder and dedicated client/ folder with very little on the top/root level.

Here is an example of Stephen Grider's fullstack Node/React codebase (same principal would apply for Node/Angular) - https://github.com/StephenGrider/FullstackReactCode . He takes the approach of the former, keeping the root project level for the server with a separate client/ folder.