Hyperapp One

Hyperapp One is a Parcel boilerplate for quickstarting a web application with Hyperapp, JSX, Prettier, and Airbnb's JavaScript Styleguide via ESLint.

Redux Dev Tools support is included as well 😄

Installing
Testing
Development
- Wiping the Commit History
- Deploying to GitHub Pages
  - First Time
  - Every Time After
Stylistic Differences
License

Installing

git clone https://github.com/selfup/hyperapp-one
cd hyperapp-one
npm install
npm start

Testing

npm test

All tests are in the root test directory. 🎉

Development

Access localhost:1234.

The browser will reload as you save new code. 🚀

Now go code something awesome!

Wiping the Commit History

Make sure you are in the boilerplate root and run:

npm run wipe

Add your remote:

git remote add origin <ssh_or_https_url>

Then work as usual.

Or if you prefer to do it yourself from scratch:

rm -rf .git
git init
git add .
git commit -m "initial commit"

Then add your remote and work from there as usual.

git remote add origin <ssh_or_https_url>

Deploying to GitHub Pages

This will be interactive as it merges master into the gh-pages branch 🙏

./scripts/gh_pages.sh

Sometimes it will say there is nothing to commit even though you have more commits.

Just do a git push or a git push -f and then check back out to master 🙏

Now visit:

No custom domain: yourUserName.github.io/yourRepoName
With a custom domain: yourCustomDomain/yourRepoName

Stylistic Differences

As you may have noticed I don't use Standard. I prefer ESLint and AirBnb as well as Prettier.

Feel free to change this. You can easily remove .eslintrc.js and code without a linter, as well as remove all eslint packages in the package.json!

I just like how strict AirBnb is, and how it forces you to learn certain ways of doing things manually. It also enforces rules that make it so git diffs are less of a pain to go through. VSCode and Atom have options to have ESLint auto correct (as much as it can) JS strictness. Prettier just makes everything consistent and pretty 😄

I also use JSX instead of the built-in h function, because to me it is easier to go through Code Reviews with, and is stylistically more pleasing to me. It also helps with UX teams as they know HTML, and JSX is closer to HTML than pure h calls. See @hyperapp/html for another alternative to JSX.

License

Hyperapp One is MIT licensed. See LICENSE.

vladkosarev/hyperapp-one