Giter VIP home page Giter VIP logo

hyperapp-starter's Introduction

Hyperapp non-official logo

Hyperapp starter

Starter template to quickly build front-ends using Hyperapp with a modern configuration and best-practices in mind.

๐Ÿš€ Quick start:

Click here to use this template, or run these commands:

# Clone project
git clone https://github.com/loteoo/hyperapp-starter.git

cd hyperapp-starter

npm install         # Install dependencies
npm start           # Dev server + live reload
npm run build   # Build for production and generate service worker

Or use a .zip download

Features

  • Parcel for dev tooling
  • CSS Modules
  • Smart CSS defaults on top of sanitize.css
  • Standard JavaScript style guide with a11y and prettier linting
  • JSX ready to go
  • Automatic import of the h function (say goodbye to that h import!)
  • Absolute imports (say goodbye to the ../../ hell)
  • Type hinting and intellisense without typescript, thanks to the jsconfig.json file.
  • PWA/SPA ready with a default web app manifest

Live preview

https://hyperapp-starter-demo.netlify.com/


Absolute imports & intellisense

intellisense gif

CSS modules typings

To enable go in any JS file, open the command palette, type > Select TypeScript Version, pick Use Workspace Version

css-modules gif


To-do list demo app:

Basic CRUD actions with hyperapp 2.0
https://github.com/loteoo/hyperapp-todolist

FAQ:

How do I deploy my app?

By default, apps using this starter can be considered static sites, which means you can deploy for free on services like Netlify and Github Pages.

Need routing, code splitting and pre-rendering out of the box?

Use this instead!


hyperapp-starter's People

Contributors

loteoo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.