Sample web app demonstrating how to make the URL hash an integral part of the user interface
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Hash control

An example of how to take control of the browser's address bar from within a React/Redux application.

This technique is based on the hashchange event that fires when a window's hash changes. Conversely the fragment identifier is updated using the location.hash property.

The HashHelper class which acts as translator between the hash and the state container.

The sample app cosists of three pages one of which represents a generic resource identified by a number.

The fragment identifier is used to encode this information in a query string format like the following:


This allows for navigation within the app using hyperlinks or programmatically. It also facilitates the use of bookmarks and browser history.

For more information check out this article.

Running the example app

Note: Make sure you have Docker first. Then:

docker-compose up

Then head to to see the app running.


When starting the container, the project will build and start serving with live reload.

To trigger a new re-build:

docker-compose run --rm web npm run build


To watch for changes in source code and re-build:

docker-compose run --rm web npm run watch

Adding dependencies

When there's new dependencies in package.json one option is to remove the current image to force a rebuild:

docker-compose down --rmi local

docker-compose up

Specification (test)

docker-compose run --rm web npm test

Refer to spec subproject for more.


npm run staging:build
npm run deploy

Needs .npmrc configuration with AWS S3 access key ID and secret. See npmrc-example for reference.


npm version patch
npm run production:build
npm run production:deploy

Other useful docker commands:

To run a console inside the container:

docker-compose run --rm web bash


docker-compose exec web bash


docker exec --tty --interactive web_app_run_1 bash

Project source structure

  • JSX files for react components (in src folder with .jsx extention)
  • ECMA Script 2015 (ES6) files (in src folder with .js extension) for reducers and other supporting classes
  • HTML templates and EJS entry points in src-pages folder

Project's tools

Runtime libraries

Compile time

Other development tools