fly-kit-preact icon indicating copy to clipboard operation
fly-kit-preact copied to clipboard

A starter kit for building offline / SPA / PWA apps with Preact

fly-kit-preact

A starter kit for building offline / SPA / PWA apps with Preact :atom_symbol:

Do you want to kickstart a new project with Preact but hate dealing with build tools?
Great! :laughing: You've come to the right place! By using fly-kit-preact, you will skip the "tooling phase" & jump straight into application development.

This configuration fits the "90% use-case" for those who want to build offline-first web apps. See the included features below. However, with Fly, it's very easy to add or change settings for your needs.

Synonymous buzzwords: SPA, PWA, Service Worker

Please note: Boilerplate does not incorporate the latest "css-in-js" or "css modules" techniques. Instead, the more traditional approach is taken wherein styles and scripts are kept separate. That said, you may certainly and easily take that route if desired. :white_check_mark:


:warning: Boilerplate & commands will evolve as my own development process does. :warning:

---

Install

git clone https://github.com/lukeed/fly-kit-preact
npm install
npm start

:exclamation: Pro Tip: Use Yarn to install dependencies 3x faster than NPM!

Features

  • Offline Caching (via serviceWorker)
  • SASS & Autoprefixer
  • Asset Versioning (aka "cache-busting")
  • ES2015 (ES6) and ES2016 (ES7) support via Buble
  • JavaScript linting via XO and eslint-config-xo-preact

Development

Commands

Any of the following commands can (and should :wink:) be run from the command line.

If using Yarn, all instances of npm can be replaced with yarn. :ok_hand:

build

$ npm run build

Compiles all files. Output is sent to the dist directory.

release

$ npm run release

Builds the app for production, includes cache-busting asset names. Output is sent to the release directory.

start

$ npm start

Executes build and runs your application (from the dist directory) in the browser.

test

$ npm run test

Lints all JavaScript files.

watch

$ npm run watch

Like start, but will auto-compile & auto-reload the server after any file changes within the src directory.

License

MIT © Luke Edwards