Spust

🚀 Quickly bootstrap universal javascript application.

⚠️ Feel free to report bugs, open PRs, etc...

• Installation
• Requirements
• Usage
• Build
• Local development
• Test
• Customizing configuration
• Service worker and offline support
• Use babili for the client side minification
• react-loadable v4 support
• styled-components v2 support
• Examples

Installation

yarn add spust

Requirements

You have to set up directory structure like this:

src/
  client/
    index.js
  server/
    index.js

Your src/server/index.js has to export server listener so spust can manage it during the development process.

Example of server/index.js

import { createServer } from 'http';

const server = createServer((res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('OK');
});

// process.env.PORT is provided using webpack.DefinePlugin()
server.listen(process.env.PORT);

export default server;

Usage

# builds bundle for production environment
yarn spust build
# or if you want stats for your bundles so you can analyze them using webpack analyse
yarn spust build -- --stats

# starts webpack dev server and your backend server and opens browser automatically
yarn spust start

# starts jest in watch mode unless is called with --coverage or process.env.CI is set
yarn spust test

Build

Build an application for production.

yarn spust build

Will build project with src directory. Make sure you have src/server/index.js and src/client/index.js files.

yarn spust build -- --stats

Will output client.stats.json and server.stats.json to your current working directory. You can analyze them using webpack's analyse tool.

Local development

Starts the development server and automatically opens browser so you can develop right away.

yarn spust start

Will start the webpack dev server and your backend server.

Test

yarn spust test

Runs tests in interactive mode. See create-react-app documentation for this as this is the same.

Customizing configuration

You can provide your own spust.config.js which exports a function receiving webpack configuration and settings.

// example, add node_modules to vendor entry
const webpack = require('webpack');

type Settings = {
  env: 'production' | 'development',
  // server manager field is available only in local dev mode
  // and can be null or instance of ServerManager
  // see src/ServerManager for a whole type
  serverManager?: ?ServerManager,
  srcDir: string,
  workDir: string,
  useBabili: boolean,
}

type Configuration = {
  client: WebpackConfig,
  server: WebpackConfig,
}

module.exports = (configuration: Configuration, settings: Settings): Configuration => {
  configuration.client.loaders.push(
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: module =>
        module.resource &&
        module.resource.indexOf('node_modules') !== -1,
    })
  );

  return configuration;
}

Service worker and offline support

Spust supports service workers using offline-plugin for webpack.

It is preconfigured just install it because it is peerDependency. In order to use it please install offline-plugin package in your project and then add the line require('offline-plugin/runtime').install(); to the beginning of your src/client/index.js file.

For more information see offline-plugin's setup section.

Use babili for the client side minification

If you want to minify client side bundle using babili instead of uglifyjs (because uglifyjs doesn't support es6 features) you can enable it using SPUST_USE_BABILI=1 env variable, for instance SPUST_USE_BABILI=1 yarn spust build.

This will change settings of babel-preset-env to support all browsers with coverage > 2%.

react-loadable v4 support

In order to use react-loadable you have to install react-loadable, import-inspector and babel-plugin-import-inspector. Babel plugin will be used automatically.

styled-components v2 support

In order to use styled-components v2 you have to install styled-components and babel-plugin-styled-components. Babel plugin will be used automatically. Then just follow documentation on styled-components server side rendering.

Examples

• See all examples in separate repository