inception.txt

// This is  guide to creating this project
// to follow along, first open a command line terminal
//
// wherever you see the generic command prompt in the guide (:~$)
// enter the commands exactly as listed if using Linux
// for other OS, slight variations may be required
// Sections in ALL_CAPS indicate that you need to enter your specific data
//
// options are presented in comment format, like this exact line (line #9)
//
// this guide assumes you have the following already installed
//
// Node > 10.0
// Angular CLI > 8.0
// MongoDB > 3.2 (or an Atlas account, which is preferred.  If on public wifi, Atlas prob wont work for you)
//
// and that you have an account and empty repository ready at github.com

// from parent directory
:~$ ng new bugtracker
// select 'Y' to routing
// select 'SCSS' for styling

:~$ cd bugtracker

// create this file
:~$ touch  inception.txt

// rename src/ directory to angular
:~$ mv src/ angular/
// edit angular.json, package.json, and tsconfig.app.json
//   to reflect changes from src/ to angular/

// set up git version control
:~$ git add .
:~$ git commit -m 'Initial commit of Angular CLI shell app'
:~$ git remote add origin YOUR_GIT_REPO_ADDRESS_HERE
:~$ git push origin master

// ========================================================================================

// create user login and home components
//
// We use a components directory for cleaner architecture
// We specify app as the module to avoid confusion with the material module
:~$ ng g c components/user/home --module app
:~$ ng g c components/user/login --module app

// add barrel files for easier imports
:~$ touch angular/app/components/user/home/index.ts
// add code to .../home/index.ts
:~$ touch angular/app/components/user/login/index.ts
// add code to .../login/index.ts

// edit app.component.html

// check that routing works correctly
:~$ ng serve

// commit and push
:~$ git add .
:~$ git commit -m 'Add user login and home components and routes'
:~$ git push origin master

// ========================================================================================

// fake backend server for development
:~$ mkdir angular/app/shared
:~$ touch angular/app/shared/fake.server.ts
// add code to angular/app/shared/fake.server.ts
// add barrel files for easier imports
:~$ touch angular/app/shared/index.ts
// add code to angular/apps/shared/index.ts

// add app.config.json to store our app config
:~$ touch app.config.json
// add apiUrl property and value to app.config.json
// import app.config.json to app/environments/environment.ts and add apiUrl property
// import app.config.json to app/environments/environment.prod.ts and add apiUrl property
// edit tsconfig.json to add paths property
// edit tsconfig.json to add resolveJsonModule and esModuleInterop properties

// create authentication service
:~$ mkdir angular/app/services
:~$ touch angular/app/services/authentication.service.ts
// add barrel files for easier imports
:~$ touch angular/app/services/index.ts
// add code to angular/apps/services/index.ts

// edit angular/app/app.module.ts to import and declare ReactiveFormsModule and HttpClientModule
// edit angular/app/components/user/login/login.component.ts to add form logic
// edit angular/app/components/user/login/login.component.html to add form html
// edit angular/app/app.component.ts to subscribe to AuthenticationService

// add authorization guards to routes
:~$ touch angular/app/shared/auth.guard.ts
// add code to angular/app/shared/auth.guard.ts

// add json web token interceptor
:~$ touch angular/app/shared/jwt.interceptor.ts
// add code to angular/app/shared/jwt.interceptor.ts

// add error interceptor
:~$ touch angular/app/shared/error.interceptor.ts
// add code to angular/app/shared/error.interceptor.ts

// add auth.guard, jwt.interceptor, and error.interceptor exports in angular/app/shared/index.ts

// edit /src/app/app.module.ts to import and provide jwtInterceptor and ErrorInterceptor

// commit and push
:~$ git add .
:~$ git commit -m 'add login form, authentication service & route guard'
:~$ git push origin master

// ========================================================================================

// create component to register user
:~$ ng g c components/user/register --module app

// update angular/app/shared/fake.server.ts to use local storage for users

// create user service
:~$ touch angular/app/services/user.service.ts
// add code to angular/app/services/user.service.ts
// edit angular/app/services/index.ts to export user service

// edit angular/app/components/users/register/register.component.ts
// edit angular/app/app-routing.module.ts to add register route
// edit angular/app/components/user/login.component.html to add link to register route
// edit angular/app/components/user/register.component.html to add form

// commit and push
:~$ git add .
:~$ git commit -m 'add registration form and user service'
:~$ git push origin master

// ========================================================================================

// update angular/app/shared/fake.server.ts
// update angular/app/components/user/home/home.component.ts
// update angular/app/components/user/home/home.component.html

:~$ touch angular/app/shared/alert.component.ts
// add code to angular/app/shared/alert.component.ts

// commit and push
:~$ git add .
:~$ git commit -m 'refactor home page, add alert sevice and getUsers and deleteUser routes'
:~$ git push origin master

// ========================================================================================

// add real backend server
:~$ npm i -S bcryptjs body-parser cors express express-jwt jsonwebtoken mongodb mongoose rootpath
:~$ npm i -D nodemon

// build base server
:~$ mkdir server
:~$ touch server/index.js

// ========================================================================================

// add Angular material theme
ng add @angular/material

// choose a theme (this example uses a custom theme)
// select 'yes' to Hammer.js
// select 'yes' to browser animations

:~$ touch src/app/material.module.ts
// add code to src/app/material.module.ts
// edit app.module.ts
// edit app.component.html
// edit styles.scss


// check that changes display correctly
:~$ ng serve

// commit changes
:~$ git add .
:~$ git commit -m "Add Angular material theme"