@manhnguyenv

Welcome to my blog!

Angular Webpack

December 25, 2017 13:45

Yêu cầu của bài toán

https://github.com/stssoftware/Monkey

https://github.com/stssoftware/Puppy

Frontend

  • Angular 2+
  • Webpack
  • Gulp & Koala
  • SASS
  • Bootstrap 4+
  • Font Awesome
  • Responsive Web Design

Backend

  • ASP.NET Core Web API
  • Cross-Origin Resource Sharing (CORS)
  • Token-based Authentication: Bearer Token Authentication, implement use JSON Web Token (JWT)
  • REpresentational State Transfer (REST)
  • ASP.NET Core Web API Help Pages using Swagger
  • Hangfire
  • Redis
  • RESTful API with ASP.NET Core Web API
    • GET
    • PUT
    • POST
    • DELETE
    • HEAD

What's Hangfire?

Hangfire is an open-source framework that helps you to create, process and manage your background jobs

What's Redis?

Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs and geospatial indexes with radius queries. Redis has built-in replication, Lua scripting, LRU eviction, transactions and different levels of on-disk persistence, and provides high availability via Redis Sentinel and automatic partitioning with Redis Cluster...

What's ElasticSearch?

Elasticsearch is a highly scalable open-source full-text search and analytics engine. It allows you to store, search, and analyze big volumes of data quickly and in near real time. It is generally used as the underlying engine/technology that powers applications that have complex search features and requirements.

Elasticsearch is a distributed, RESTful search and analytics engine capable of solving a growing number of use cases. As the heart of the Elastic Stack, it centrally stores your data so you can discover the expected and uncover the unexpected.

What's modular programming?

Asynchronous Module Definition (AMD)

What's SystemJS?

Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS.

What's RequireJS?

https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/ 

What's Webpack?

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Angular Webpack

https://github.com/preboot/angular-webpack

http://bashooka.com/coding/22-excellent-responsive-navigation-menu-examples/

https://codingthesmartway.com/getting-started-with-css-grid/

http://www.creativebloq.com/features/10-website-navigation-trends-for-2017

https://www.pluralsight.com/courses/asp-dot-net-core-restful-api-building

https://stackify.com/asp-net-core-web-api-guide/

https://docs.microsoft.com/en-us/aspnet/core/tutorials/web-api-help-pages-using-swagger

Quick start

git clone https://github.com/preboot/angular-webpack.git my-app
cd my-app
npm install
npm install sass
npm install -save-dev webpack
npm install node-sass
npm install sass-watch
npm run build-css
npm run watch-css
npm install gulp-sass --save-dev
npm install bootstrap@next --save

in vendor.ts add the following:

import 'bootstrap/dist/css/bootstrap.css';
npm start
code .
http://localhost:8080/

Categories

Recent posts