Skip to content

Latest commit

 

History

History
88 lines (53 loc) · 3.9 KB

README.md

File metadata and controls

88 lines (53 loc) · 3.9 KB
Raw

Baseplate

[ a boilerplate code for ionic + react ]

Documentation:

Scaffold your project using Ionic Framework + React.js + Redux.js (+ immer.js + Redux-Saga + Re-Select) fully written in typescript

Enjoy building complex Ionic + React based apps.

PRs Welcome Open Source Love

Baseplate features

  • Well suited for PWA, Apache Cordova or Electron based applications.

  • Out of the box lazy-loading components and pages.

  • Tightly coupled with Typescript system.

enter image description here

  • Generator for page and component

enter image description here

Usage:

Clone the repository and run below command on the root of your project.

npm i

ionic serve

CLi for page & component generation

For page: npm run gen-page TestPage

For Component: npm run gen-comp TestComponent

Implementation details:

File \ Folder Details
src\pages\SimplePage Reference implementation for a page that is followed throughout boiler plate code (built on container concept)
src\pages\SimplePage\constants.ts Contains both action names and constants used within a Page \ Container
src\components Contains all the elements and components to be used in Page \ Container.
src\basplate Contains all the project related wiring and also application level configurations.
src\shared-base Refer readme.md inside shared-base folder

Options

Options \ Object Details
eProps Emiter props (differentiated from normal props), used to emit actions to the reducer or middleware from the container.
action object that carries the data in a component
reducer is implemented using immer.js, a draft based state manipulation.
SCSS (style.module.scss) module based for the classname hashing & namespace collision prevention.

Action Object - source

Options \ Object Type Description
type String Unique string for each page or container. It should be unique across the application.
payLoad String / Object Data payload carrier for component to middleware and vice versa
meta Function / String / Object Any data directly to be sent to middlewares and vice versa without putting to global store. ex: function callback

Repo inspired by

🔥 ReactBoilerplate

Suggestions 0r Comments

Please raise a PR or issue request for your valuable contributions and Suggestions

Roadmaps

  • Translation (i18n support) - Tweaks needed
  • Boilerplate code without Redux and Saga
  • Adding more options to generator
  • Support for React Native