1

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:

enter image description here

  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.

Improve this question
1
  • For development, you can use a proxy.conf.json file for port-forwarding and use npm-run-all as described in this answer to have it run with a single command - stackoverflow.com/a/45743298/4365626 Commented Jun 13, 2020 at 17:24

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you for taking the time to answer my questions. I just wanted a few clarifications. When I run ng build it seems like its running it on a single port (3000 in my case). How can I run them on different ports? Also can you point me towards a few good heroku tutorials? Again thanks.
ng build isn't using any ports. Ng build is building (duh) your project, by minifying your code, and putting it into vendor scripts. ng serve will use a port, nodemon will use one too, but ng build won't ! For the tutorials, I recommend you start here : Deploy an angular app on heroku
thanks again mate. There just so many things to figure out its gets confusing.
I understand. Don't worry, it took me 2 weeks to have it done. But once you've done it, this is pretty much it, all you have to do left is code !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.