Configuration.md

Configuration

There are few files which allow configuration of Gluestick:

• src/entires.json - define entries (apps)
• src/vendor.js - Define vendored modules/packages
• src/gluestick.hooks.js - define hooks which will run on specific lifecycle events
• src/gluestick.plugins.js - specify which plugins to use
• src/gluestick.config.js - overwrite gluestick config
• src/webpack.hooks.js - overwrite webpack client and server configuation
• src/config/application.js - global project configuration
• src/config/caching.server.js - setup component caching
• src/config/init.browser.js - specify code which will run right before client bundle is run in browser
• src/config/redux-middleware.js - specify additional redux middleware and overwrite thunk middleware

Redux config

All redux configuration can be specified in the src/config/redux-middleware.js file.

The default export should return an array of additional middlewares. To specify custom thunk middleware, export it using named thunkMiddleware export:

export default []; // additional middlewares
export const thunkMiddleware = thunk.withExtraArgument({ api: /* ... */ });

This allows you to inject a custom argument.

IMPORTANT: This configuration is project wide, meaning it will be used for every app/entrypoint. If you need to overwrite it for a specific app/entrypoint, you must create a configuration file for this app/entrypoint, update src/entries.json to use that file (more on this here) and write an additional property reduxOptions: { middlewares: Function[], thunk: ?Function }.

Global project config

All project-wide configuration lives here in src/config/application.js.

GlueStick itself will look only for these properties:

• proxies - setup additional proxies
• httpClient - configure http client
• headContent - configure page <title> element
• logger - configure logger

However, you can put your own properties here and read them by importing this files via the alias config/application.

This configuration file should have the following structure:

type HeadContent = {
  title: string;
  titleTemplate: string;
  meta: { name: string, content: string }[];
}

type Logger = {
  pretty: boolean;
  level: string;
}

type EnvConfig = {
  head: HeadContent;
  logger: Logger;
  httpClient?: Object;
  proxies?: [{
    path: string;
    destination: string;
    options?: Object;
    filter?: Function;
  }];
}

const config: EnvConfig = {
  head: {
    title: 'My Gluestick App',
    titleTemplate: '%s | Gluestick Application',
    meta: [
      { name: 'description', content: 'Gluestick application' }
    ]
  }
  logger: {
    pretty: true,
    level: 'info',
  }
}

export default config;

Gluestick config

To modify the GlueStick config use src/gluestick.config.js. It must return a function or array of functions as a default export:

export default config => config;
// or
export default [config => config];

This function accepts the gluestick config (object) as a first argument and must return the modified config.

For example, this code snippet overwrites the default ports:

export default config => ({
  ...config,
  ports: {
    client: 1111,
    server: 2222,
  }
})

To modify the path to asset files (previously known as assetPath), define publicPath and assign a value in the Gluestick config, for example:

export default config => ({
  ...config,
  publicPath: process.env.ASSET_URL || '/assets/',
});

To see what the default GlueStick config looks like, see here.

Vendoring

Some packages or modules like React don't change frequently, so they can be vendored. In order to do so, import the desired module/file in src/vendor.js. This file will become a separate entry used by either:

• CommonsChunkPlugin:
  • build vendor as a normal bundle
  • rebuild automatically when changed
  • preferred for code that changes kind of frequently at a cost of increased build time
  • automatic common modules extraction to vendor bundle
  • great for smaller and medium sized projects

or

• DllPlugin:
  • create Dynamicaly Linked Library with vendored modules
  • no automatic rebuilds
  • prefered for code that changes rarely
  • shared between parallel builds
  • great for bigger projects

CommonsChunkPlugin is used by default, since it doesn't require any changes to be made or commands to be run.

Please note, that CommonsChunkPlugin and DllPlugin are not interoperable, so it's up to you to decide which one suits your project better.

If you want to use DllPlugin, you firstly need to execute gluestick build --vendor (for production add NODE_ENV=production when running the command), before building any other app. This command will create files (including your vendor DLL bundle) under build/assets/dlls. Now if you build or start an app or the whole project, it will use the vendor DLL bundle.

DllPlugin is the essential part that allows for app build parallelisation. In order to split app builds you, firstly you need to have the vendor DLL bundle compiled and available for each build thread/process, then to build a single app use gluestick build --client -A /<appName>.

Also remember to build the server/renderer bundle as well - gluestick build --server.