This is a base architecture app with react, redux, typescript, Less, bootstrap, Web pack and swagger.

This base application contain:

• React 16+ (Fiber)
• Typescript based
• Webpack 4+
• React-Redux dataflow
• Code splitting and Routing Baesd on webpack 4 and React Router 4
• Multi language support
• Mock Services with API simulations
• Multi layered services (4 including the component access)
• Auto Gen templates(mustache) files for swagger services
• Light weight build footprint, SASS than (400kb including bootstrap)
• Super rendering, with chunking and small footprints, suitable to build hybrid mobile apps.
• SASS styling with bootstrap 4 (SEB bootstrap)
• Multiple build configuration for webpack
• Universal ajax loader based on any number of API calls.
• Async loading and rendering of components
• Entity based components structure
• Web manifest for installing the app as PWA
• Service workers for PWA
• Sharable set of regular expressions for validations throught the app.
• Sharable SASS variables and mixins
• Implemented a set of sharable basic Components based on bootstrap, inside Elements folder. these components will continue to get better.

This application requires: node 8.10.0 or above npm 5.7.1 or above

then you need to add registry in your "npm config list" at the moment package.lock.json pointed to SEB's artifactory.

you can set a new registry by: "npm config set registry https://repo.sebank.se/artifactory/api/npm/seb-npm" to delete the SEB artifactory, and resetting it to default npm. type: "npm config delete registry" then after u set the registry, type "npm config edit" and below conent under the registry which is part of

config=

• registry=https://repo.sebank.se/artifactory/api/npm/seb-npm/
• always-auth=true
• strict-ssl=false
• HTTP_PROXY=http://gia.sebank.se:8080
• HTTPS_PROXY=http://gia.sebank.se:8080
• NO_PROXY=sebank.se
• NODE_TLS_REJECT_UNAUTHORIZED=0

While u are conneced to internet and SEB network type: "npm install" in your root directory to install the dependacies.

After successful npm installation, to run the app in development use: "npm start" Application will run on http://localhost:3000 by default.

If you are looking to build the app which can be demo as stand alone (means it will contain mock data) then type: "npm run offline"

For production you need to run: "npm run build"

The core architecture of this base boilderplate is about multi layred component spliting and multi layerd services. This boilderplate will show you simple entity based structure for you components and how to spliting your code and components into a set of parent-childern routes, plus how to seperate your services into 4 stages, from ajax calls to component access. The key to more maintanabale and managable code is to build a more encapsulated and sctructured code. Here we are building an entity based components, means we have components which structured themeseleve baed on their tasks, and any related entity to them such as dataflow, styles and so on, will flow the same thing. This will alow us to not only have more meaningful code, rather a code which relays on routes and renders invidivually. The key to code splliting is routes, webpack and imports. Webpack will look at your routes and their own routes and will chunk your components into undemand codes. As a plus webpack 4+ will even chunk your common dependancies into a sharable chunk, so the application doesnt need to bundle repetative dependacies to each individual chunks. The second key to more decupeld code is multi service layers which not only make your services sharable, but also it will create encapsulation at each portion of speration. This boilderplate tries to show you how you can have 4 stages for your services:

• 1- Ajax layer: this layer can be auto generated by swagger for you or manually written. This layer job is exact Ajax call to a service and return a promise.
• 2- Api layer: this layer is a switch which can be configure on compile time to either call the Ajax layer or Simulate a mock service which again returns a promise
• 3- Redux Actions: This layer job is to be a gateway between your components and API layer based on redux data flow, so your components only call actions here to connect themselves with redux.
• 4- Component layer.

Lets talk about auto gen APIs, as you know the first step in this Services is a auto generated file which includes all the ajax calls plus the models, (it can be maually written as well). Here we use swagger on a server to sync the API calls and models between client and server. The next part of this boilerplate is a set of common components, so we can keep the code consistant through the application. These components will be keep udpating with improvements plus new ones will come on regular bases. the long term plan is to move them into their own npm package, so it is easier to use them or update them.