Hyperapp-scripts NPM

Zero-configuration create-react-app style projects with Hyperapp

This package offers a wrapper around the start, build, and test scripts from react-scripts with customizations to make them work with Hyperapp.

Note: if you want to quickly get started with Hyperapp, you probably want create-hyperapp instead.

Starting a new project from scratch

Start by creating a new folder for your awesome new Hyperapp project and initialize a new project with npm.

mkdir my-awesome-project
cd my-awesome-project
mkdir public src
npm init -y

Install your dependencies (they're good for your health).

npm i hyperapp
npm i -D hyperapp-scripts

Then open your package.json in your favorite text editor and add your scripts.

"scripts": {
+  "start": "hyperapp-scripts",
+  "build": "hyperapp-scripts build",
+  "test": "hyperapp-scripts test"
},

Create a public/index.html file.

<!DOCTYPE html>
<html>
  <head>
    <title>My awesome app!</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Next create a src/index.js file with a basic hello world app.

import { h, app } from "hyperapp";

const state = { title: "Hi." };
const view = state => <h1>{state.title}</h1>;

app({
  init: () => state,
  view,
  node: document.getElementById("app")
});

Finally start your app and gaze upon its glory.