Postix I : Starting with “Hello World” in Hyperapp

3 min readJan 15, 2018

Recently I stumbled upon a tiny tiny JS framework called Hyperapp which is very small and performant. The framework abstraction is also pretty low, which would allow me to practice my JS as well. You can read more about it here;

This is the first of my dev diaries (hoping that i have motivation enough to write more than one :D )on using this framework. So lets Begin! Of course, the first step is to give a snazzy name to our non existent app. “Postix” it is.

The series is ;

Postix I: Starting with “Hello World” in Hyperapp ( < you are here)

Postix II: Multipage app with routing, in Hyperapp

Lets set up the environment for the development. First, the build system. I always wanted to try out Parcel and this seemed like a good opportunity. We can use Parcel as a global npm install using

npm install -g parcel-bundler

or as a local one (though we will then have to set up npm scripts to run the parcel command).
Also, I will be using ES6 for most of my code flavor. So Babel will also be needed to be installed as a dependency. Later on, I might switch to typescript, though.

Lets initialize the project in a directory of our choice.

npm init -y

We will install the following dependencies.

npm i --save-dev babel-preset-env

and

npm i --save hyperapp

Don’t forget to add node_moules and .cache to your gitignore. Now we can add a simple `.babelrc` file in our root folder which will tell babel how to transpile the ES6 language.

{
  "presets": ["env"]
}

In the root, create an index.html file with the following content;

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Postix</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script src="src/index.js"></script>   
    </body>
</html>

Almost there. Lets set up the directory structure;

Inside `src` directory, we will now add an `index.js` file with the following content;

import { h, app } from "hyperapp";

const state = {}
const actions = {}
const view = (state, actions) =>
  h("h1", {}, "HELLO WORLD")

window.main = app(state, actions, view, document.body)

Time to take the setup for a spin. In the terminal, navigate to the root folder and run parcel . If everything was setup well, parcel will show something like this √ Built in 21ms. Navigate over to localhost:1234 and we will see our tiny `hello world` application. It would be a good time to read up on the starter example in the Hyperapp docs

You can find the code so far in here

Postix I : Starting with “Hello World” in Hyperapp

Written by Rishav Sharan