mkapp

A CLI build tool for React + Condux

Installation

npm install mkapp --save

Install the command line tools globally with npm install mkapp-cli -g

Alternatively, if installed locally, set an environment alias alias mkapp='node ./node_modules/.bin/mkapp' to use from the command line without installing the cli.

===

Usage

Create a new app

mkapp new

• Scaffolds out a new app and copy boilerplate into your project.
• Make sure to run from your project root where node_modules directory is located
• copies boilerplate project files from node_modules into ./src

Develop

mkapp go or mkapp dev

• transpiles your public and server app into dev/ using babel
• bundles your public app into dev/public
• bundles your admin dashboard app into dev/admin
• opens a browser window to localhost:<port>/app
• opens a browser window to localhost:<port>/admin
• starts your app's server listening to <port>
• starts a live reload server for src/public and reloads localhost:<port>/app when files change
• starts a live reload server for src/admin and reloads localhost:<port>/admin when files change
• starts a nodemon process to restart the server when api files, middleware files, or index.js are changed
• establishes a websocket connection (using condux) between the server, admin app, he public app

• NOTE: default <port> is 3030, override it in your app's mkapp_config.json

Theming

see the MkappTheme Documentation

Build

mkapp dist

• Not written yet
• transpiles your public and server app into dist/ using babel
• bundles and minifies your public app into dist/public
• bundles your minifies admin dashboard app into dist/admin

===

Scaffold

App root structure

root/
|-- package.json
|-- mkapp_config.json
|-- .gitignore
|-- .eslintrc
|-- node_modules/
|-- dist/ (compiled and compressed app files, tracked in git)
|-- dev/ (compiled app files, not tracked in git)
|-- src/
	|-- server/
		|-- index.js
		|-- middleware/
		|-- api/
			|-- v1.0/
				|-- index.js
	|-- condux/ ( websocket nexus, [see condux package](https://github.com/epferrari/condux) )
		|-- admin/
			|-- index.js
			|-- actions.js
			|-- constants.js
			|-- frequencies/
		|-- public/
			|-- index.js
			|-- actions.js
			|-- constants.js
			|-- frequencies/
		|-- server
			|-- index.js
			|-- adminAppActions.js
			|-- publicAppActions.js
			|-- channels/
	|-- public/
		* See Below *
	|-- admin/
		* See Below
	|-- modules/
		(empty by default, a place for code packages tightly coupled around a single concern with files to be imported public, admin, and server)

/public and /admin directory structure

/
|-- index.html
|-- actions/
	|-- index.js
|-- assets/
	|-- img/
	|-- fonts/
		* Roboto fonts
		* Font-Awesome fonts
|-- components/ (ex. ComponentA.jsx, ComponentB.jsx)
|-- contexts/
	|-- appContext.jsx
|-- datastores/
	|-- AppState.js
|-- less/
	|-- main.less
	|-- components/ (ex. ComponentA.less, ComponentB.less)
	|-- lib/
		|-- fonts.less
		|-- app.less
		|-- material-ui-fonts.less
	|-- react-css-transition-groups/
|-- views/
	|-- Home.jsx