For this Live Demo, I disabled the API hosting; so it kind of fakes the data saving/adding. But it still shows the code-splitting and basic navigation of a hosted client-side only React app. Also, here is a bundle analyzer report of this build, which shows the breakdown of the final chunks.
I wanted to show the use of CORS with a client-side only hosted app connecting to a different hostname for server API calls. This is a deliberately over-simplified solution.
See: router options for different stages of the demo.
./src/client/index.js (main entry point)
- Stage 1; HTML React; basics of JSX.
- Stage 2; Encapsulating Layout, using react-router.
- Stage 3; Data... Lets render data from XHR requests. (Showing
list-simple-pagefirst)- Stage 3, Part 2; Cleaning up our components (Use
list-pageinstead)
- Stage 3, Part 2; Cleaning up our components (Use
- Stage 4; Fancy stuff.. background-updates, using React Context.
- Stage 5; Forms & Validation.
- Stage 5, Part 2; Breaking apart re-usable components (Enable this line).
I've enabled code splitting and lazy loading imports in the context step. This means that only the bundle and shared dependencies will pull down on the first load. Then if you navigate to the Chart (or any of the People) pages, it'll load the resources dynamically and pull down the dependencies.
To show this, I pulled in a choropleth graph that requires d3, a pretty sizable dependency. It will only load if you load the component
I've provided both dev mode and a simulated production mode for this project. Dev mode will enable sourcemapping, hot module reload, and live api and client reloading upon changes. Production mode will simply build a production version of the app and boot them up in readonly mode (no volume mappings). All production flags will be set.
- Dev Mode:
docker-compose up - Production Mode (now a 130MB docker image):
docker-compose -f prod.yml up - Run tests in the container:
docker-compose run web npm run testor./bin/t