I’ve been working on a prototype project that uses Webpack for the bundling/build process, and includes Cesium. I’m building the UI with React, managing data with Redux, and using Mocha to run my tests offline under Node. I’ve managed to accumulate a number of useful and interesting bits of configuration during this effort, and wanted to make my working project available as a reference for anyone else interested.
The repository is available at https://github.com/markerikson/react-redux-cesium-testing-demo .
Pasting from my README:
This sample project demonstrates demonstrates several things:
- Application code using React and Redux, with bare-basic usage of loading images and CSS
Use of the Cesium 3D globe library, inside a React component, installed
using NPM, and with the Cesium pre-built assets served directly from /node_modules/cesium/ instead of requiring a copy step during development
- Webpack configuration using a “base” set of config options, and multiple extensions of that for development, production, offline test execution, and live test execution in a browser
- Test configuration using Mocha+JSDOM+Chai+Sinon+Enzyme, allowing execution of
React component unit tests in a Node environment without the need for Karma or a browser
- Basic ESLint configuration for style checking
Use of the https://github.com/JamieMason/shrinkpack tool for committing dependencies with minimal overhead, thus allowing dependable and repeatable installations while minimizing the risk of being affected by problems like NPM-Left-Pad-Gate
- Creation of a React component that is loaded asynchronously and rendered when it becomes available
I used https://github.com/mmacaula/cesium-webpack as a reference while putting this together, but was able to advance the approaches suggested there by figuring out how to serve Cesium’s files directly from the installed NPM package. Also note that I was able to create a React component that renders a Cesium.Viewer and another that manages a BillboardCollection, and I can successfully run tests on the second component under Node (running anything that actually instantiates a Cesium.Scene is a bad idea, as WebGL is obviously not available).
Hopefully this sample is useful to someone!