- This is my first React project!
- I decided to spend my time touching on all aspects of a robust project, rather than refining one specific aspect. Specifically, I wanted to have:
- Correctly functioning code
- A robust build system
- Proof-of-concept continuous integration
- Continuous deployment and a live demo
- Proof-of-concept use of a UI framework
- Use of the GitHub issues feature to track progress on the stories
- Because I touched on everything, things like robust unit test coverage and fancy UI design were sacrificed.
- I used the material-ui React components to dress up the UI a bit.
- After using this library I started to see how React could be useful for component reusability
- I used a boilerplate template to get started, but it had a lot of bugs that required tweaking.
- Getting Karma to run cleanly was a HUGE pain. It took probably 25% of my total development project.
- The integration (E2E) tests work fine locally, but not on CircleCI. I decided getting them working wasn't worth the effort.
Blog posts I read while learning React
- Is ReactJS Fast (vs Angular) Seems like the answer is "no".
- Using ReactJS with Angular (I didn't actually do this)
- React Boiler Plate I used this to figure out how to use reactify and setup React correctly to work with browserify
- Official React Tutorial With the project organization setup 'professionally', I started working through the tutorial
- General Stack Overflow Questions, mostly about strange gulp behavior
If this was a real product, this is additional work I would want to complete over time
- all resource files should be hashcode versioned to protect against browser caching
- Gulp configuration is more complicated than it needs to be - express? Really?
- Add a version tag into the HTML
- Collect JUnit test report and have CircleCI capture and preserve it
- Re-Enable End-To-End / Integration Tests
- Organize js files into hierarchies
- Improved code consistency (naming conventions, organization, etc)
- Clone this repo from
npm installfrom the root directory
gulp dev(may require installing Gulp globally
npm install gulp -g)
- Your browser will automatically be opened and directed to the browser-sync proxy address
- To prepare assets for production, run the
gulp prodtask (Note: the production task does not fire up the express server, and won't provide you with browser-sync's live reloading. Simply use
gulp devduring development. More information below)
gulp dev is running, the server is up as well and serving files from the
/build directory. Any changes in the
/app directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address.
Left over notes about testing from the Boilerplate Template I used
These might be useful debugging the E2E tests.
All of the tests can be run at once with the command
gulp test. However, the tests are broken up into two main categories:
End-to-End (e2e) Tests
e2e tests, as hinted at by the name, consist of tests that involve multiple modules or require interaction between modules, similar to integration tests. These tests are carried out using the Angular library Protractor, which also utilizes Jasmine. The goal is to ensure that the flow of your application is performing as designed from start to finish.
In this boilerplate, two end-to-end test examples are provided:
routes_spec.js, which tests the functionality of our AngularJS routing
example_spec.js, which tests the functionality of the example route, controller, and view
More examples can be seen at the above link for Protractor.
All e2e tests are run with
gulp protractor. The command
npm run-script preprotractor should be run once before running any Protractor tests (in order to update the webdrivers used by Selenium).
- before running the Protractor tests, the application server must be running (start it with
- the Protractor library used for the end-to-end tests may require installing the Java JDK beforehand.
Unit tests are used to test a single module (or "unit") at a time in order to ensure that each module performs as intended individually. In AngularJS this could be thought of as a single controller, directive, filter, service, etc. That is how the unit tests are organized in this boilerplate.
An example test is provided for the following types of AngularJS modules:
All unit tests are run with
gulp unit. When running unit tests, code coverage is simultaneously calculated and output as an HTML file to the