ci_dashboard v2.0.0
This react.js app is created inside/aside an existing angular app.
The intent is to slowly move things out of angular and into react without our users knowing about it too much.
We will be using mainstream react ecosystem workflow for developing this client side app which includes 1. React 2. Redux (Flux implementation) 3. ES6 (Coffeescript like syntax and more features than ES5) 4. Webpack (Transpiling/minifying/concatenating/etc. Way better than grunt/gulp/browserify/etc) 5. Jest (Testing)
Setup Commands https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
npm init npm install --save ...
//testing blessed by FB npm install --save-dev jest //Also add the following to package.json so that you can use es6 in tests "babel": {"presets":"react", "es2015", "stage-2"},
//e2e testing Nightwatch (see docs on how to install selenium, java, etc) to make it work. npm install -g nightwatch
Development Because webpack-dev-server isn't installed globally (with -g option), you have to execute it from ./node_modules like so: $./node_modules/.bin/webpack-dev-server --progress --colors
but this is installed in package.json so instead you can just type $npm run start (note webpack-dev-server keeps the js file in memory, so its not written to disk but webpack writes)
Deployment 1. cd to /react/ and then build this app. $npm run publish OR by yourself @ $./node_modules/.bin/webpack --progress --colors 2. Build the ng app, which will copy the react build into the public angular directory $cd .. && grunt 3. Make sure the whole dashboard app boots up locally $rackup 4. commit the changes (probably only react/bundle.js because webpack) to a branch.
Folder Structure Files are grouped in a folder by Feature in the APPROOT/src directory, opposite of Rails.
Folder structure is borrowed from several leading react and react native boilerplates from experienced teams.
Generally, if something is tightly coupled to something else, consider placing in the same folder so that you could dist as a npm module.
*.test.js files should sit right next to the .js file or Tests/ subdir if too many files
To make Jest play nicely with imported css, fonts, images, there are mocks for them in that dir
Components
- dumb basic UI components that may be composed to make a more specialized UI component elsewhere
Containers
- index.js The Single redux connected page or component/HOC. export default the real constant name you want.
- <Something.js> other containers/components that are specialized to use on this page only
- actions.js - redux actions
- reducer.js - redux reducers
- sagas.js - redux sagas including API calls/wrappers
- constants.js - constatns for actions/reducers/sagas to import
- Tests/ optional test files folder
fixtures/
- static data so we can run the app in offline mode
utils/
- unit testable utilities used throughout the app
reducers.js - all the reducers combined store.js - the redux store whatever.html - the bootstrap page that will load the react app
APPROOT/public
- everything public compiled by webpack and served up by the webserver (.html .js fonts, images etc)
APPROOT/fonts
APPROOT/images
APPROOT/package.json, webpack.config.*.js, etc. any other source file
Site-wide Alerting 1. import {addAlert} from './App/actions' 2. dispatch(addAlert({message:"my alert message"})) => shows a red alert by default. see defaultProps
Ui Component Development we're trying out Storybook
Testing Check package.json for script commands but we're using Jest for unit/component testing and Nightwatch (selenium webdriver wrapper like Protractor and everything else) for integration testing.
As Jest contines to become better, we'll lean on it more but until then, there is no e2e testing in Jest.
$npm test -> runs jest component/unit tests
Put nightwatch/integration tests in test/tests/*/ $npm run start && nightwatch or $npm start e2e -> fires up the app in a browser then kicks off integration tests. Any errors/failures are in teh test/screenshots dir
7 years ago