Hops is a modular development, build and runtime environment for universal ("isomorphic") web applications. It focuses on React.
Hops is designed to simplify getting started with modern frontend tooling. It streamlines Webpack and Jest configuration featuring Babel and PostCSS.
If you just want to get started with hops + react you can execute the following command to initialize a small example app:
npm install -g hops-cli
hops init my-awesome-project
cd my-awesome-project
npm startThis will start hops in development mode. Visit http://localhost:8080 to see your app in the browser and make some changes to the code in your editor to see it live-reloading.
If you want to build the JS bundles for production, run npm run build in your terminal and to start a Node.js server just type in npm start --production.
Hops is quite modular, its components being independently published on npm. Its main building blocks, however, rely upon each other:
| Package | NPM |
|---|---|
| Hops React |  |
| Hops Redux |  |
| Hops GraphQL |  |
| Hops Express |  |
| Hops Lambda |  |
| Hops Global CLI |  |
| Hops Local CLI |  |
| Hops Build |  |
| Hops Config |  |
| Hops Build Config |  |
| Hops Jest Preset |  |
The following additional packages are rather low-level and you'll probably never need to install and use them directly.
| Package | NPM |
|---|---|
| Hops Server |  |
| Hops Middleware |  |
| Hops Webpack Plugin |  |
| Hops Renderer |  |
| Hops Transpiler |  |
Hops uses lerna and yarn for development and publishing of the packages. Therefore it is required to have yarn globally available.
If you want to contribute to this project, create a fork of its repository using the GitHub UI. Check out your new fork to your computer:
mkdir hops && cd $_
git clone git@github.com:user/hops.git .Afterwards, you can yarn install the required dependencies and then run yarn bootstrap to install the dependencies of all packages and link the packages together.
Using yarn start will execute the start script in the hops-template-react so that you can verify your changes in the browser.
When you are finished, please do go ahead and create a pull request.
Hops is entirely written in ECMAScript 5 and its code is formatted using prettier. Please make sure your contribution does, too.
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.