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.

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.

• Generator for page and component

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