Home

Jump to bottom

Davide Violante edited this page Nov 11, 2020 · 23 revisions

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.