mkapp

A CLI build tool for React + Condux

Usage no npm install needed!

<script type="module">
  import mkapp from 'https://cdn.skypack.dev/mkapp';
</script>

README

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