There are few files which allows to configure GlueStick:
src/entires.json
- define entries (apps)src/vendor.js
- Define vendored modules/packagessrc/gluestick.hooks.js
- define hooks which will run on specific lifecycle eventssrc/gluestick.plugins.js
- specify which plugins to usesrc/gluestick.config.js
- overwrite gluestick configsrc/webpack.hooks.js
- overwrite webpack client and server configuationsrc/config/application.js
- global project configurationsrc/config/caching.server.js
- setup component cachingsrc/config/init.browser.js
- specify code which will run right before client bundle is run in browsersrc/config/redux-middleware.js
- specify additional redux middleware and overwrite thunk middleware
All redux configuration can be specified in src/config/redux-middleware.js
file.
The default
export should return 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 custom argument.
IMPORTANT: This configuration is project wide, meaning it will be used for every app/entrypoint.
If you need to overwrite it for specific app/entrypoint, you must create configuration file for this
app/entrypoint, update src/entries.json
to use that file (more on this here) and write additional property reduxOptions: { middlewares: Function[], thunk: ?Function }
.
All project-wide configuration lives here in src/config/application.js
.
GlueStick itself will look only for those properties:
proxies
- setup additional proxieshttpClient
- configure http clientheadContent
- configure page<title>
elementlogger
- configure logger
However, you can put your own properties here and read them by importing this files via alias config/application
.
In a nutshell, this configuration file 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;
To modify GlueStick config use src/gluestick.config.js
file. It must return function or array of functions
as a default
export:
export default config => config;
// or
export default [config => config];
This function accepts gluestick config (object
) as a first argument and must return modified
config.
For example, this code snippet overwrites the default ports:
export default config => ({
...config,
ports: {
client: 1111,
server: 2222,
}
})
To modofy path to asset files (previously known as assetPath
), define publicPath
and assign a value in Gluestick config, for example:
export default config => ({
...config,
publicPath: process.env.ASSET_URL || '/assets/',
});
To see how the default GlueStick config looks like navigate here.
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
- preferd 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 change rerely
- shared between parallel builds
- great for bigger projects
CommonsChunkPlugin
is the default used plugin, since it doesn't require any changes to be made or commands
to be run.
Please note, that
CommonsChunkPlugin
andDllPlugin
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 whole project, it will use vendor DLL bundle.
DllPlugin
is the essential part that allows for app builds parallelisation.
In order to split app builds you, firstly need to have vendor DLL bundle compiled and available for each
build thread/process, then to build a single app use gluestick build --client -A /<appName>
command.
Also remember to build server/renderer bundle as well - gluestick build --server
.