@malmo/react-starter-kit v1.0.13

┌─────────────────┐
│ ┌┬┐┌─┐┬  ┌┬┐┌─┐ │
│ │││├─┤│  ││││ │ │
│ ┴ ┴┴ ┴┴─┘┴ ┴└─┘ │
└─────────────────┘

A cli interface to build Javascript applications with zero configuration.

• Installation
• Available commands
• Available options
• malmo.config.js
  • The environments
  • The global CONSTANTS object
• malmo.loaders-config.js
• malmo.plugins-config.js
• malmo.webpack-config.js
• malmo.express-config.js
• Configuration format
• Merge strategy
• Environment variables
• Shared node packages

Installation

• With yarn: yarn global add malmo
• With npm: npm install -g malmo

Available commands

• malmo init Initialize configuration wizard. Remote and locale packages that contain malmo and starter-kit in their names will be listed.
• malmo dev Launch dev server
• malmo build Build your application
• malmo config Print current configuration

Available options

• -h, --help Print the usage guide
• -v, --version Print package version
• -w, --watch Restart compilation on configuration files changes
• --env [key] Use env[key] configuration from malmo.config.js-

malmo.config.js

Use this file for overwrite or extend all the settings used by the malmo cli:

Environment

Each setting is overwritable with the env key:

module.exports = {
    bootstrapExpressApp: true,
    foo: 100, // custom constant, see above
    env: {
        staging: {
            bootstrapExpressApp: false,
            foo: 200,
        }
    }
}

Global CONSTANTS object

Thanks to webpack.DefinePlugin, those settings are propagated from malmo to each webpack entries in the global CONSTANTS object:

malmo dev

/* global CONSTANTS */
console.log(CONSTANTS.foo) // 100

malmo dev --env=staging

/* global CONSTANTS */
console.log(CONSTANTS.foo) // 200

malmo.loaders-config.js

Use this configuration for overwrite or extend all the settings used by the default malmo webpack loaders:

If you need to add same external folders to the babel transpile, use the js.include option:

const path = require('path');

module.exports = {
    js: {
        include: path.resolve(__dirname, 'node_modules', 'my-module')
    }
}

malmo.plugins-config.js

Use this configuration for overwrite or extend all the settings used by the default malmo webpack plugins:

module.exports = {
    htmlWebpackPlugin: {
        title: "Project Title"
    }
}

malmo.webpack-config.js

Use this configuration for extend the webpack configuration:

module.exports = {
    module: {
      rules: [
        {
          test: /\.(glsl|frag|vert)$/,
          use: [
              'raw-loader',
              'glslify-loader',
            ],
        },
      ],
    },
}

malmo.express-config.js

Use this configuration for extend the express application used in ssr mode:

const cors = require('cors');

module.exports = (app, options) => {
  app.use(cors());
  return app;
};

Configuration format

Each configuration can be written as a simple js object, or as a function that returns an object. The object will be merged with the defaults thanks to the webpack-merge package. If you use a function, all the settings are passed as arguments:

• malmo.loaders-config.js
• malmo.plugins-config.js
• malmo.webpack-config.js

module.exports = ({
    foo,
    port,
    others...
}) => ({
    
})

• malmo.express-config.js

module.exports = (app, {
    foo,
    port,
    others...
}) => ({
    
})

Merge strategy

For customize the webpack-merge strategy, export a named variable called strategy:

module.exports = { ... };

module.exports.strategy = { css: 'replace' };

Environment variables

This are the environment variables available in all the configuration files:

Shared node packages

In all the configuration files, these modules are linked from the malmo folder, so it's not necessary to install them:

• express
• modernizr
• html-webpack-plugin
• mini-css-extract-plugin
• uglifyjs-webpack-plugin
• webpack
• webpack-merge