Hops Universal Build Tool

Hops is a universal Webpack wrapper. It additionally leverages both Babel and PostCSS. On the one hand, hops is designed to simplify getting started with modern frontend tooling by providing an extensible baseline config for Webpack. On the other hand, hops aims to help with using webpack for code running on servers.

Installation

Besides reasonably recent versions of Node.js and npm, hops has no global dependencies. If you need those, we recommend using nvm or similar.

mkdir foo && cd foo
npm init -y
npm install -SE hops

Setup

After installing hops into your project, you need to set it up. This can be done within your project's package.json file. The relevant fields are shown below:

{
  "browser": "src/browser.js",
  "server": "src/server.js",
  "scripts": {
    "start": "hops start"
  },
  "dependencies": {
    "hops": "*"
  },
  "hops": {
    "locations": [
      "/"
    ]
  },
  "babel": {},
  "postcss": {}
}

Hops relies heavily on this file for configuration. In the example above, there are two entry points for browser and server - that is, two files that are used for client and server builds. Using two separate files is not strictly required, but it usually makes sense, as you'll have to export an Express-compatible middleware function for server side usage, while for the client, you only need to export a function that intializes your client application.

Hops provides a runner that you can call from the scripts of your package.json and is configured using the hops object also contained therein. In this example, the only configuration option provided is locations, an array of paths that will be used for generating static html files using the middleware you provide.

Additionally, you can configure Babel and PostCSS using the appropriate fields in package.json - or whatever other method these projects provide.

Running

For developing using hops, you can use any decent editor with up-to-date language support. Those without a favorite we recommend Atom, probably with the linter, linter-eslint and linter-stylelint plugins.

Assuming you edited your package.json as outlined above, you can fire up a dev server or trigger a production build like so:

npm start (--production)

If called with the --production flag, a static build is initialized. Otherwise, a development server featuring hot module replacement is started. Hops generates html pages for all locations listed in its config at build time, so you don't need a node server in production, but still can enjoy the benefits of a true universal JavaScript application.

If, however, you want to serve dynamically generated pages, you can transpile your middleware on the fly by using hops' factory function like so:

Advanced Usage

Using the hops config in your package.json file, you can supply your own Webpack configuration files. Most important of these probably is renderConfig as that is being used for the actual server side rendering.

{
  "hops": {
    "locations": ['/some/html/path'],
    "buildConfig": "/path/to/your/build/config",
    "developConfig": "/path/to/your/development/config",
    "renderConfig": "/path/to/your/server/side/rendering/config"
  }
}

Other than that, you can use hops' components on their own. Please refer to their respective readme files for examples:

• Hops Transpiler
• Hops Middleware
• Hops Renderer
• Hops Webpack Plugin

Alternatives

• Backpack
• static site generator webpack plugin

Thanks!

The beautiful hops icon used in the logo was created by The Crew at Fusionary and provided via The Noun Project. It is licensed under a Creative Commons license.