There are four modules included in pui-react-tools:
To use the lint module, include
const Lint = Lint;Lint
Define your lint rules in your local
Type: String or Array
default: ['gulpfile.js', 'app/**/*.js', 'helpers/**/*.js', 'server/**/*.js', 'spec/**/*.js', 'tasks/**/*.js', 'lib/**/*.js']
Glob or array of globs of files to lint.
To use the jasmine module, include
const Jasmine = Jasmine;Jasmine;
webpack option must have a field
test must be a function that returns webpack configuration when called. Example usage:
The globs representing the Jasmine spec files for your application
default: ['spec/server/**/*.js', 'spec/lib/**/*.js', 'spec/helpers/**/*.js']
The globs representing the Jasmine spec files for your server
spec-app tasks load your spec files that match
getAdditionalAppAssets option is a function that returns an
array of streams of assets to include in addition to your spec files.
Options to pass to the spec server in node specs. Example
options =serverOptions: verbose: true;
Options to pass to the spec runner used in the browser. Example
options =browserSpecRunnerOptions: sourcemappedStacktrace: true;
Options to pass to the headless jasmine server. Example
options =headlessServerOptions: driver: 'slimerjs' random : true;
gulp jasmine starts the jasmine server. The server starts at port 8888 by default.
gulp spec-app runs tests headlessly.
gulp spec-server runs server specs. This task runs server specs from the following globs:
To use the foreman module, include
const Foreman = Foreman;Foreman;
Specify configuration tasks for foreman to run in your
Procfile.dev file. For example:
start: npm start
gulp foreman to run foreman with your
To specify the port your server runs in, include a
.env file in your root directory with configuration like
To use the assets module, include
const Assets = Assets;Assets;
The assets tasks expects:
config/env.json- whitelist of environment variables to include in your config
Example files can be found in the react-starter project in the
Most configuration of the assets task is acheived by options given to
const Assets = Assets;Assets;
The available options are:
Assets are built to the 'public' directory by default. If you would like to change the directory in which assets are
written, use the
webpack option should have a key for each node environment you expect to need assets for (e.g.
developement). These keys must be a functions that returns webpack configuration when called. Example usage:
Note that for the example, you will need to install
style-loader. You will also need to install
babel-loader and any related Babel plugins and presets you need, like
babel-preset-react. See react-starter/config/webpack for examples of more fully-featured webpack configurations.
To configure your application for different environment execution contexts, you can use
gulp assets-config. This will generate a
config.js file in the build directory.
Specify configuration you need for running your application in
For environment-specific overrides, add files with the format
config/development.json). Additionally, local environment variables whitelisted in
config/env.json will be added to your configuration.
config.js will be assign your configuration to a global variable in your browser. This variable will default to
Application. If your configuration has a
globalNamespace property, the global variable will have that name. Configuration will be accessible at
If you would like to access the configuration inside of node, you can use
gulp assetsThis task builds your assets with Webpack and publishes them into
gulp assets-configThis task creates a
gulp clean-assetsThis task deletes all files in public directory, but keeps the directory.