There are four modules included in pui-react-tools:
To use the lint module, include
const Lint = require('pui-react-tools').Lint;
Lint.install(options)Define your lint rules in your local .eslintrc file.
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.
Run gulp lint.
To use the jasmine module, include
const Jasmine = require('pui-react-tools').Jasmine;
Jasmine.install(options);Type: Object
default: none
The webpack option must have a field test. test must be a function that returns webpack configuration when called. Example usage:
Jasmine.install({
webpack: {
test: () => { return {
entry: {spec: './spec/app/index.js'},
module: {
rules: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /css$/, loader: 'null-loader'}
]
},
output: {filename: '[name].js'}
}}
}
})Type: Array
default: ['spec/app/**/*_spec.js']
The globs representing the Jasmine spec files for your application
Type: Array
default: ['spec/server/**/*.js', 'spec/lib/**/*.js', 'spec/helpers/**/*.js']
The globs representing the Jasmine spec files for your server
Type: Function
default: noop
The jasmine and spec-app tasks load your spec files that match 'spec/app/**/*_spec.js'.
The getAdditionalAppAssets option is a function that returns an
array of streams of assets to include in addition to your spec files.
Example
options = {
getAdditionalAppAssets: () => [gulp.src(require.resolve('phantomjs-polyfill'))]
}Type: Object
default: {}
Options to pass to the spec server in node specs. Example
options = {
serverOptions: {verbose: true}
};Type: Object
default: {}
Options to pass to the spec runner used in the browser. Example
options = {
browserSpecRunnerOptions: {sourcemappedStacktrace: true}
};Type: Object
default: {}
Options to pass to the headless jasmine server. Example
options = {
headlessServerOptions: {driver: 'slimerjs', random : true}
};For additional options (e.g. isVerbose), see gulp-jasmine-browser and jasmine-terminal-reporter.
-
gulp jasminestarts the jasmine server. The server starts at port 8888 by default. -
gulp spec-appruns tests headlessly. -
gulp spec-serverruns server specs. This task runs server specs from the following globs:- 'spec/server/**/*.js'
- 'spec/lib/**/*.js'
- 'spec/helpers/**/*.js'
To use the foreman module, include
const Foreman = require('pui-react-tools').Foreman;
Foreman.install();Specify configuration tasks for foreman to run in your Procfile.dev file. For example:
start: npm start
Run gulp foreman to run foreman with your Procfile.dev.
To specify the port your server runs in, include a .env file in your root directory with configuration like
NODE_ENV=development
PORT=3000To use the assets module, include
const Assets = require('pui-react-tools').Assets;
Assets.install(options);The assets tasks expects:
config/application.jsonconfig/env.json- whitelist of environment variables to include in your config.babelrc
Example files can be found in the react-starter project in the config
directory.
Most configuration of the assets task is acheived by options given to Assets.install:
const Assets = require('pui-react-tools').Assets;
Assets.install(options);The available options are:
Type: Array
default: ['./app/index.js]
This is the glob of files passed into webpack when compiling your javascript.
Type: String
default: 'public'
Assets are built to the 'public' directory by default. If you would like to change the directory in which assets are
written, use the buildDirectory option.
Type: Object
default: none
The webpack option should have a key for each node environment you expect to need assets for (e.g. production and developement). These keys must be a functions that returns webpack configuration when called. Example usage:
import UglifyJsPlugin from 'webpack/lib/optimize/UglifyJsPlugin';
Assets.install({
webpack: {
development: () => {
return {
entry: {application: './app/index.js'},
module: {
rules: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /css$/, loaders: ['style-loader', 'css-loader', 'sass-loader']}
]
},
output: {filename: '[name].js'}
}
},
production: () => {
return {
entry: {application: './app/index.js'},
module: {
rules: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /css$/, loaders: ['style-loader', 'css-loader', 'sass-loader']}
]
},
output: {filename: '[name].js'},
plugins: [new UglifyJsPlugin()]
}
}
}
});Note that for the example, you will need to install sass-loader, css-loader and 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 config/application.json.
For environment-specific overrides, add files with the format config/NODE_ENV.json (e.g. config/development.json). Additionally, local environment variables whitelisted in config/env.json will be added to your configuration.
The generated 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 window.Application.config, or window[globalNamespace].config.
If you would like to access the configuration inside of node, you can use require('pui-react-tools/assets/config')()
gulp assetsThis task builds your assets with Webpack and publishes them intopublic.gulp assets-configThis task creates aconfig.jsin thepublicdirectory.gulp clean-assetsThis task deletes all files in public directory, but keeps the directory.