Get Started

Example Project Structure#

my-hype-app/
├─ assets/
├─ templates/
├─ node_modules/
├─ resources/
│  ├─ get/
|  |  ├─ index.js
│  |  ├─ users/
│  |     ├─ $user_id.js
│  |     ├─ index.js
│  ├─ post/
│  |  ├─ users/
│  |     ├─ login.js
│  |     ├─ index.js
│  ├─ put/
│  |  ├─ users/
│  |     ├─ index.js
│  ├─ delete/
│     ├─ users/
│        ├─ index.js
├─ .gitignore
├─ package.json
├─ README.md

1. assets folder - Static files like images, CSS, JS Scripts, Hyperscripts, etc.
2. templates folder - Your HTML templates
3. resources folder - Describes the resources that your HTML API offers. The direct children of the resources folder are HTTP Verbs. The descendant folders of the HTTP Verb folders represent path segments.

Resources#

Resources are the primary building block in Hype.js.

There are two types of resources:

1. Statically rendered resources
2. Server-side rendered resources

Statically rendered resources#

Statically rendered resources are rendered once (unless there's a rerender option) at build-time. These are files in your resources folder that export an async getStaticData function or no function at all.

If no getStaticData function is exported, it's just a plain HTML file:

export default function html() {
  return {template: 'templates/home.pug'}
}

If it does export a getStaticData function, it gets data from that function at build time, like this:

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticData() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  // By returning { data: { posts } }, the Blog HTML component
  // will receive `posts` as input at build time
  return {
    data: {
      posts,
    },
    // Hype.js will attempt to rerender the HTML on every request, at most every 10 minutes.
    rerender: 10 * 60
  }
}
// posts will be populated at build time by getStaticData()
export default function html(data) {
  // Use the templating engine of your choice. Here we use mustache.
  return {template: 'templates/blog.mustache', headers: [], data}
}

Hype.js automatically deploys statically rendered resources to CDNs to ensure the best performance for end users.

Server-side rendered resources#

If the resource file exports an async getServerSideData function, then the page is rerendered on each request to the resources endpoint:

// This function gets called every request on the server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getServerSideData() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()
  // By returning { data: { posts } }, the Blog HTML component
  // will receive `posts` as input on every request
  return { data: { posts } }
}
// posts will be populated every request by getServerSideData()
export default function html(data) {
  // Use the templating engine of your choice. Here we use Haml.
  return {template: 'templates/blog.haml', data}
}

Unlike statically rendered resources, server-side rendered resources also have access to the request info: headers, request body, etc.