flatpack-js

flatpack

a static website editor that runs in the browser Note: Flatpack is still under development, and might not work as the following suggests

Prerequisites

Flatpack requires node.js and some familiarity with JavaScript (ES6), yarn/npm, React and HTML.

Getting started

Flatpack should be installed locally, so that different projects can use different versions of flatpack.

• cd /project-folder
• yarn add flatpack-js react
• touch index.js

Open index.js in your favourite text editor

import React from 'react'
import { Text, EditButton } from 'flatpack-js'

export default (
  <div>
    <h1>Hello flatpack!</h1>
    <Text path='introduction' placeholder='Introduction goes here…' />
    <EditButton />
  </div>
)

For a simple one-page website, you will need to define a component for your content to live in. This can be done in a separate file and imported, but for brevity, lets define it in index.js.

AWS setup

You will need to set up some Amazon web services to get going. Flatpack has a built-in setup script that will take care of this for you.

You will need an AWS access key id and AWS secret access key with credentials for S3, Cloudfront and Cognito.

Run flatpack setup and follow the prompt.

After the setup prompt has finished you should be able to run flatpack dev from the command line and see your example running at http://localhost:3000/

Components

All built-in components have a path prop. This is where flatpack finds and stores data.

The <Text /> component

The text component uses slate to serialise data.

Props

• path string, see path
• placeholder string text to show in the editor when path does not have data, for example when a new element is created.
• inline (array of inline elements supported, ie. ['i', 'b', 'a', 'strike']). Default is []
• block (array of block-level elements like ['h2', 'h3', 'h4', 'p', 'ul', 'ol'] if block is not defined, no text will be wrapped in a block-level element. Perfect for text inside an existing <h1> or <p> tag. Default is []

Routing

Routes need to be defined with a trailing slash for compatibility with S3 and CloudFront, see external article re. ‘advices for best performance’