[{"data":1,"prerenderedAt":764},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002F2016-09-17-ng2-uikit-spa-app":406,"\u002Fblog\u002F2016-09-17-ng2-uikit-spa-app-surround":754},[4,8,39,52,264,310,319,380,397],{"title":5,"path":6,"stem":7},"Notes","\u002Fnotes","1.notes\u002Findex",{"title":9,"path":10,"stem":11,"children":12,"page":30},"Architecture","\u002Fnotes\u002Farchitecture","1.notes\u002Farchitecture",[13,17,31,35],{"title":14,"path":15,"stem":16},"API Management","\u002Fnotes\u002Farchitecture\u002Fapi-management","1.notes\u002Farchitecture\u002Fapi-management",{"title":18,"path":19,"stem":20,"children":21,"page":30},"Data","\u002Fnotes\u002Farchitecture\u002Fdata","1.notes\u002Farchitecture\u002Fdata",[22,26],{"title":23,"path":24,"stem":25},"ERD","\u002Fnotes\u002Farchitecture\u002Fdata\u002Ferd","1.notes\u002Farchitecture\u002Fdata\u002Ferd",{"title":27,"path":28,"stem":29},"SCWD","\u002Fnotes\u002Farchitecture\u002Fdata\u002Fscwd","1.notes\u002Farchitecture\u002Fdata\u002Fscwd",false,{"title":32,"path":33,"stem":34},"Microservices","\u002Fnotes\u002Farchitecture\u002Fmicroservices","1.notes\u002Farchitecture\u002Fmicroservices",{"title":36,"path":37,"stem":38},"OAuth","\u002Fnotes\u002Farchitecture\u002Foauth","1.notes\u002Farchitecture\u002Foauth",{"title":40,"path":41,"stem":42,"children":43,"page":30},"Archive","\u002Fnotes\u002Farchive","1.notes\u002Farchive",[44,48],{"title":45,"path":46,"stem":47},"Google Web Toolkit","\u002Fnotes\u002Farchive\u002Fgwt","1.notes\u002Farchive\u002Fgwt",{"title":49,"path":50,"stem":51},"Jekyll","\u002Fnotes\u002Farchive\u002Fjekyll","1.notes\u002Farchive\u002Fjekyll",{"title":53,"path":54,"stem":55,"children":56,"page":30},"Development","\u002Fnotes\u002Fdevelopment","1.notes\u002Fdevelopment",[57,74,112,149,226,239,260],{"title":58,"icon":30,"path":59,"stem":60,"children":61,"page":30},"IDE","\u002Fnotes\u002Fdevelopment\u002Fide","1.notes\u002Fdevelopment\u002FIDE",[62,66,70],{"title":63,"path":64,"stem":65},"Jetbrains IDE","\u002Fnotes\u002Fdevelopment\u002Fide\u002Fjetbrains","1.notes\u002Fdevelopment\u002FIDE\u002Fjetbrains",{"title":67,"path":68,"stem":69},"NVIM","\u002Fnotes\u002Fdevelopment\u002Fide\u002Fnvim","1.notes\u002Fdevelopment\u002FIDE\u002Fnvim",{"title":71,"path":72,"stem":73},"tmux","\u002Fnotes\u002Fdevelopment\u002Fide\u002Ftmux","1.notes\u002Fdevelopment\u002FIDE\u002Ftmux",{"title":75,"path":76,"stem":77,"children":78,"page":30},"Algo","\u002Fnotes\u002Fdevelopment\u002Falgo","1.notes\u002Fdevelopment\u002Falgo",[79,83,87,91,95],{"title":80,"path":81,"stem":82},"Algorithms","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Falgorithms","1.notes\u002Fdevelopment\u002Falgo\u002Falgorithms",{"title":84,"path":85,"stem":86},"Data Structures","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fdata_structures","1.notes\u002Fdevelopment\u002Falgo\u002Fdata_structures",{"title":88,"path":89,"stem":90},"Kata","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fkata","1.notes\u002Fdevelopment\u002Falgo\u002Fkata",{"title":92,"path":93,"stem":94},"O-notation","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fo-notation","1.notes\u002Fdevelopment\u002Falgo\u002Fo-notation",{"title":96,"path":97,"stem":98,"children":99,"page":30},"Sorting","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting",[100,104,108],{"title":101,"path":102,"stem":103},"Buble Sort","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fbublesort","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fbublesort",{"title":105,"path":106,"stem":107},"Merge Sort","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fmergesort","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fmergesort",{"title":109,"path":110,"stem":111},"Quicksort","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fquicksort","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fquicksort",{"title":113,"path":114,"stem":115,"children":116,"page":30},"DataStructures","\u002Fnotes\u002Fdevelopment\u002Fdata_structures","1.notes\u002Fdevelopment\u002Fdata_structures",[117,121,125,129,133,137,141,145],{"title":118,"path":119,"stem":120},"ArrayList","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Farray_list","1.notes\u002Fdevelopment\u002Fdata_structures\u002Farray_list",{"title":122,"path":123,"stem":124},"Arrays","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Farrays","1.notes\u002Fdevelopment\u002Fdata_structures\u002Farrays",{"title":126,"path":127,"stem":128},"HashSet","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fhash_set","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fhash_set",{"title":130,"path":131,"stem":132},"LinkedList","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Flinked_list","1.notes\u002Fdevelopment\u002Fdata_structures\u002Flinked_list",{"title":134,"path":135,"stem":136},"PriorityQueue","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fpriority_queue","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fpriority_queue",{"title":138,"path":139,"stem":140},"Stack","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fstack","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fstack",{"title":142,"path":143,"stem":144},"TreeSet","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Ftree_set","1.notes\u002Fdevelopment\u002Fdata_structures\u002Ftree_set",{"title":146,"path":147,"stem":148},"Vector","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fvector","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fvector",{"title":150,"path":151,"stem":152,"children":153,"page":30},"Java","\u002Fnotes\u002Fdevelopment\u002Fjava","1.notes\u002Fdevelopment\u002Fjava",[154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222],{"title":155,"path":156,"stem":157},"Bit Operations","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fbit-operations","1.notes\u002Fdevelopment\u002Fjava\u002Fbit-operations",{"title":159,"path":160,"stem":161},"Cheatsheet","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fcheatsheet","1.notes\u002Fdevelopment\u002Fjava\u002Fcheatsheet",{"title":163,"path":164,"stem":165},"Clean Code","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fclean-code-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fclean-code-presentation",{"title":167,"path":168,"stem":169},"Java Datasource","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fdata-sources","1.notes\u002Fdevelopment\u002Fjava\u002Fdata-sources",{"title":171,"path":172,"stem":173},"Dependency Injection","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fdependency-injection-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fdependency-injection-presentation",{"title":175,"path":176,"stem":177},"Java SE","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fjava-standard-edition","1.notes\u002Fdevelopment\u002Fjava\u002Fjava-standard-edition",{"title":179,"path":180,"stem":181},"Java Memory Model","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fjmm","1.notes\u002Fdevelopment\u002Fjava\u002Fjmm",{"title":183,"path":184,"stem":185},"JPA","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fjpa","1.notes\u002Fdevelopment\u002Fjava\u002Fjpa",{"title":187,"path":188,"stem":189},"Keywords","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fkeywords","1.notes\u002Fdevelopment\u002Fjava\u002Fkeywords",{"title":191,"path":192,"stem":193},"Maven","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fmaven","1.notes\u002Fdevelopment\u002Fjava\u002Fmaven",{"title":195,"path":196,"stem":197},"Spring AOP","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-aop-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-aop-presentation",{"title":199,"path":200,"stem":201},"Spring Boot","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-boot","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-boot",{"title":203,"path":204,"stem":205},"Spring Core","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-core-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-core-presentation",{"title":207,"path":208,"stem":209},"Spring Data","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-data","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-data",{"title":211,"path":212,"stem":213},"Spring JDBC","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-jdbc","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-jdbc",{"title":215,"path":216,"stem":217},"Spring MVC","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-mvc-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-mvc-presentation",{"title":219,"path":220,"stem":221},"Spring Security","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-security","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-security",{"title":223,"path":224,"stem":225},"Testing","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Ftesting","1.notes\u002Fdevelopment\u002Fjava\u002Ftesting",{"title":227,"path":228,"stem":229,"children":230,"page":30},"Js","\u002Fnotes\u002Fdevelopment\u002Fjs","1.notes\u002Fdevelopment\u002Fjs",[231,235],{"title":232,"path":233,"stem":234},"JavaScript","\u002Fnotes\u002Fdevelopment\u002Fjs\u002Fjava-script","1.notes\u002Fdevelopment\u002Fjs\u002Fjava-script",{"title":236,"path":237,"stem":238},"NodeJS","\u002Fnotes\u002Fdevelopment\u002Fjs\u002Fnode-js","1.notes\u002Fdevelopment\u002Fjs\u002Fnode-js",{"title":240,"path":241,"stem":242,"children":243,"page":30},"PowerPlatform","\u002Fnotes\u002Fdevelopment\u002Fpower_platform","1.notes\u002Fdevelopment\u002Fpower_platform",[244,248,252,256],{"title":245,"path":246,"stem":247},"Power Apps","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fpower-apps","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fpower-apps",{"title":249,"path":250,"stem":251},"Power Automate","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fpower-automate","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fpower-automate",{"title":253,"path":254,"stem":255},"Power BI","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fpower-bi","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fpower-bi",{"title":257,"path":258,"stem":259},"Sharepoint","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fsharepoint","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fsharepoint",{"title":261,"path":262,"stem":263},"Python","\u002Fnotes\u002Fdevelopment\u002Fpython","1.notes\u002Fdevelopment\u002Fpython",{"title":265,"path":266,"stem":267,"children":268,"page":30},"Devops","\u002Fnotes\u002Fdevops","1.notes\u002Fdevops",[269,273,277,281,285,289,293,297,306],{"title":270,"path":271,"stem":272},"Containers","\u002Fnotes\u002Fdevops\u002Fcontainers","1.notes\u002Fdevops\u002Fcontainers",{"title":274,"path":275,"stem":276},"Curl","\u002Fnotes\u002Fdevops\u002Fcurl","1.notes\u002Fdevops\u002Fcurl",{"title":278,"path":279,"stem":280},"GCP","\u002Fnotes\u002Fdevops\u002Fgcp","1.notes\u002Fdevops\u002Fgcp",{"title":282,"path":283,"stem":284},"GIT","\u002Fnotes\u002Fdevops\u002Fgit","1.notes\u002Fdevops\u002Fgit",{"title":286,"path":287,"stem":288},"Jenkins","\u002Fnotes\u002Fdevops\u002Fjenkins","1.notes\u002Fdevops\u002Fjenkins",{"title":290,"path":291,"stem":292},"Kubernetes","\u002Fnotes\u002Fdevops\u002Fkubernetes","1.notes\u002Fdevops\u002Fkubernetes",{"title":294,"path":295,"stem":296},"Linux","\u002Fnotes\u002Fdevops\u002Flinux","1.notes\u002Fdevops\u002Flinux",{"title":298,"path":299,"stem":300,"children":301,"page":30},"Os","\u002Fnotes\u002Fdevops\u002Fos","1.notes\u002Fdevops\u002Fos",[302],{"title":303,"path":304,"stem":305},"MAC OS","\u002Fnotes\u002Fdevops\u002Fos\u002Fmacos","1.notes\u002Fdevops\u002Fos\u002Fmacos",{"title":307,"path":308,"stem":309},"WSL","\u002Fnotes\u002Fdevops\u002Fwsl","1.notes\u002Fdevops\u002Fwsl",{"title":311,"path":312,"stem":313,"children":314,"page":30},"Hardware","\u002Fnotes\u002Fhardware","1.notes\u002Fhardware",[315],{"title":316,"path":317,"stem":318},"Keyboard","\u002Fnotes\u002Fhardware\u002Fkeyboard","1.notes\u002Fhardware\u002Fkeyboard",{"title":320,"path":321,"stem":322,"children":323,"page":30},"Homelab","\u002Fnotes\u002Fhomelab","1.notes\u002Fhomelab",[324,328,337,350],{"title":325,"path":326,"stem":327},"Proxmox","\u002Fnotes\u002Fhomelab\u002F_-proxmox-1","1.notes\u002Fhomelab\u002F_ proxmox 1",{"title":329,"path":330,"stem":331,"children":332,"page":30},"Cloudflare","\u002Fnotes\u002Fhomelab\u002Fcloudflare","1.notes\u002Fhomelab\u002Fcloudflare",[333],{"title":334,"path":335,"stem":336},"Cloudflare Workers","\u002Fnotes\u002Fhomelab\u002Fcloudflare\u002Fworkers","1.notes\u002Fhomelab\u002Fcloudflare\u002Fworkers",{"title":338,"path":339,"stem":340,"children":341,"page":30},"HomeAssistant","\u002Fnotes\u002Fhomelab\u002Fhome_assistant","1.notes\u002Fhomelab\u002Fhome_assistant",[342,346],{"title":343,"path":344,"stem":345},"EspHome debugger","\u002Fnotes\u002Fhomelab\u002Fhome_assistant\u002Fesphome-debugger","1.notes\u002Fhomelab\u002Fhome_assistant\u002Fesphome-debugger",{"title":347,"path":348,"stem":349},"GIT integration","\u002Fnotes\u002Fhomelab\u002Fhome_assistant\u002Fgit-integration","1.notes\u002Fhomelab\u002Fhome_assistant\u002Fgit-integration",{"title":325,"path":351,"stem":352,"children":353},"\u002Fnotes\u002Fhomelab\u002Fproxmox","1.notes\u002Fhomelab\u002Fproxmox",[354,358,362,365,369,373,377],{"title":355,"path":356,"stem":357},"Issue: TASK ERROR: Device \u002Fdev\u002Fdri\u002Fcard1 does not exist","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fissue_task_error_device_dev_dri_card1_does-not-exist","1.notes\u002Fhomelab\u002Fproxmox\u002FIssue_TASK_ERROR_device_dev_dri_card1_does not exist",{"title":359,"path":360,"stem":361},"Mount USB Drive To LXC Container","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fmount-usb-drive-to-lxc-container","1.notes\u002Fhomelab\u002Fproxmox\u002FMount USB drive to LXC container",{"title":325,"path":363,"stem":364},"\u002Fnotes\u002Fhomelab\u002Fproxmox\u002F_-proxmox","1.notes\u002Fhomelab\u002Fproxmox\u002F_ proxmox",{"title":366,"path":367,"stem":368},"ARR","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Farr","1.notes\u002Fhomelab\u002Fproxmox\u002Farr",{"title":370,"path":371,"stem":372},"Auto login via SSH from Proxmox UI","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fauto_login_via_ssh_from_proxmox_ui","1.notes\u002Fhomelab\u002Fproxmox\u002Fauto_login_via_ssh_from_proxmox_ui",{"title":374,"path":375,"stem":376},"Installation","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fdokploy","1.notes\u002Fhomelab\u002Fproxmox\u002Fdokploy",{"title":290,"path":378,"stem":379},"\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fkubernetes","1.notes\u002Fhomelab\u002Fproxmox\u002Fkubernetes",{"title":381,"path":382,"stem":383,"children":384,"page":30},"Leadership","\u002Fnotes\u002Fleadership","1.notes\u002Fleadership",[385,389,393],{"title":386,"path":387,"stem":388},"Leader Toolbox","\u002Fnotes\u002Fleadership\u002Fleader-toolbox","1.notes\u002Fleadership\u002Fleader-toolbox",{"title":390,"path":391,"stem":392},"Enterprise Project Structure","\u002Fnotes\u002Fleadership\u002Fproject-doc-structure","1.notes\u002Fleadership\u002Fproject-doc-structure",{"title":394,"path":395,"stem":396},"Scrum template","\u002Fnotes\u002Fleadership\u002Fscrum-template","1.notes\u002Fleadership\u002Fscrum-template",{"title":398,"path":399,"stem":400,"children":401,"page":30},"Products","\u002Fnotes\u002Fproducts","1.notes\u002Fproducts",[402],{"title":403,"path":404,"stem":405},"BigQuery","\u002Fnotes\u002Fproducts\u002Fgcp-big-query","1.notes\u002Fproducts\u002Fgcp-big-query",{"id":407,"title":408,"authors":409,"badge":409,"body":410,"date":745,"description":458,"extension":746,"image":409,"meta":747,"navigation":749,"path":750,"seo":751,"stem":752,"__hash__":753},"posts\u002F2.blog\u002F2016-09-17-ng2-uikit-spa-app.md","Angular 2 + uikit application",null,{"type":411,"value":412,"toc":742},"minimark",[413,418,434,438,449,459,462,468,471,477,484,487,494,498,505,511,513,519,522,529,535,541,547,553,559,566,572,578,584,587,589,595,599,602,609,615,623,629,632,637,643,649,655,657,659,665,669,676,679,685,688,694,700,706,712,715,735,737],[414,415,417],"h1",{"id":416},"prerequisite","Prerequisite",[419,420,421,424,427],"ul",{},[422,423,282],"li",{},[422,425,426],{},"NodeJS and NPM",[422,428,429,430],{},"global NPM libraries: ",[431,432,433],"code",{},"sudo npm install -g webpack webpack-dev-server typescript",[414,435,437],{"id":436},"init-angular-2-project-with-seed","Init Angular 2 project with seed",[439,440,441,442,448],"p",{},"Clone repo from ",[443,444,445],"a",{"href":445,"rel":446},"https:\u002F\u002Fgithub.com\u002Fangular\u002Fangular2-seed",[447],"nofollow",":",[450,451,456],"pre",{"className":452,"code":454,"language":455},[453],"language-text","git clone git@github.com:angular\u002Fangular2-seed.git ng2uikit-app\n","text",[431,457,454],{"__ignoreMap":458},"",[439,460,461],{},"Install dependencies:",[450,463,466],{"className":464,"code":465,"language":455},[453],"cd ng2uikit-app\nnpm install\n",[431,467,465],{"__ignoreMap":458},[439,469,470],{},"Run app:",[450,472,475],{"className":473,"code":474,"language":455},[453],"npm start\n",[431,476,474],{"__ignoreMap":458},[439,478,479,480],{},"Go to ",[443,481,482],{"href":482,"rel":483},"http:\u002F\u002Flocalhost:3000",[447],[439,485,486],{},"Result:",[439,488,489],{},[490,491],"img",{"alt":492,"src":493},"NG2 seed app","\u002Fposts\u002Fassets\u002F2016-09-17_init-ng-app-page.png",[414,495,497],{"id":496},"uikit-styles","uikit styles",[439,499,500,501,504],{},"Replace",[431,502,503],{},"home.html"," content:",[450,506,509],{"className":507,"code":508,"language":455},[453],"\u003Cdiv class=\"uk-container uk-container-center uk-margin-top uk-margin-large-bottom\">\n\n  \u003Cdiv class=\"uk-grid\" data-uk-grid-margin>\n    \u003Cdiv class=\"uk-width-medium-1-1\">\n\n      \u003Cdiv class=\"uk-vertical-align uk-text-center\"\n           style=\"background: url('data:image\u002Fsvg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEzMHB4IiBoZWlnaHQ9IjQ1MHB4IiB2aWV3Qm94PSIwIDAgMTEzMCA0NTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExMzAgNDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxyZWN0IGZpbGw9IiNGNUY1RjUiIHdpZHRoPSIxMTMwIiBoZWlnaHQ9IjQ1MCIvPg0KPC9zdmc+DQo=') 50% 0 no-repeat; height: 450px;\">\n        \u003Cdiv class=\"uk-vertical-align-middle uk-width-1-2\">\n          \u003Ch1 class=\"uk-heading-large\">Sample Heading\u003C\u002Fh1>\n          \u003Cp class=\"uk-text-large\">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac\n            cursus commodo.\u003C\u002Fp>\n          \u003Cp>\n            \u003Ca class=\"uk-button uk-button-primary uk-button-large\" href=\"#\">Button\u003C\u002Fa>\n            \u003Ca class=\"uk-button uk-button-large\" href=\"#\">Button\u003C\u002Fa>\n          \u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[431,510,508],{"__ignoreMap":458},[439,512,486],{},[439,514,515],{},[490,516],{"alt":517,"src":518},"app without styles","\u002Fposts\u002Fassets\u002F2016-09-17_app-page-no-styles.png",[439,520,521],{},"Need to tell webpack how to build uikit theme and bundle them with app.",[439,523,524,525,528],{},"Install uikit as a npm module. We will need it later as an runtime dependency so save it with ",[431,526,527],{},"--save"," :",[450,530,533],{"className":531,"code":532,"language":455},[453],"npm install uikit --save\n",[431,534,532],{"__ignoreMap":458},[439,536,537,538,528],{},"Install less and other resource loaders for webpack. We will use them only for building app so use ",[431,539,540],{},"--save-dev",[450,542,545],{"className":543,"code":544,"language":455},[453],"npm install --save-dev less-loader style-loader less url-loader file-loader\n",[431,546,544],{"__ignoreMap":458},[439,548,549,550,528],{},"In ",[431,551,552],{},"webpack.config.js",[450,554,557],{"className":555,"code":556,"language":455},[453],"  module: {\n    loaders: [\n      ...\n      {test: \u002F\\.less$\u002F, loader: 'style!css!less'},\n      {test: \u002F\\.woff(2)?(\\?v=[0-9]\\.[0-9]\\.[0-9])?$\u002F, loader: \"url-loader?limit=10000&mimetype=application\u002Ffont-woff\"},\n      {test: \u002F\\.(ttf|eot|svg|png|gif)(\\?v=[0-9]\\.[0-9]\\.[0-9])?$\u002F, loader: \"file-loader\"},\n    ]\n  }\n",[431,558,556],{"__ignoreMap":458},[439,560,561,562,565],{},"Create ",[431,563,564],{},"src\u002Fstyles.less"," file with content:",[450,567,570],{"className":568,"code":569,"language":455},[453],"@import \"..\u002Fnode_modules\u002Fuikit\u002Fthemes\u002Fdefault\u002Fuikit.less\";\n\n@icon-font-path: \"..\u002F..\u002Ffonts\"; \u002F\u002Ffixing wrong relative path\n",[431,571,569],{"__ignoreMap":458},[439,573,574,575,448],{},"Add as a first line to file ",[431,576,577],{},"main.browser.ts",[450,579,582],{"className":580,"code":581,"language":455},[453],"import '.\u002Fstyles.less';\n",[431,583,581],{"__ignoreMap":458},[439,585,586],{},"Need to restart watch process in order to apply new loaders.",[439,588,486],{},[439,590,591],{},[490,592],{"alt":593,"src":594},"app with styles","\u002Fposts\u002Fassets\u002F2016-09-17_app-page-with-styles.png",[414,596,598],{"id":597},"uikit-dynamic-elements","uikit dynamic elements",[439,600,601],{},"So far static elements like panels or buttons are showing properly. However dynamic components using javascript will fail.",[439,603,604,605,608],{},"Modify ",[431,606,607],{},"about.html"," file by adding on the end:",[450,610,613],{"className":611,"code":612,"language":455},[453],"\n\u003C!-- This is the anchor toggling the modal -->\n\u003Ca class=\"uk-button uk-button-primary\" href=\"#my-id\" data-uk-modal>Open dialog\u003C\u002Fa>\n\n\u003C!-- This is the modal -->\n\u003Cdiv id=\"my-id\" class=\"uk-modal\">\n  \u003Cdiv class=\"uk-modal-dialog uk-modal-dialog-lightbox\">\n    \u003Ca href=\"\" class=\"uk-modal-close uk-close uk-close-alt\">\u003C\u002Fa>\n    This is a dialog box\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[431,614,612],{"__ignoreMap":458},[439,616,617,618,622],{},"Open ",[443,619,620],{"href":620,"rel":621},"http:\u002F\u002Flocalhost:3000\u002F#\u002Fabout",[447]," page and click button. Result:",[439,624,625],{},[490,626],{"alt":627,"src":628},"app without js","\u002Fposts\u002Fassets\u002F2016-09-17_app-page-no-js.png",[439,630,631],{},"This is actually because we didn't povided all required scripts (dependencies) yet.",[439,633,634,635,528],{},"Need to install runtime dependencies. uikit is already installed, however it requires also jQuery. Install jquery runtime dependencies as a npm module and save it using ",[431,636,527],{},[450,638,641],{"className":639,"code":640,"language":455},[453],"npm install jquery --save\nnpm install imports-loader --save-dev\n",[431,642,640],{"__ignoreMap":458},[439,644,645,646,528],{},"Add uikit with jquery as it's dependency to be bundled for the browser. Add below code to the bottom of ",[431,647,648],{},"vendor.browser.ts",[450,650,653],{"className":651,"code":652,"language":455},[453],"require(\"imports?$=jquery\u002Fsrc\u002Fjquery!uikit\");\n",[431,654,652],{"__ignoreMap":458},[439,656,586],{},[439,658,486],{},[439,660,661],{},[490,662],{"alt":663,"src":664},"app with js","\u002Fposts\u002Fassets\u002F2016-09-17_app-page-with-js.png",[414,666,668],{"id":667},"theming","Theming",[439,670,671,672],{},"Go to uikit customizer: ",[443,673,674],{"href":674,"rel":675},"http:\u002F\u002Fgetuikit.com\u002Fdocs\u002Fcustomizer.html",[447],[439,677,678],{},"Modify elements that you wish:",[439,680,681],{},[490,682],{"alt":683,"src":684},"theme customization","\u002Fposts\u002Fassets\u002F2016-09-17_customize_theme.png",[439,686,687],{},"Download less file, rename it to theme and put it in the app directory.",[439,689,690,691,504],{},"Example ",[431,692,693],{},"theme.less",[450,695,698],{"className":696,"code":697,"language":455},[453],"\u002F* theme: Default *\u002F\n\n\n\u002F\u002F\n\u002F\u002F General\n\u002F\u002F\n\n@global-background: rgba(94, 209, 255, 0.33);\n\n\u002F\u002F\n\u002F\u002F Icon\n\u002F\u002F\n\n@icon-font-path: \"..\u002F..\u002Ffonts\";\n",[431,699,697],{"__ignoreMap":458},[439,701,604,702,705],{},[431,703,704],{},"styles.less"," file. Mind that you can remove fix for fonts as overrides already contains fix:",[450,707,710],{"className":708,"code":709,"language":455},[453],"@import \"..\u002Fnode_modules\u002Fuikit\u002Fthemes\u002Fdefault\u002Fuikit.less\";\n@import \".\u002Ftheme.less\";\n",[431,711,709],{"__ignoreMap":458},[439,713,714],{},"Mind that if you have changed the default main theme then first line should be modified as follow:",[419,716,717,723,729],{},[422,718,719,720],{},"Default - ",[431,721,722],{},"..\u002Fnode_modules\u002Fuikit\u002Fthemes\u002Fdefault\u002Fuikit.less",[422,724,725,726],{},"Gradient - ",[431,727,728],{},"..\u002Fnode_modules\u002Fuikit\u002Fthemes\u002Fgradient\u002Fuikit.less",[422,730,731,732],{},"Almost Flat - ",[431,733,734],{},"..\u002Fnode_modules\u002Fuikit\u002Fthemes\u002Falmost-flat\u002Fuikit.less",[439,736,486],{},[439,738,739],{},[490,740],{"alt":683,"src":741},"\u002Fposts\u002Fassets\u002F2016-09-17_customized_theme.png",{"title":458,"searchDepth":743,"depth":743,"links":744},2,[],"2016-09-17","md",{"layout":748},"post",true,"\u002Fblog\u002F2016-09-17-ng2-uikit-spa-app",{"title":408,"description":458},"2.blog\u002F2016-09-17-ng2-uikit-spa-app","znBimFR2D2wiwSvcfPTqg-as_x7osz3XDRw6F5uGqGE",[755,760],{"title":756,"path":757,"stem":758,"description":759,"children":-1},"Prepare environment for releasing to Maven Sentral Repository","\u002Fblog\u002F2016-03-14-prepare-environment-for-releasing-to-maven-central","2.blog\u002F2016-03-14-prepare-environment-for-releasing-to-maven-central","Generate key for signing build package:\nimport existing key gpg2 --keyserver x-hkp:\u002F\u002Fpool.sks-keyservers.net --recv-keys 9EBCB0B3\nor generate new gpg --gen-key\nand export it gpg2 --keyserver hkp:\u002F\u002Fpool.sks-keyservers.net --send-keys A6BAB25C",{"title":761,"path":762,"stem":763,"description":458,"children":-1},"Private VPS with Raspberry PI 3","\u002Fblog\u002F2017-06-18-private-vps-with-rpi3","2.blog\u002F2017-06-18-private-vps-with-rpi3",1788257055224]