@presta/serve NPM

presta

The simple way to build the modern web.

presta is in active beta. Questions, comments, ideas? Open an issue or PR!

Presta starts simple and stays simple. It provides familiar ergonomics, but avoids opaque abstraction, giving more power (and responsibility) to the developer.

At its core, presta requests paths – or routes – to render, and concatenates strings returned from your pages into HTML documents. It can event render other formats too, like JSON.

Installation

presta needs to be installed local to your project:

$ npm i presta

Help will always be given to those who ask for it:

$ npx presta help

Quick Start

Pages in presta export two functions:

getPaths - returns an array of routes to render
Page - a function that returns a string

Given a page, Home.js, below...

export function getPaths () {
  return ['/']
}

export function Page ({ pathname }) {
  return `<h1>You're on the home page ${pathname}</h1>`
}

...rendering is as simple as npx presta <pages> <outDir>:

$ npx presta build Home.js dist

Data Loading

presta includes a handy data loader that will look familiar to React users. It can be used with any fetching mechanism to resolve remote or other asynchronous data.

import { load } from 'presta/load'

export function getPaths() {
  return ['/']
}

export function Page ({ pathname }) {
  const data = load(
    async () => ...,
    { key: 'home' }
  ) // => { title: 'Hello world' }

  if (!data) return

  return `<h1>${data.title}</h1>`
}

Head Management

presta also provides an easy API for adding markup to the <head> of your page.

export function Page ({ pathname, head }) {
  // ...

  if (!data) return

  head({
    title: data.title,
    description: data.description
  })

  // ...
}

HTML Generation

To customize the HTML output of presta, provide a presta.runtime.js file.

Here, createDocument is passed the raw result of every Page function. document expects at minimum a body property.

import { document } from 'presta/document'

export function createDocument ({ body }) {
  return document({
    head: {
      title: 'Default Page Title',
      og: {
        image: '/static/og.png'
      }
    },
    body,
    foot: {
      scripts: [{ src: '/index.js' }]
    }
  })
}