HapiCycle is a basic starter kit to get you going with a straight-forward isomorphic/universal Cycle.js app.
WORK IN PROGRESS
HapiCycle is currently a WIP and the skeleton app may not yet be following ideal FRP/Cycle conventions/best-practices and the Webpack config hasn't been fully optimized. Pull requests are welcome!
- Cycle.js
- Hapi API/server configured to render your Cycle.js app on the server-side
- Waterline ORM via Dogwater, preconfigured with Memory adapter
- A skeleton Cycle app under
./src/ui/
providing basic user CRUD functionality as an example/starting point for your app. Includes a bunch of helpful components such as:./src/ui/components/alerts
– Alerts that automatically dismiss after an elapsed time./src/ui/components/label-input
– Inputs with label elements that behave like the HTML5placeholder
attribute, but with animations and better accessibility./src/ui/components/layout
– A layout wrapper component that wraps your pages with a common layout VTree
- Webpack preconfigured with:
- HMR
- less-loader to automatically transpile any LESS your components
import
- css-loader with CSS Modules enabled
- babel-loader with
babel-preset-es2015
for ES2015 support andbabel-polyfill
for old browser support
- Bootstrap's LESS source is included by default, if you don't want it just run:
rm -rf ./assets/styles/bs/
- Animate.css for easy transitions
- FontAwesome for easy to use vector icons
$ git clone https://github.com/wyqydsyq/hapi-cycle.git hapi-cycle/ && cd hapi-cycle/
$ npm install
$ npm run launch
- Open
http://localhost:1337/
in your browser.
- Optimize Webpack config – currently all assets are bundled in both server and client configs. We need one of these configs to bundle the assets and the other one to alias/refer to the already-bundled assets instead of rebundling them.
- Follow FRP/Cycle best practices – some components need refactoring to be more efficient and readable. A few files are
import
ing modules that don't get used. - Improve configurability – Make some basic
development
/production
environment-specific configurations. HMR shouldn't be registered inserver.js
and shouldn't be injected into theclient.js
bundle inproduction
. - Set up API scaffold/boilerplate - API routes/handlers are currently just defined in
./src/server.js
, ideally they should be set up as a seperate file for each handler with a singleroutes.js
mapping routepath
s tohandler
s. - Make a Yeoman generator – Porting this into a Yeoman generator would broaden the awareness/appeal and make using this a bit easier for those who already use Yeoman for scaffolding apps.