hops-config

Hops Config

hops-config exposes options to configure the other Hops packages and your own application. It is quite flexible and highly extensible.

Installation

When you install hops-cli, hops-config will be installed as a dependency as well - so you don't necessarily have to separately install hops-config. If you want to use it in your app directly, install it by running

npm install --save hops-config

Usage

Please find a list of the default options below. They can be set in your project's package.json and can be overridden by using npm config in the command line. You can import and extend hops-config within your project allowing you to use it to configure your isomorphic applications. The configuration is immutable at runtime.

Available options

Field	Type	Description
https	Boolean | Object literal	Whether to use https or not. To use a custom certificate set an object with paths for key, cert and ca (optional). Defaults to false
host	String	Host name of your project. Defaults to 0.0.0.0
port	Number	Port of your host. Defaults to 8080
locations	Array<string>	One or more application shell locations, e.g. "/" and/or "/profile"
basePath	String	Root path of your application on the server. This is inserted as an HTTP path prefix between host and locations. For example, if you set e.g. "basePath": "my-custom-basepath" and "location": ["/profile"], then your application would be available at http://0.0.0.0:8080/my-custom-basepath/my-custom-location/
assetPath	String	HTTP root path of your asset files on the server. It's not dependent on basePath, you can define totally separate directories
browsers	String	Browserslist query. Defaults to "> 1%, last 2 versions, Firefox ESR" (which is also the Browserlist default query). It is used for Babel and PostCSS
moduleDirs	Array<string>	One or more directories that Hops should use for module path resolution. For example, you can specify a directory that holds a yet unpublished Node.js package. It works similar to the resolve.modulesDirectories field in Webpack, i.e. if you specify moduleDirs: ["my-module-dir"], it will look in ./my-module-dir, ../my-module-dir, ../../my-module-dir and so on
appDir	String	Directory of your app. This way, you can put your app to a place other than project root. Defaults to "."
buildDir	String	Directory where the build artifacts (i.e. your application/asset files) will be saved to. Defaults to "build". Hops always removes the specified directory before starting a new build
cacheDir	String	Directory where internally used artifacts not meant to be served will be output (e.g. the manifest.json/manifest.js files generated by Webpack). Defaults to "node_modules/.cache/hops"
buildConfig	String	Path to your Webpack build configuration file. Defaults to ./node_modules/hops-config/configs/build.js
developConfig	String	Path to your Webpack development configuration file. Defaults to ./node_modules/hops-config/configs/develop.js
nodeConfig	String	Path to your Webpack node/server-side rendering configuration file. Defaults to ./node_modules/hops-config/configs/node.js
manifest	String	The application's manifest.js as a string. Defaults to a getter function that returns the content of the automatically generated manifest.js
assets	Object literal	The applications's .js and .css assets. Defaults to a getter function that returns the assets contained in the automatically generated manifest.json
extends	String	Path to a baseline configuration (could be for example a node module or a project-specific file), allowing you join the current configuration with that baseline

Everything matching /(config|file|dir)s?$/i will be treated as a filesystem path (or array thereof) and resolved relative to your app's root folder. This only applies if the respective value is not an absolute path already.

Configure via package.json

The following example package.json shows how the config object might look like:

"name": "my-application",
"scripts": {
    "build": "hops build",
    "develop": "hops develop",
    "serve": "hops serve",
    "start": "hops start",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
"config": {
    "hops": {
      "extends": "./path-to-my-baseline-config/baseConfig.js",
      "https": true,
      "host": "0.0.0.0",
      "port": 3000,
      "locations": [
        "/",
        "/profile"
      ],
      "basePath": "my-base-path",
      "assetPath": "my-asset-path",
      "browsers": "> 2%, last 1 versions, Firefox ESR",
      "moduleDirs": [
        "my-unpublished-package"
      ],
      "appDir": "my-app-directory",
      "buildDir": "my-build-directory",
      "cacheDir": "my-cache-directory",
      "buildConfig": "./path-to-my-custom-webpack-config/build.js"
    }
  }

Configure via command line

You can override the configuration values defined in your package.json. Consider the above package.json and let's say you want to want to override the port value. Note that this only works in an "npm like" context, i.e. with npm and yarn.

To override the port value for your local environment without actually changing your package.json, set the respective npm environment variable...

npm config set my-application:hops:port 1337

... and then run...

npm start

... which will start your server on port 1337.

Default configuration

hops-config provides a minimal, yet convenient default configuration. Furthermore, when starting a development server, source maps will be generated.

Babel

• Env preset
• React preset
• flow-react-proptypes plugin
• transform-class-properties plugin
• transform-object-rest-spread plugin
• syntax-dynamic-import plugin (used in the browser)
• dynamic-import-node plugin (used on the server)

PostCSS

PostCSS in Hops is configured to use cssnext and CSS Modules by default.

Files/assets

File type	Loader action
html svg otf ttf woff woff2 ico	Files of these types are emitted to the directory defined in assetPath
png gif jpeg jpg webp	Same as above, except when a file of this type is smaller than 10kb in size. In that case, it will be converted to a base64-encoded data URL and embedded inline in the referencing document
json	Files of this type are loaded and their content is returned
tpl	Files of this type are parsed by _.template and their content is returned as a function. By providing such a file, you can override the default template provided by hops-react

Custom Webpack configuration

Webpack configurations can be nasty to handle, therefore we recommend using webpack-merge if you want to extend one of the existing Webpack configurations.