Home

Welcome to the Angular-Full-Stack wiki!

This wiki is created by the author of this repository to help you understand this project.

Why Angular Full Stack?

• Have a complete full stack application using the latest Angular.
• Use one language (TypeScript) for the whole stack.

How did you create this project?

• Most part of the frontend is automatically generated using Angular CLI.
• The backend and the rest is made from scratch.

What does npm run dev do?

• mongod: runs MongoDB daemon, so a local MongoDB database.
• ng serve -pc proxy.conf.json --open: builds the app, serves it from memory, watches for changes and open it in the browser. It uses a proxy for the backend server.
• tsc -w -p server: compiles TypeScript into JavaScript from server folder to dist/server folder. It also watches for changes.
• nodemon: runs backend app.js file (generated using tsc) while watching for changes.
• All the previous commands are executed concurrently.

What does npm run prod do?

• mongod: same as above.
• ng build -aot -prod: builds the app using AOT and generates a production bundle in dist folder.
• tsc -p server: same as above, but doesn't watch for changes.
• node dist/server/app.js: runs the backend server using Node.

What does npm start do?

• This is usually executed in production when you deployed your application. This command simply executes node dist/server/app.js, so it runs the app using Node. Before this command:
  • you need a MongoDB server running.
  • you need to create a bundle using ng build.
  • you need to compile TypeScript to JavaScript using tsc -p server.

How to use a remote MongoDB server?

• Edit .env file, line 1 and 2.
• Remove any reference about mongod from package.json.

How to serve static files? Where to locate them?

• Place all your static files, such as images, in client/assets folder.

How to install external libraries such as jQuery?

• Install your library using npm i jquery --save.
• Edit angular.json file and add the path of jquery to the scripts and/or styles array.

Deploy: what does postinstall script do?

• The postinstall script is executed after all dependencies are installed and it's used to compile TypeScript to JavaScript and to create the production bundle on Heroku server. In this way you don't need to push the dist folder.

Deploy: why I've to move some devDependencies to dependencies?

• You have to move them because you need to install that packages on the remote server, otherwise commands like tsc and ng wouldn't work.