Apps.md

Apps

When creating a new project an entry app (main) will be already generated. For most projects it will suffice, but sometimes you will need to split your app into multiple smaller sub-apps.

To create a new sub-app run the following command inside your project:

gluestick generate app my-sub-app

This will create the proper directory structure and will modify src/entries.json.

entries.json

Sometimes you will need to manually modify src/entries.json. This file contains definitions for every entry (a.k.a. "sub-app").

The file's schema looks like this:

  "/<key>": {
    "name": "<name>",
    "component": "<path/to/entry/root/component>",
    "routes": "<path/to/routes>",
    "reducers": "<path/to/reducers>",
    "config": "<path/to/config>",
    "group": ["group-1", "group-2"]
  }

• key: URL-like entry name for example /vehicles (must be kebab-case and match top-level route path property in specified routes), express like path for example /:make/:model or a regexp for example /\/vehicle\/.*\/review$/.
• name: A custom, user-friendly entry name (optional), must be camelCase
• component: The path to the root entry component.
• routes: The path to the routes declaration file.
• reducer: The path to reducers file that exports an object**.
• config: The path to the application configuration file. If not specified, config/application will be used as a default. It is not common to specify this value.
• group: (Optional) Assign the entry to a group, see: gluestick --app option.

** Please note that the reducer should export by (default) an object with key-value pairs, when the value is a reducer function. Do not use combineReducer, it will be used later internally by gluestick.

Example of entries.json with main and help apps:

{
  "/": {
    "component": "src/apps/main/Index.js",
    "routes": "src/apps/main/routes.js",
    "reducers": "src/apps/main/reducers/index.js"
  },
  "/help": {
    "component": "src/apps/help/Index.js",
    "routes": "src/apps/help/routes.js",
    "reducers": "src/apps/help/reducers/index.js"
  }
}

App routes

Each app's route lives in the src/apps/<appName>/routes.js file. The one generated by new command file, gives you a nice overview of how this file should look. There are also few props, which you can use on the <Route> component:

• ignoreScrollBehavior: boolean - if true, disables default react-router-scroll behavior
• useScroll: (prevRouterProps: Object, location: Object) => boolean - allows to specify custom scroll behavior, must be a function returning true or false to either enable or disable the browser default scroll behavior, an array of [x, y] values which will be scrolled to, or the name id or name of the element on screen to scroll to upon landing on this route. for more: react-router-scroll