Edit

Tutorial: Create a custom homepage

⚠️ Note: This guide has been deprecated as the release of Reaction 2.0. The latest custom home page guide can be found here.

Step 1: Create a new custom plugin

   $ reaction plugins create --name custom-home

   Success!
   New plugin created at: /imports/plugins/custom/custom-home

Step 2: Setting default values for INDEX_OPTIONS

You can change the default layout values in /client/config/defaults.js by overriding them in a new file called default.js in the /imports/plugins/custom/custom-home/client/ folder:

import { Session } from "meteor/session";

Session.set("INDEX_OPTIONS", {
  template: "MyStoreFront",
  layoutHeader: "NavBar",
  layoutFooter: ""
});

Step 3: Create a new React component that renders your index route

/imports/plugins/custom/custom-home/MyStoreFront.js

import React from "react";
import { registerComponent, getHOCs, getRawComponent } from "/imports/plugins/core/components/lib";

class MyStoreFront extends getRawComponent("Products") {
  // render() {
  //  return (
  //    <div>Custom store front</div>
  //  );
  // }
}

registerComponent("MyStoreFront", MyStoreFront, getHOCs("Products"));

Step 4: Import new files from index.js

/imports/plugins/custom/custom-home/index.js

  import "./default.js";
  import "./MyStoreFront";

Step 5: Customize the render() method

Start Reaction and navigate to http://localhost:3000, which does now render the MyStoreFront component.

Notice

You also could omit the custom default.js entirely if you'd write

registerComponent("products", MyStoreFront, getHOCs("Products"));

instead of

registerComponent("MyStoreFront", MyStoreFront, getHOCs("Products"));

But this would also change other routes that make usage of the products component, like http://localhost:3000/tag/:slug.