Mean Stack Application with Angular 4

Question

Im making a MEAN stack application with Angular 4.

What I've done:

1. Created a MVC directory structure for my Node/Express App.
2. Created a Node/Express server.
3. Created a basic API which with express with a prefixed path of /api
4. Tested the API using POSTMAN
5. Used Angular-Cli to create a angular project within my root directory of the MEAN stack app.
6. Within .angular-cli.json changed outDir property to ../public
7. Changed my Server file to send Send all other requests (that are not going to /api) to the Angular app

My Directory Structure:

1. angular-src folder contains the angular app generated by angular-cli
2. app-api folder contains my API which performs all CRUD operations. This is where all the /api routes are directed to.
3. app-server folder contains just a route file which sends all / to the angular app (public/index.html)
4. public folder is where the angular app's index.html file lives after running ng build
5. app.js is where my node/express server lives and redirects incoming api requests

When I run the app it works. The node server sends my requests to the Angular Apps index.html with the public folder and that displays my app.component.html template.

---

My questions:

• I run nodemon to start my node/express server & then navigate to angular-src folder and run ng build to setup my angular app. This process seems quite lengthy to me whats a better way of achieving this?

• Also I have to run ng build every time I make changes to the angular app so it can read the changes. Is there anything like nodemon but for angular that watches for changes and resets automatically.

• I have 2 package.json files. Once for node/express and another for angular. Should there be only 1 package.json file within a project?

• The App finally has to be launched on Heroku currently I have a Procfile which contains web: npm start. How do I manage angular 4 within heroku? Do I need to add a ng build command to the Procfile?

• Should the Angular App & Node/express run different ports (i.e port 3000 & 4200) or should both be on a single port?

• Is the structure that I've implemented suitable for a MEAN App using Angular 4.

I know some of these questions might be opinion based but I'm looking for your professional advice as to whats considered best practice within these situations.

Answer 1

Here is my two cents on that (I have an application running on Heroku too in production mode, I followed every Heroku tutorial and the most known ones) :

• You have to run ng build everytime. the build allows you to minify your code, while ng serve doesn't. I am not aware of how you can make it automatic, but if you're using Heroku, just pushing to your repo will build your project (if you use the right commands of course)

• Yes, you have to rebuild on every change. And if you i18n your app, you will have to run ng build for every language you implemented. So you shouldn't make it automatic, given the time it will take (for me, 2 languages = 6 minutes)

• I keep only one package.json where i put all my dependencies (back & front)

• my build commands for Heroku are as follows :

  "postinstall": "npm run build-i18n",
  "i18n": "ng xi18n --output-path src/i18n --out-file messages.xlf",
  "build-i18n:fr": "ng build --output-path=dist/fr --aot --prod --bh /fr/ --i18n-file=src/i18n/messages.fr.xlf --i18n-format=xlf --locale=fr",
  "build-i18n:en": "ng build --output-path=dist/en --aot --prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en",
  "build-i18n": "mkdir dist && npm run build-i18n:en && npm run build-i18n:fr"
  

The postinstall is launched by Heroku, which launches both builds for both languages.

• You should have different ports. In fact, launching them on the same port is impossible.

• The structure of your project can be as you like. It's up to personal preference. But my recommendation is to follow John Papa's guidelines.