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.
Permalink
Failed to load latest commit information.
docs
spec
src-pages
src
.gitignore
.npmignore
Dockerfile
README.md
circle.yml
docker-compose.yml
package.json
webpack.config.js

README.md

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:

index.html#page=resource&resource=1

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 http://127.0.0.1:8100/ to see the app running.

Modifying

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

Watch

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.

Staging

npm run staging:build
npm run deploy

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

Releasing

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

Or:

docker-compose exec web bash

Or:

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