All Categories

  • Build and Deploy with AWS CodePipeline

    3/1/2019 -
    Use Github repo and AWS Pipeline to deploy to AWS Beanstalk This blog will show how to use AWS CodePipeline to automate build code and deploy code at Github repo. Following are steps. Github repo with node.js code Register AWS account Create Elastic Beanstalk application running Node.js Create AWS Pipeline Config Pipeline with Github Repo Config Pipeline to deploy to Elastic Beanstalk Check-in code to Github Verify AWS Pipeline building and deploy Github repo with node.js code You can create your own node.js app, but at this blog, we'll use the node.js app I already created.   sample aws nodejs app Register AWS account make sure you have created an AWS account Create Elastic Beanstalk application running Node.
  • Detect Breakpoint at Angular

    2/1/2019 -
    Detect breakpoint by use @angular/cdk breakpoint usually is CSS, you write media query for different style for different view. However, sometime you might want to do that in Javascript instead of CSS. At this blog, we'll use @angular/cdk at Angular Universal App project. First intall @angular/cdk "@angular/cdk": "^7.3.3", Add Layout Module to root angular module import { LayoutModule } from "@angular/cdk/layout"; @NgModule({ declarations: [AppComponent, HomeComponent], imports: [ BrowserModule.withServerTransition({ appId: "my-app" }), RouterModule.forRoot([ { path: "", component: HomeComponent, pathMatch: "full" }, { path: "lazy", loadChildren: "./lazy/lazy.module#LazyModule" }, { path: "lazy/nested", loadChildren: "./lazy/lazy.
  • Scroll Event at Angular Universal

    2/1/2019 -
    Clone Universal starter project First, we'll need to create angular universal app, you can clone from this universal-starter. Wrong way to add window.addEventListener("scroll") Following will be able to run at angular app, but will get error on angular universal server-side rendering. ngOnInit() { window.addEventListener("scroll", this.scrollEvent, true); } ngOnDestroy() { window.removeEventListener("scroll", this.scrollEvent, true); } scrollEvent = (event: any): void => { const number = event.srcElement.scrollTop;; }; use HostListener from angular/core Following code will able to run on both Angular app and Angular Universal server side rendering.