Source for Haaretz frontend app(s)
Switch branches/tags
Clone or download
Latest commit 9495ff5 Oct 23, 2018
Failed to load latest commit information.
.github docs(htz-frontend): commit docs Feb 11, 2018
docs docs(configuration): add LOCAL_DEV doc Jul 18, 2018
packages feat(caption): preven credit from breaking into two lines Oct 23, 2018
pkg_templates fix(build process): fix windows file conflicts due to different line-… Aug 26, 2018
scripts fix(build): improve handling of partially staged files Aug 26, 2018
.dockerignore dockerize htz_react app Feb 26, 2018
.eslintignore docs: build packages' documentation into "docs" so that it can be dep… Oct 24, 2017
.eslintrc.js docs(all): Document how to extend configs (#61) Sep 12, 2017
.flowconfig feat(flow config): ignore vscode .history in flow checks Aug 14, 2018
.flowmonorc feat(all): add flow-mono-cli Aug 7, 2018
.gitignore chore(fela): update fela to latest version Mar 18, 2018
.nojekyll docs(gh-pages): bypas Jekyll in gh-pages Dec 6, 2017
.prettierrc style: update eslint deps and fix resulting errors Mar 7, 2018
.released-packages chore(build pipeline): add pipeline Apr 22, 2018
Dockerfile WIP(docker): add base image for node include local cache for npm, ren… Sep 16, 2018
Dockerfile-promotions fix( upgrade node image to 10.8 in order to use latest… Aug 9, 2018
Jenkinsfile.groovy chore(build pipeline): add pipeline Apr 22, 2018 chore: Encapsulate server logic in htz-react-server Nov 6, 2017
commitlint.config.js chore(git): document git workflow and add tools and hooks to enforce it Oct 16, 2017
docker-compose-dev.yml fix: docker-compose files are generating doublequotes Jul 12, 2018
docker-compose-graphql-prod.yml fix(docker): add docker replication Oct 22, 2018
docker-compose-graphql-stage.yml feat(graphql server): run react stage with logging, add engine api ke… Oct 16, 2018
docker-compose-graphql.yml feat(graphql server): run react stage with logging, add engine api ke… Oct 16, 2018
docker-compose-prod.yml fix(haaretz co il): remove rebase comments Aug 5, 2018
docker-compose-promotions-dev.yml fix(docker): rename typo Oct 16, 2018
docker-compose-promotions-ppromotions.yml fix(docker): add graphql settings for docker files Oct 7, 2018
docker-compose-promotions-prod.yml feat(docker): add new docker compose files for promotions page Aug 13, 2018
docker-compose-promotions-stage.yml fix(docker): rename typo Oct 16, 2018
docker-compose-stage.yml fix(docker): rename typo Oct 16, 2018
docker-compose-www.yml feature/update-docker-compose-www Aug 22, 2018
docker-compose.yaml fix: docker-compose files are generating doublequotes Jul 12, 2018
lerna.json chore(all): Use Yarn Workspaces with Lerna Sep 9, 2017
package.json Revert "feat(article types): configure article types in one location" Oct 22, 2018
yarn.lock Revert "feat(article types): configure article types in one location" Oct 22, 2018


lerna Commitizen friendly

Table of Contents


These packages are managed with Lerna and organized like so:


  • For help with individual packages, use the links to those packages above.
  • For general documentation, see docs/

Getting Started



Clone this repo:

$ git clone
$ cd htz-frontend

Use Yarn to install Lerna and other dependencies:

$ yarn

Now use Lerna to set up the managed packages:

$ yarn run bootstrap

Interdependent packages managed in the same monorepo will be symlinked.

Then work on whichever package(s) you like:

$ cd packages/components/htz-components
$ yarn run styleguide

Authoring Packages

Adding and removing npm dependencies

Thanks to Yarn Workspaces and Lerna, adding (installing) and removing (uninstalling) npm dependencies inside each of our different packages Just Works™, taking care of hoisting and managing common dependencies.

Lifecycle scripts

If your package is consumed as a dependency, it should include the standard lifecycle script prepare to perform any necessary build tasks. This will often look like (in package.json):

  "scripts": {
    "prepare": "npm run build"
  • In lifecycle scripts, you should run tasks with npm, because anyone might be installing it from the public npm registry, and they don’t necessarily have Yarn installed.
  • Apps usually don’t need to be built in a lifecycle script, because they are not consumed as dependencies. Instead, they should be built upon deployment.


These are found in the root package.json and may be run with yarn run <script> or npm run <script>. If you are looking for the individual package scripts provided by htz-react-base, see its README.


Run clean, then install the dependencies for each package, and symlink any package found in the packages directory if the dependency version matches.


Remove the node_modules directory, built distribution files, and Jest cache directory for each package.


Create an new package and initialize it based on user passable options.

When executed, the script will prompt for options and build the customized package based on aswers provided. It takes two optional argument: package-name and package-description, which will set defaults in the prompt (you will still be able to override them).


yarn create-package ['my-new-package' ['A description of what the package does']]


Add or update the Table of Contents section in any Markdown file with section headings. For best results, move the primary document heading and description to just before the generated table of contents:

# Document Title

Brief description.

<!-- START doctoc -->


Type-check all packages with flow. Initialize uninitialized packages.


Format files with prettier and eslint --fix using the format script from @haaretz/htz-react-base.

yarn run format:self will only format files in the root directory yarn run format:packages will run the format script in every package. yarn run format will run both.

gc (git commit)

Commit staged files using a Commitizen wizard to ensure compliance with the repository's mandatory git workflow.


Run a helpful wizard for assistance with running lerna commands


Lint files in the root package, then run the lint script in every package.

Lint files with eslint using the lint script from @haaretz/htz-react-base.

yarn run lint:self will only lint files in the root directory yarn run lint:packages will run the lint script in every package. yarn run lint will run both.


Set the dependency versions for each matching package based on the syncDependencies field of package.json, in order to make across-the-board upgrades.

Arguments will be passed to lerna bootstrap, which allows, e.g., to --scope or --exclude packages.


Will run tests in all packages.


Like bootstrap, but doesn’t clean first.


Sync the scripts property in each package with the latest version of htz-scripts

Git Workflow and Hooks

See docs.

Developer Tools

React Developer Tools

Environments: Chrome, Firefox

A panel for inspecting the React component tree.

Apollo Client Developer Tools

Environments: Chrome

A panel for inspecting GraphQL queries and the store.