bluerain-cli

bluerain-cli is used to start, build bluerain projects for web, electron and react-native.

Installation

Install cli globally.

npm install -g @blueeast/bluerain-cli

Usage

bluerain

bluerain command will start the wizard, which will have three option run, build, create and these option will have futher platform options.

Help

bluerain --help

It shows the available commands and there description.

Custom Webpack Config

Custom webpack configuration can be added in extend and full control mode.

Custom Webpack Config Location

• For web webpack config file will be placed at web/webpack.config.js to add or extend webpack configuration.
• For electron webpack config file will be placed at electron/webpack.config.js to add or extend webpack configuration.

Default mode

The default Webpack config of bluerain is balanced for a medium-size project or a library. But if you already have your own Webpack setup, that's not useable.

That's why we allow you to customize our Webpack setup by providing a webpack.config.js file exporting a webpack 3 compatible config.

There are a few ways to do it:

Extend Mode

You'll get extend-mode by returning an object.

Let's say you want to add SASS support to bluerain project. This is how to do it. Simply add the following content to a file called webpack.config.js in the above described directory for web and electron.

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
}

Since this config file stays in the bluerain-cli directory, you need to set the include path as above. If the config directory stays in a different directory, you need to set the include path relative to that.

You also need to install the loaders (style, css, and sass) used in above config manually.

Webpack Options

You can add any kind of Webpack configuration options with the above config, whether they are plugins, loaders, or aliases.

For the advanced usage we strongly recommend full control mode.

Full Control Mode

Sometimes, you will want to have full control over the webpack configuration. Maybe you want to add different configurations for dev and production environments. That's where you can use our full control mode.

To enable that, you need to export a function from the above webpack.config.js file, just like this:

const path = require("path");

// Export a function. Accept the base config as the only param.
module.exports = (baseConfig, configType) => {
	// configType has a value of 'development' or 'production'
	// You can change the configuration based on that.
	// 'production' is used when building the bluerain project.

	// Make whatever fine-grained changes you need
	baseConfig.module.rules.push({
		test: /\.scss$/,
		loaders: ["style-loader", "css-loader", "sass-loader"],
		include: path.resolve(__dirname, "../")
	});

	// Return the altered config
	return baseConfig;
};

Storybook uses the config returned from the above function. So, try to edit the baseConfig with care. Make sure to preserve the following config options:

• entry
• output
• first loader in the module.loaders (Babel loader for JS)
• all existing plugins

If your custom webpack config uses a loader that does not explicitly include specific file extensions via the test property, it is necessary to exclude the .ejs file extension from that loader.

Commands

Following are bluerain-cli commands:

run

bluerain run command is used to run the bluerain project in development mode. We have to enter the platform we want to run the bluerain project.

build

bluerain build command is used to build the bluerain project in production mode. We have to enter the platform we want to build the bluerain project.

create

bluerain create command is used to create the bluerain project,bluerain plugin or bluerain app.

bluerain.js

After running bluerain create command bluerain.js file will be created, which will be:

// This file contain all the apps, plugins and configuration which are required
// for booting bluerain-os. see https://blueeast.gitbooks.io/bluerain-os/
module.exports = {
    apps:[
        // All bluerain apps will also be added in this array
    ],
        plugins:[
                // All bluerain plugins will be added here
        ],
    platform:[
        // Bluerain platform will be added here
    ]
    config: {
        // Configurations for bluerain-os will be added here
        title: 'Bluerain OS',
        plugins: {
            // Plugins related configurations will be added here
        },
        theme: {
            colors:{
                primary:'#3949ab'
            }
        }
    }
};

Apps, plugins, platform and config will be added in this file and run/build using bluerain commands.