hops-preset-defaults

This is a preset for Hops that contains a collection of base presets that are always needed.

It contains:

• @untool/yargs
• @untool/express
• @untool/webpack
• hops-express
• hops-webpack

Installation

Add this preset to your existing Hops React project:

$ yarn add hops-preset-defaults@next
# OR npm install --save hops-preset-defaults@next

If you don't already have an existing Hops project read this section on how to set up your first Hops project.

Usage

Configuration

Preset Options

This preset does not have own configuration, but here is a list of the most important options from the included presets:

Head over to @untool/express and @untool/webpack to read more about these configuration options.

Mixin Hooks API

configureServer(app, middleware, mode): app (pipe) core

Use this mixin hook to register middleware or configure the Express.js Application.

It receives the following arguments:

app

This is an Express.js application instance that allows you to reconfigure the application.

middleware

This is an object whose keys are middleware phases and the values are arrays in which middleware can be pushed.

These are the phases available:

1. initial - use this phase to register middleware that should be executed first
2. files - in this phase are middleware like express-static to serve static files
3. parse - this phase can be used to register middleware that parses data from incoming requests (e.g. cookie-parser or body-parser)
4. routes - this phase registers the universal render middleware that handles all the routes in your app
5. final - this phase may be used to register error handling or other middleware that should be run last

Additionally each phase also has a pre / post phase. E.g.: preinitial or postfiles.

mode

Describes the mode that the server is operating in, it can be one of: develop, serve or static.

• develop is being used when the server is started in development mode (eg. hops develop or hops start). In this mode there will be webpack middlewares included that watch and recompile your changes on the fly.
• serve means that the server is running in production mode (eg. hops start -p or hops serve). In this mode it will serve the build dir as static files and use the prebuilt render middleware to render your application.
• static is being used when the server is used to render static HTML pages (eg. hops build -s or hops start -ps). In this mode the server will not be bound to an HTTP interface but instead mock requests are being sent against the prebuilt middleware.

const { Mixin } = require('hops-mixin');

module.exports = class MyMixin extends Mixin {
  configureServer(app, middleware, mode) {
    middleware.routes.push((req, res, next) => next());
    if (mode === 'serve') {
      middleware.preinitial.unshift((req, res, next) => next());
      middleware.postfinal.push((req, res, next) => next());
    }
    return app;
  }
};

configureBuild(webpackConfig, loaderConfigs, target): webpackConfig (pipe) core

You can implement this method in your own mixins to modify the different webpack configs that are used under the hood.

It receives the following arguments:

webpackConfig

This is the full webpack config for the current target, which can be mutated and returned to change its configuration.

Check out the base webpack configs being used by Hops here:

• build
• develop
• node

loaderConfigs

This is an object that provides shortcuts to the most commonly used loaders, so that you don't have to iterate through the complicated loader structures yourself (eg. module.rules[].oneOf[...allLoaderConfigs]).

This object has the following properties: { jsLoaderConfig, urlLoaderConfig, fileLoaderConfig, allLoaderConfig }.

target

The third argument is the target which can be one of: build, develop or node.

• build is the config being used for the production browser build.
• develop is the config that is being used by the devserver and contains configuration specific to hot module reloading and such.
• node is the config that is being used to create the server-side bundle.

class MyMixin extends Mixin {
  configureBuild(webpackConfig, loaderConfigs, target) {
    // configure webpack aliases
    webpackConfig.resolve.alias['myalias'] = 'something-else';

    // add another loader to run before all other loaders
    loaderConfigs.allLoaderConfigs.unshift({
      test: /\.tsx?$/,
      use: [{ loader: 'ts-loader' }],
    });

    // replace the file-loader with a different loader
    loaderConfigs.allLoaderConfigs.splice(
      loaderConfigs.allLoaderConfigs.indexOf(loaderConfigs.fileLoaderConfig),
      1,
      { test: /regex/, loader: 'my-loader' }
    );

    // add or modify the config of the jsLoader (babel-loader)
    loaderConfigs.jsLoaderConfig.options.plugins.push(
      '@babel/plugin-proposal-class-properties'
    );

    return webpackConfig;
  }
}