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 deploy to EC2?

• Edit the EC2 security group and add TCP port 3000 as an Inbound rule for source 0.0.0.0/0
• Clone this repo into the EC2 machine
• If you use a remote MongoDB instance, edit .env file
• Run npm ci
• Run npm run build or npm run buildprod
• Run npm run buildbe
• Run npm start
• The app is now running and listening on port 3000

How to deploy to EC2 only the bundle?

• As before, but don't clone the repo, just the .env, package*.json and dist folder

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.