PFE Lab is the UI interface for the Zooniverse Lab.
Install the dependencies:
npm install
Development mode with livereload:
npm run start
When you are done, create a production-ready version of the JS bundle:
npm run _build-production
Deployment is handled by Github Action. Both staging and production deployment can be run ad hoc in the actions tab as needed if you have the appropriate permissions on the repository.
On opening of pull requests, a Github Action is triggered to deploy to a branch staging location. The blob storage location depends on the pull request number, e.g. https://pr-214.lab-preview.zooniverse.org. Note: For authentication, you will need to add the staged URL to Doorkeeper.
On push to master, a Github Action is triggered to deploy to master staging found at https://master.lab-preview.zooniverse.org.
Production deployments are triggered by an update to which commit the production-release tag is pointed to. This tag should be updated via chat ops and then a Github Action will run that builds and uploads the files to our cloud provider found at https://lab.zooniverse.org.
- If you write a new component, write a test. Each component should have its own
-test.jsfile. - The test runner is Mocha, assertion library is Chai, and Enzyme is available for testing React components. Sinon is used for standalone test spies, stubs, and mocks.
- You can run the tests with
npm run test. - Tests are also run by Github Actions as part of a CI check on pull requests
- Keep common base styles and variables in common.styl.
- For a given component, pick a unique top-level class name for that component and nest child classes under it.
- Stylus formatting: Yes colons, no semicolons, no braces.
@extendsup top, then properties (alphabetically), then descendant selectors.- Prefer use of
display: flexandflex-wrap: wrapto explicit media queries wherever possible. - We are using Zoo Grommet, a Zooniverse theme from the Grommet React component library.
- We are using BEM for CSS naming conventions.
- An ESLint configuration file is setup in the root of the repository for you to use with your text editor to lint both ES6 and use Airbnb's React style guide.
- ESLint can be run from the CLI with
eslint path/to/local/file.jsx.
Based on the Zooniverse Redux starter template, which in turn was based on the original React Starterify (used under the MIT License).
Copyright 2017 Zooniverse
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.