Introduction

What is Ream?

Ream is a minimal framework for building server-rendered or static website using Vue.js under the hood. Unlike other popular SSR frameworks, Ream is designed to be more low-level, which means it does not enforce a specific folder structure. In other words, it's pretty similar to a normal SPA, it's possible to migrate a vue-cli or Poi app to Ream in minutes!

There's only one basic concept:

You create an app by populating an entry file, says index.js. It will be server-rendered so that the initial rendering will faster than a normal SPA, after that the client-side app will take over it.

If you'd like to learn and build a website with Ream, keep reading and you'll get there pretty fast.

Why the name?

It's somehow inspired by the famous twins Rem and Ram from anime world. Rem is like the client-side and Ram is like the server-side, they cannot live without each other.

Rem wants to do all the jobs on her own but Ram just says "chill my little sister, I'm here to help you out on my end."

Getting started

If you haven't installed Ream inside your project, please navigte to installation guide first.

Configure your npm scripts in package.json:

{
  "scripts": {
    "start": "ream start",
    "dev": "ream dev",
    "build": "ream build"
  }
}

TIP

By default Ream looks for files in current working directory ., if you prefer another one you can change the base directory like so: ream dev ./path/to/dir.

Then populate an entry file at ./index.js (relative to the base directory):

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default () => {
  const router = new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: () => import('./views/index.vue')
      }
    ]
  })

  return {
    router
  }
}

The entry file must export a function that returns an object.

And the index.vue component:

<template>
  <div>Hello Ream!</div>
</template>

Now you can run yarn dev to start development server to preview your server-rendered website.