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
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:
Then head to http://127.0.0.1:8100/ 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
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 run --rm web npm test
spec subproject for more.
npm run staging:build npm run deploy
.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