Name: pui-react-tools
Owner: Pivotal Cloud Foundry
Description: null
Created: 2016-01-12 23:22:30.0
Updated: 2017-12-18 18:07:56.0
Pushed: 2018-01-24 22:27:49.0
Homepage: null
Size: 321
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
There are four modules included in pui-react-tools:
To use the lint module, include
t Lint = require('pui-react-tools').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
t Jasmine = require('pui-react-tools').Jasmine;
ine.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:
ine.install({
bpack: {
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
ons = {
AdditionalAppAssets: () => [gulp.src(require.resolve('phantomjs-polyfill'))]
Type: Object
default: {}
Options to pass to the spec server in node specs. Example
ons = {
rverOptions: {verbose: true}
Type: Object
default: {}
Options to pass to the spec runner used in the browser. Example
ons = {
owserSpecRunnerOptions: {sourcemappedStacktrace: true}
Type: Object
default: {}
Options to pass to the headless jasmine server. Example
ons = {
adlessServerOptions: {driver: 'slimerjs', random : true}
For additional options (e.g. isVerbose), see gulp-jasmine-browser and jasmine-terminal-reporter.
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
t Foreman = require('pui-react-tools').Foreman;
man.install();
Specify configuration tasks for foreman to run in your Procfile.dev file. For example:
t: 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
_ENV=development
=3000
To use the assets module, include
t Assets = require('pui-react-tools').Assets;
ts.install(options);
The assets tasks expects:
config/application.jsonconfig/env.json - whitelist of environment variables to include in your config.babelrcExample 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:
t Assets = require('pui-react-tools').Assets;
ts.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:
rt UglifyJsPlugin from 'webpack/lib/optimize/UglifyJsPlugin';
ts.install({
bpack: {
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 assets This task builds your assets with Webpack and publishes them into public.gulp assets-config This task creates a config.js in the public directory.gulp clean-assets This task deletes all files in public directory, but keeps the directory.