{"id":15645981,"url":"https://github.com/markerikson/react-redux-cesium-testing-demo","last_synced_at":"2025-04-30T11:05:21.251Z","repository":{"id":83606708,"uuid":"54676741","full_name":"markerikson/react-redux-cesium-testing-demo","owner":"markerikson","description":"A sample project demonstrating configuration of React, Redux, Webpack, Cesium, and Mocha","archived":false,"fork":false,"pushed_at":"2016-04-18T02:09:51.000Z","size":32827,"stargazers_count":52,"open_issues_count":2,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-25T07:08:40.542Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markerikson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-24T21:56:14.000Z","updated_at":"2024-12-11T02:10:42.000Z","dependencies_parsed_at":"2023-07-08T19:16:14.706Z","dependency_job_id":null,"html_url":"https://github.com/markerikson/react-redux-cesium-testing-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markerikson%2Freact-redux-cesium-testing-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markerikson%2Freact-redux-cesium-testing-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markerikson%2Freact-redux-cesium-testing-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markerikson%2Freact-redux-cesium-testing-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markerikson","download_url":"https://codeload.github.com/markerikson/react-redux-cesium-testing-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242646208,"owners_count":20162850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T12:10:51.177Z","updated_at":"2025-03-09T04:30:52.135Z","avatar_url":"https://github.com/markerikson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Redux-Cesium-Testing Demo\n\n\nThis sample project demonstrates a variety of useful project configuration and setup techniques, including:\n\n- **Application**\n  - Application code using React and Redux, with bare-basic usage of loading images and CSS\n  - Creation of a React component that is loaded asynchronously and rendered when it becomes available\n  - Usage of the Cesium 3D globe library inside a React component, with another React component attaching a Cesium billboard to the globe\n- **Webpack**\n  - Configuration using a \"base\" set of config options, and multiple extensions of that for development, production, and multiple test execution approaches\n  - Use of Webpack's `DllPlugin` and `DllReferencePlugin` to pre-compile specific dependencies, allowing later application builds to be faster since those dependencies don't need to be parsed\n  - Use of Cesium as installed from NPM, and with the Cesium pre-built assets served directly from `/node_modules/cesium/` instead of requiring a copy step during development\n- **Testing**\n  - Test configuration using Mocha+JSDOM+Chai+Sinon+Enzyme, allowing execution of application tests and React component unit tests in a Node environment without the need for Karma or a browser\n  - Testing of a React component that uses Cesium primitives\n  - Demonstration of several different approaches for running Mocha tests:\n    - Build bundle with Webpack, run Mocha against the bundle\n    - Use of `mocha-loader` to run a live-watching test server, with results displayed in a browser\n    - Use of `mocha-webpack` to run a live-watching test process, with results displayed in a console\n- **Miscellaneous Setup**\n  - Basic ESLint configuration for style checking\n  - Use of the [shrinkpack](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\n\n\n\nNote that this codebase started as a prototype / research project, and any actual code in here is probably pretty ugly and not well documented.  The intent is to demonstrate a mostly-working project configuration that implements some specific capabilities, and might serve as a useful example for others interested in the same approaches.  You probably don't want to use this as the basis for an actual production application :)\n\n\n## Getting started\n\nClone this repo, and run `npm install`.  All the dependencies should be installed directly from the `/node_shrinkwrap/` folder, rather than having to go out to the NPM servers.\n\nThen, execute `npm run dll:build` to pre-compile the \"vendor\" and \"cesiumDll\" bundles, which need to be available during the development process.\n\nFinally, run `npm run dev` to start development.\n\n### Development commands\n\nThese commands are NPM scripts defined in the \"scripts\" section of [package.json](package.json)\n\n- `npm run dev`: starts the local app development-mode server, at http://localhost:3000\n- `npm start`: same as `npm run dev`\n- `npm run build`: does a production compile of the source, and writes it to `/dist`\n- `npm run dll:build`: builds both the \"vendor\" and \"cesiumDll\" bundles\n- `npm run dll:build:vendor`: builds the \"vendor\" bundle\n- `npm run dll:build:cesium`: builds the \"cesiumDll\" bundle\n\n\n- `npm run lint`: executes ESLint to flag code style problems\n\n\n- `npm test`: does a compile of the test dependencies, writes to `/disttest`, and executes the test suite\n\n\n- `npm run test:build`: does the test compilation step\n- `npm run test:run`: uses the Mocha test runner to execute an already-built test suite\n- `npm run test:dev`: starts the local test-running development-mode server for `mocha-loader`, at http://localhost:3001\n- `npm run test:fast`: uses `mocha-webpack` to compile and execute the test suite once\n- `npm run test:watch`: starts `mocha-webpack` to execute tests in live-watching mode in a console\n\n\n### Managing Dependencies using Shrinkpack\n\nThe recent uproar over the unpublishing of \"left-pad\" and the subsequent breakage of thousands of NPM packages and build environments demonstrates the need to maintain a fixed list of _all_ transitive dependencies.  However, the common suggestion of checking in `/node_modules/` is a bad idea.  A typical `/node_modules/` folder is easily 20K files and 150MB, and probably has platform-specific post-installation build artifacts (such as node-sass's native-code SASS compiler).\n\nWhile researching this issue in 2015, I ran across a tool called https://github.com/JamieMason/shrinkpack , which seems to solve most of this issue.  It simply refers to a npm-shrinkwrap.json file, and uses NPM's caching abilities to grab the tarballs for each exact dependency.  It copies those to a `/node_shrinkwrap/` folder, which can then be easily committed.  That folder will probably be more like 500-750 files and 20MB - much more manageable.  Re-running shrinkpack after a package update will just add or remove a few tarballs as needed, rather than having to re-commit hundreds or thousands of files under `/node_modules/`.  In addition, having the pre-install packages available means that the project can have `npm install` run on multiple platforms, without worrying that a Linux build artifact got checked out on Windows.  There's also no need for NPM to go out to a server during an install, as all dependencies are right here and pre-specified.  That means a build environment doesn't have to have a network connection.\n\nA typical Shrinkpack workflow for managing dependencies looks like this:\n\n```bash\n# one-time global install of shrinkpack\nnpm install -g shrinkpack\n\n# install whatever packages you want to update\nnpm install some-package --save-dev\n\n# once you are ready to persist the upgrade, then re-generate \n# npm-shrinkwrap.json, including devDependencies\nnpm shrinkwrap --dev  \n\n# re-run shrinkpack to rewrite the shrinkwrap links to \n# point to ./node_shrinkwrap/some-tarball.tgz\nshrinkpack\n\n# add new package files to version control\ngit add npm-shrinkwrap.json\ngit add node_shrinkwrap\ngit commit -m \"Updated some-package\"\n```\n\n\n\n\n### Repo Layout\n\n- $REPO\n  - **dist:** output folder for the production build\n  - **disttest**: output folder for the test build\n  - **distdll**: output folder for the \"DLL\" bundles\n  - **node_modules**: local installations of JS build and app dependencies (NOT checked in)\n  - **node_shrinkwrap**: downloaded zip files needed to install those dependencies (checked in)\n  - **src**: application source\n    - **actions**: Redux action creator functions (\"fetch data\", \"update check state\", \"increment counter\", etc)\n    - **assets**: temporary folder holding a 3rd-party stylesheet\n    - **components**: UI view classes\n    - **constants**: exported constants referenced by actions and reducers\n    - **containers**: another UI view classes folder - will probably be removed / merged\n    - **layouts**: more UI view classes that are solely responsible for laying out structure on screen\n    - **reducers**: Redux reducer functions that update state based on dispatched actions\n    - **selectors**: reusable functions for extracting pieces of data from the Redux store\n    - **store**: logic for initializing the Redux store on startup\n    - **styles**: CSS and images\n    - **utils**: utility functions\n    - *index.js*: the client-side entry point\n    - *index.template.html*: template for a generated HTML host page\n  - **test**: test setup and test files\n    - *testEntry.js*: used to recursively load all test files in the folder\n    - *mocha.opts*: Mocha config options used when running in the CLI\n    - *mocha_helper.js*: environment setup logic for Mocha in the CLI\n    - *testSetup.js*: imports used when running Mocha in the browser\n  - **webpack**: configuration options for Webpack, used for building Javascript bundles\n    - *copyCesium.js*: a utility to copy portions of Cesium from `/node_modules/` to the build output folder\n    - *webpack.base.config.js*: common Webpack settings used by the different config variants\n    - *webpack.dev.config.js*: Webpack settings for the development mode server\n    - *webpack.prod.config.js*: Webpack settings for the production build\n    - *webpack.test.config.js*: Webpack settings for the offline test build\n    - *webpack.testdev.config.js*: Webpack settings for the Mocha development mode server\n  - *.babelrc*: common config options for the Babel JS transpiler\n  - *.eslintrc*: settings for the ESLint code style checker\n  - *config.js*: common internal environment variables and app settings\n  - *devServer.js*: the application development mode server\n  - *npm-shrinkwrap.json*: the generated file listing all transitive app and build dependencies\n  - *package.json*: the NPM project definition file, including top-level dependencies, `npm run` scripts, and project metadata\n  - *testServer.js*: the Mocha test development mode server","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkerikson%2Freact-redux-cesium-testing-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkerikson%2Freact-redux-cesium-testing-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkerikson%2Freact-redux-cesium-testing-demo/lists"}