/hyperstatic-starter

Starter project for the hyperapp site generator

Primary LanguageCSS

Hyperstatic starter

Live demo

🚀 Quick start:

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

Using npx

npx degit https://github.com/bmartel/hyperstatic-starter.git app

Or clone the project

# Clone project
git clone https://github.com/bmartel/hyperstatic-starter.git

cd hyperstatic-starter

npm install         # Install dependencies
npm start           # Dev server + live reload

Or use a .zip download

Building your site :

# Build for production and generate service worker
npm run build

# Build for production, generate service worker AND pre-render pages
npm run render-pages

Features

  • Route-based code-splitting using Hyperstatic
  • Uses Parcel for compilation, dev server and hot module reloading
  • Works offline out of the box using workbox to generate service workers and precache application files
  • PWA/SPA ready with a default web app manifest
  • Functional CSS using tachyons, an efficient prototyping tool
  • Uses the Standard JavaScript style guide with eslint
  • Automatic import of the h function (say goodbye to that h import!)
  • JSX and all of the ES6-7-8-9 goodies are ready to go thanks to Parcel.

Sample file structure

Proposed folder structure as your project grows. Adapt it to your needs.

├── dist/                             # Compiled static files (build output)
├── src/                              # Application source code
│   ├── app/                          # App files
│   │   ├── pages/                    # Site pages
│   │   │   ├── {PageName}.jsx        # Single file page
│   │   │   ├── {PageName}/           # Page with multiple files
│   │   │   │   ├── actions.js        # Local actions
│   │   │   │   ├── index.jsx         # Exported view
│   │   │   │   ├── style.css         # Page styles
│   │   │   │   └── other.svg         # Other related files
│   │   ├── components/               # Other components
│   │   │   └── {ComponentName}.jsx   # Single file component
│   │   ├── actions.js                # Global actions
│   │   ├── init.js                   # Initial app state
│   │   ├── routes.js                 # Route patterns
│   │   └── view.jsx                  # Root view
│   ├── app.js                        # Hyperapp instantiation
│   ├── global.css                    # Global styles
│   ├── index.html                    # Parcel entry
│   └── manifest.webmanifest          # Web app manifest
├── static/                           # Files to be copied in dist folder
├── ...
...

This starter project was based on this Hyperapp starter. Hyperstatic and a few pages was then added in.