@oncomouse/hyperapp-starter

Opinionated starter pack for building apps using hyperapp. hyperapp-effects is also provided for more Elm-style goodness.

For stylesheets, picostyle is provided. Additionally, node-sass and a variety of PostCSS plugins are installed. You can also use CSS modules or tachyons for styling components.

Testing is supported through the Mocha framework (with help from zinserjan/mocha-webpack). Chai (for assertions), Sinon (for spies, mocks, and stubs), and JSDom are all also provided. Check the .spec.js files in components/, containers/, and actions/ to see some examples to get started writing unit tests.

Getting Started

Run npm install or yarn install to install packages.

You may also want to reinitialize git, which can be done by running:

rm -rf .git
git init
git add .
git commit -m "Initial Commit"

Developing

There are a number of scripts already available for supporting development:

• Start Development Server – npm run start
• Build Production Code – npm run build
• Visualize Bundle Size – npm run analyze
• Unit Testing – npm run mocha
  • npm run mocha:watch to live update unit tests
• Checking Code Quality – npm run lint
  • npm run lint -- --fix to fix errors automatically

Deploying

Run yarn build or npm run build to build an optimized, production version of your app. It will be in the build/ directory.

Debugging

npm run analyze

Also: env NODE_ENV=production webpack --json > stats.json and upload to Webpack Visualizer

Adding Routing

Click here for instructions