Octopus

                          `--::-`                                
                        .+ssssssys:                              
             ./++/-    /ssssssssssyo       -+oo/.                
            -yoshsso  /ssssssssssssy/     /shh-sy.               
            `- .ysyo .sssosssssssosyy`    osyy/.-                
             .oso+-  .ssossysssohooyy`    `ossy:                 
            `ss.      osssysosossosys       +sss`                
             ss+.   `-/sssssyyysssyy+:.    `osss`                
             .osssssyyyyyssssosssyysssss+/+ssss-                 
               ./sssssssssssyssssyysssyyssss+:`                  
                osssyyyysssyyssssyyysssys:.`                     
         ``    /ssyhhyhyssyyyssssyyhhhysy`      .-.`             
       :++osoossyyo::...ossyyssssy+ .ohyss-  .:ssyyy:            
      `:    .:/:-      `ossyyssssyo   -shyyyss+/---:o            
                 :/+//+sssys:`/sssss+++++/```       `            
               .osyyyssoo/.     .:+ssyhyys+.                     
          :/+osyyo.                    ./yyysoos-                
          `                                `   `-                

A router that enables SSR (Server Side Rendering) for Meteor.

Table of Contents

1. Introduction
2. Installation
3. Example
4. API
5. Create a module
6. Create an engine
7. Sources

Introduction

Basically, I create this package to learn more about Meteor and SSR.

But if this package can help someone, I would be delighted to help.

By default, Octopus adds support for react and react-router v4 with ReactRouterEngine but you can create your own engine to render what you want on client and server. Also, you can use modules to add some good stuff like Redux or other.

Installation

Atmosphere:

$ meteor add c0r3y8:octopus

Atmosphere page

Examples

Some parts of Octopus API are not be able on both client and server so I try to provide a small example.

See ToDo example for more informations

Both:

// Some imports

const MainApp = () => (
  <div>
    <ul>
      <li><Link to="/">{'Home'}</Link></li>
      <li><Link to="/redux">{'Redux'}</Link></li>
    </ul>

    <Switch>
      <Route exact path="/" component={AppContainer} />
      <Route component={NotFound} />
    </Switch>
  </div>
);

const app = Octopus(MainApp);

Client:

// Do nothing

Server:

app.route({
  exact: true,
  path: '/'
}, function (req, res, next) {
  // Do something
  next();
});

API

JSDoc 3 is used in this package. In future, I'll deploy the generated doc for more API documentation.

Octopus(MainApp, [clientConfig], [serverConfig])

Anywhere

Adds Octopus middleware in webapp.

Returns Octopus instance.

Arguments

• MainApp (Function): This is your React app
• [clientConfig] (Object): Custom client configuration
  • [clientConfig.engine=new ReactRouterEngine] (Object): use this option, if you want to use a custom engine
  • [clientConfig.engineOptions={}] (Object): use this option, if you want to pass custom options to the engine like renderToString
  • [clientConfig.startup=true] (Boolean): if true, router starts automatically on Meteor.startup but sometimes you need to start router when you want so you can set it to false and call app.render manually.
• [serverConfig] (Object): Custom server configuration
  • [serverConfig.engine=new ReactRouterEngine] (Object): use this option, if you want to use a custom engine
  • [serverConfig.engineOptions={}] (Object): use this option, if you want to pass custom options to the engine like renderToString or extras body / headers

app.middleware(callback [, callback...])

Anywhere

Adds middleware callback.

Arguments

• callback (Function):
  • On Client: Callback is called (callback()) without arguments. It's just like a before render hook.
  • On Server: Callback is called (callback(req, res, next)) with request, response and next arguments. You can use this to do some checks or to pass custom context to other middleware or route callback by using this, ex: this.store = createStore(...).

If you want to access to middleware context (this) in your callback, do not use arrow function.

app.module(Module, [options])

Anywhere

Adds module.

Arguments

• Module (Function|Object): it can be an instance or a class (ES2015), if it's a function then call new Module else use Module directly
• [options={}] (Object):
  • [options.config] (Object): if it's set and Module is a function then pass config as an argument to new Module(config)
  • [options.engineOptions=true] (Boolean): if true, Module can set engine options
  • [options.middlewares=true] (Boolean): if true, Module can add middleware
  • [options.routes=true] (Boolean): Server only, if true, Module can add route

app.route(routeConfig, callback [, callback...])

Server

Adds route.

Arguments

• routeConfig (Object):
  • [routeConfig.exact=false] (Boolean): if true, path must be matched exactly with request url
  • routeConfig.path (String): an Express-style path
  • [routeConfig.strict=false] (Boolean): if false, the trailing slash is optional
• callback (Function): callback is called if request url matches with a route path. For dynamic route ex: /user/:name, you can access to url parameters with this.params.name.

If you want to access to route context (this) in your callback, do not use arrow function.

Create an engine

To do

Create a module

To do

Sources

This package is based or have code from over package but not use them directly. How I said, basically I create this package for learn more about SSR with Meteor. So big thanks to:

• meteorhacks:fast-render
• meteorhacks:inject-data
• meteorhacks:picker
• reactrouter:react-router-ssr
• electrode-redux-router-engine
• ssrwpo:ssr