Mage-UI

Using just single command, scaffold UI boilerplate with following libraries and examples of react and redux:

Demo

Click here for MAGE-UI demo ...

Usage

With npx

$ npx mage-ui

Without npx

install mage-ui globally

$ npm i -g mage-ui

run mage-ui inside the directory where you want to scaffold the project

$ mage-ui

Runing Boilerplate

1. cd into project boilerplate.

2. Run npm run watch to start the webpack. It will create dist directory with the bundled code and keep watching for changes.

                    OR
   

3. Run npm start to start the webpack dev server. It will automatically open the home page of boilerplate in the browser.

4. Run npm run build to create the optimized, minfied and production ready code inside dist directory.

Result

Boilerplate Directory Structure

Boilerplate directory structure is quite intituitive and simple.

• Project root directory contains following files and directories

• src directory is the main directory. index.html and App.js are the entry points.

• assets directory is for static assets like css, images and static js files

• base_template directory contains the react component for header, footer, router etc

• common directory contains the general react components that can be used by other components

• every page in the boilerplate is a seperate react component. pages directory contains them