Ecommerce
Live URL
https://piyali-ecommerce.herokuapp.com
Admin URL
https://piyali-ecommerce.herokuapp.com/#/admin
Swagger URL
https://piyali-ecommerce.herokuapp.com/api-docs/
login credentails
piyali@gmail.com / admin123
demo@gmail.com / demo123
admintest@gmail.com / test123
Run Ecommerce application
Run these two scripts in two different git bash
npm start will start my Angular Application and npm run start:server will start my Node server
npm start
npm run start:server
CI/CD (Continuous Integration/Continuous Delivery) with Heroku and GitHub
https://www.youtube.com/watch?v=_tiecDrW6yY
https://www.youtube.com/watch?v=O_xEqtjh1io
https://devcenter.heroku.com/articles/github-integration
Mockdata
assets/mockdata folder
PUSH Ecommerce application
Before push any code you have to pass in lint and test cases
1. ng lint
2. ng test
GIT codes
git stash ---------- save you local changes
git pull ----------- pull the master branch changes
git stash apply -------- merge local changes with master branch changes
git add .
git commit -m "message“ -------- commit local changes to stage
git commit -m "message" --no-verify -------- forcefully commit local changes to stage
git push -u origin master -------- push local changes to master branch
git checkout –b <branch_name> -------- create new branch and move to that new branch
git checkout <branch_name> -------- move to that branch
git merge master -------- merge your changes of master branch to current branch
Understanding the Angular CLI Workspace File
https://nitayneeman.com/posts/understanding-the-angular-cli-workspace-file/
https://blog.ninja-squad.com/2018/05/04/angular-cli-6.0/
@angular-devkit/build-angular: this is the one to build an Angular application, now a required dependency in your CLI projects.
API
Authorization using JWT
https://medium.com/@maison.moa/using-jwt-json-web-tokens-to-authorize-users-and-protect-api-routes-3e04a1453c3e
In API service static JSON files are used which are coming from assets folder
categories.json
content.json
products.json
#How do I add Sass compilation in Angular CLI 6: angular.json
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
Changing the CSS Files to Sass
"styles": [
"src/styles.scss"
],
Angular – tsconfig paths configurations
https://www.youtube.com/watch?v=whRsz7ywYZo
You can do like this:
"compilerOptions": {
"baseUrl": "src", // This must be specified if "paths" is.
...
"paths": {
"@ecommerce/auth/*": ["./app/auth/*"],
"@ecommerce/service/*": ["./app/service/*"],
"@ecommerce/directives/*": ["./app/directives/*"],
"@ecommerce/constants/*": ["./app/constants/*"],
"@ecommerce/interfaces/*": ["./app/interfaces/*"],
"@ecommerce/settings/*": ["./app/settings/*"],
"@ecommerce/pipe/*": ["./app/pipe/*"],
"@ecommerce/shared/*": ["./app/shared/*"],
"@ecommerce/css/*": ["./app/assets/css/*"],
"@ecommerce/images/*": ["./app/assets/images/*"],
},
Have in mind that the path where you want to refer to, it takes your baseUrl as the base of the route you are pointing to and it’s mandatory as described on the doc.
The character ‘@’ is not mandatory.
After you set it up on that way, you can easily use it like this:
import { Yo } from '@config/index';
Package.json
Husky is a really cool npm package that lets you define npm scripts that correlate to local Git events such as a commit or push.
Husky is a very popular (1 million downloads a month) npm package that allows custom scripts to be ran against your repository. Husky works with any project that uses a package.json file.
This really reduces the friction of using this feature of Git. So for example, if you install Husky using the command
npm install husky --save-dev
"husky": {
"hooks": {
"pre-commit": "npm run lint",
"pre-push": "npm run lint"
}
}
Any time you try and commit, the hooks will run your lint command first. The hooks will not allow your commit to pass if the lint are failing.
Don’t worry, you can force a commit with –no-verify if you find yourself in the situation where you just want to commit even though your pre-commit hooks don’t succeed.
git commit -m "first commit" --no-verify
I have added the following entries to the package.json
"precommit": "ng lint && npm test",
"prepush": "ng lint && ng build --aot true && npm test"
This sets up means that on a commit we:
lint the code
then run tests
and before pushing to a remote repository we:
perform an optimized build
then run unit tests
- https://www.npmjs.com/package/pre-commit-with-lint
- https://www.npmjs.com/package/pre-commit
- https://sigmoidal.io/automatic-code-quality-checks-with-git-hooks/
Angular 6 Http Error Interceptor
The Error Interceptor intercepts http responses from the api to check if there were any errors. If there is a 401 Unauthorized response the user is automatically logged out of the application, all other errors are re-thrown to be caught by the calling service so an alert can be displayed to the user.
It’s implemented using the HttpInterceptor class that was introduced in Angular 4.3 as part of the new HttpClientModule. By extending the HttpInterceptor class you can create a custom interceptor to catch all error responses from the server in a single location.
In api.service.ts
“handleError” is comment out becuase i have implement api error globally using HttpInterceptor which is written in http-error-interceptor.ts
if you change the following ————
API_PRODUCT_LIST_PATH = ‘assets/product.json’ in app.config.ts, you can see error in “Http failure response for http://localhost:4200/assets/product.json/?cat=: 404 Not Found” error in products page and also in console.
Service worker using PWA
ng add @angular/pwa@v6-lts
Build your project
ng build --prod
my npm version is 6.4.1 that’s why i am installing http-server version 0.4.1 to make compatible with my npm version. Now run http-server
http-server -p 8081 -c-1 dist/ecommerce
Configure Application Settings
import { Injectable, isDevMode } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AppConfig {
apiEndpoint: string;
API_CATEGORY_PATH: string;
API_CONTENT_PATH: string;
API_PRODUCT_LIST_PATH: string;
API_PRODUCT_DETAILS_PATH: string;
API_PRODUCT_ADD_PATH: string;
API_PRODUCT_DELETE_PATH: string;
API_REGISTER_PATH: string;
API_LOGIN_PATH: string;
API_CART_PATH: string;
API_CART_CHECK_PRODUCT: string;
API_CART_ADD_PRODUCT_QUANTITY: string;
API_CART_DELETE_PRODUCT_QUANTITY: string;
API_CART_REMOVE_PRODUCT: string;
API_CUSTOMERSBYYEAR: string;
API_CUTOMERSBYGENDER: string;
API_PRODUCTSBYCATEGORY: string;
IMAGE_PATH: string;
ERROR_MSG_PATH: string;
VALIDATION_ERROR_MSG_PATH: string;
envDevMode: Boolean;
constructor() {
console.log('Environment in Development mode => ', isDevMode());
this.envDevMode = isDevMode();
if (this.envDevMode) {
this.apiEndpoint="http://localhost:3000/";
} else {
this.apiEndpoint="https://piyali-ecommerce.herokuapp.com/";
}
this.API_CATEGORY_PATH = 'api/categories';
this.API_CONTENT_PATH = 'api/content';
this.API_PRODUCT_LIST_PATH = 'api/products';
this.API_PRODUCT_DETAILS_PATH = 'api/products/productdetails';
this.API_PRODUCT_ADD_PATH = '';
this.API_PRODUCT_DELETE_PATH = '';
this.API_REGISTER_PATH = 'api/auth/register';
this.API_LOGIN_PATH = 'api/auth/login';
this.API_CART_PATH = 'api/cart';
this.API_CART_CHECK_PRODUCT = 'api/cart/check';
this.API_CART_ADD_PRODUCT_QUANTITY = 'api/cart/addqty';
this.API_CART_DELETE_PRODUCT_QUANTITY = 'api/cart/deleteqty';
this.API_CART_REMOVE_PRODUCT = 'api/cart/removeprod';
this.API_CUSTOMERSBYYEAR = 'api/admin/customersbyyear';
this.API_CUTOMERSBYGENDER = 'api/admin/customersbygender';
this.API_PRODUCTSBYCATEGORY = 'api/admin/productsbycategory';
this.IMAGE_PATH = 'images/products/';
this.ERROR_MSG_PATH = 'api/errors';
this.VALIDATION_ERROR_MSG_PATH = 'api/validationerrors';
}
}
isDevMode in Angular
Angular CLI projects already use a production environment variable to enable production mode when in the production environment. But Angular also provides us with an utility function called isDevMode that makes it easy to check if the app in running in dev mode:
if (isDevMode()) {
console.log('👋 Development!');
} else {
console.log('💪 Production!');
}
}
Angular Models and deserialization
https://medium.com/swlh/angular-7-models-cd0cd80f5e33
https://nehalist.io/angular-7-models/
https://nehalist.io/working-with-models-in-angular/
https://github.com/nehalist/angular7-models
@Inject in Angular
We are not actually working directly with the global values document and window. Instead, we inject them via Angular’s dependency injection – this keeps our code decoupled and testable, and gives us the option to later inject different values for these Injectables based on the environment.
document is injectable via the DOCUMENT Injection Token which is part of Angular.
import { DOCUMENT } from '@angular/common';
import { Component, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
@Component({
...
})
export class MyComponent {
constructor(
@Inject(DOCUMENT) private document: Document,
@Inject(PLATFORM_ID) private platformId: any,
windowRefService: WindowRefService,
) {}
ngOnInit() {
this.scrollToTop();
}
scrollToTop() {
if (isPlatformBrowser(this.platformId)) {
this.windowRefService.nativeWindow.scrollTo(0);
}
}
}
Prepare your code (isPlatformBrowser is your friend)
There are a few important changes you need to make to your code if it is to be successfully rendered on the server. Every code base is different and so the specifics will be different. However, you can generally group SSR specific caveats into a few rules.
- Don’t access the DOM directly (the document/window is inaccessible without a browser).
- Limit/Remove usage of setInterval or similar timing functions
- Ensure your dependencies are compatible with SSR.
- SSR renders the initial state of your application. So as an example, if your images are loaded lazily, provide an SSR-compatible eager alternative using the next step (5) to ensure the content is there.
- If you need to prevent certain code from running on the server, wrap it in isPlatformBrowser(this.platformID) {}
constructor(@Inject(PLATFORM_ID) private platformID: Object) {
// run main initialisation code
if (isPlatformBrowser(this.platformID)) {
this.observable$ = interval(1000)... // safe to run code
}
// OR the alternative
if (isPlatformServer(this.platformID)) {
// run server side code
}
}
ngsw-config.json
{
"index": "/index.html",
"assetGroups": [{
"name": "ecommerce",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
],
"urls": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js",
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
...