addons-frontend

Addons-frontend 🔥 Front-end infrastructure and code to complement mozilla/addons-server. Security Bug Reports This code and its associated production website are included in Mozilla’s web and services bug bounty program. If you find a security vulnerability, please submit it via the process outlined in the program and FAQ pages. Further technical details about this application are available from the Bug Bounty Onramp page. Please submit all security-related bugs through Bugzilla using the web security bug form. Never submit security-related bugs through a Github Issue or by email. Requirements You need Node LTS (long term support) release. npm is used to manage dependencies and run scripts. It ships with Node. The easiest way to manage multiple node versions in development is to use nvm. Get started If you are on Windows, please make sure to follow windows guidelines too. type npm install to install all dependencies type npm run amo:stage to start a local server that connects to a hosted staging server Development commands Here are some commands you can run: Command Description npm run amo:olympia Start the dev server/proxy (for amo) using data from a local addons-server environment. npm run amo:dev Start the dev server/proxy (for amo) using data from the dev server (https://addons-dev.allizom.org/) npm run amo:dev-https Same as amo:dev but with HTTPS, available at: https://example.com:3000/. Read about setting up this environment npm run amo:stage Start the dev server/proxy (for amo) using data from the staging server (https://addons.allizom.org/) npm run build Build the app. npm run build-ci Run the build and bundlewatch npm scripts. npm run bundlewatch Run bundlewatch to check the generated AMO bundle sizes. Building AMO is required first. npm run flow Run Flow. By default this checks for errors and exits npm run flow:check Explicitly check for Flow errors and exit npm run flow:dev Continuously check for Flow errors npm run eslint Lint the JS npm run start-func-test-server Start a Docker container for functional tests npm run stylelint Lint the SCSS npm run lint Run all the JS + SCSS linters npm run prettier Run Prettier to automatically format the entire codebase npm run prettier-dev Run [Pretty-Quick][] to automatically compare and format modified source files against the master branch npm run prettier-ci Run Prettier and fail if some code has been changed without being formatted npm run version-check Check you have the required dependencies npm test Run all tests (Enters jest in --watch mode) npm run test-debug Run all tests with full console output and full error messages (Enters jest in --watch mode) npm run test-coverage Run all tests and generate code coverage report (Enters jest in --watch mode) npm run test-coverage-once Run all tests, generate code coverage report, then exit npm run test-once Run all tests, run all JS + SCSS linters, then exit npm run test-ci Run all continuous integration checks. This is only meant to run on CI. Running tests You can enter the interactive jest mode by typing npm test or npm run test-debug. This is the easiest way to develop new features. Here are a few tips: npm test will hide most console output and detailed test failure messages, so it is best when you are running a full suite of tests. When working on an individual test, you likely want to run npm run test-debug. When you start npm test, you can switch to your code editor and begin adding test files or changing existing code. As you save each file, jest will only run tests related to the code you change. If you had typed a when you first started then jest will continue to run the full suite even when you change specific files. Type o to switch back to the mode of only running tests related to the files you are changing. Sometimes running tests related to your file changes is slow. In these cases, you can type p or t to filter tests by name while you working fixing a specific test suite. More info. If you see something like Error watching file for changes: EMFILE on Mac OS then brew install watchman might fix it. See jestjs/jest#1767 Run a subset of the tests By default, npm test will only run a subset of tests that relate to the code you are working on. To explicitly run a subset of tests, you can type t or p which are explained in the jest watch usage. Alternatively, you can start the test runner with a specific file or regular expression, like: npm test -- tests/unit/amo/components/TestAddon.js Run all tests If you want to run all tests and exit, type: npm run test-once Eslint As you run tests you will see a report of Eslint errors at the end of the test output: npm test If you would like to run tests without Eslint checks, set an environment variable: NO_ESLINT=1 npm test Flow There is limited support for using Flow to validate the intention of our program. The current version of Flow does not have default support for Silicon Macs. To allow Flow to run on Silicon Macs, first install Rosetta 2 using sudo softwareupdate --install-rosetta --agree-to-license As you run tests you will see a report of Flow errors at the end of the test output: npm test If you would like to run tests without Flow checks, set an environment variable: NO_FLOW=1 npm test To only check for Flow issues during development while you edit files, run: npm run flow:dev If you are new to working with Flow, here are some tips: Check out the getting started guide. Read through the web-ext guide for hints on how to solve common Flow errors. To add flow coverage to a source file, put a /* @flow */ comment at the top. The more source files you can opt into Flow, the better. Here is our Flow manifesto: We use Flow to declare the intention of our code and help others refactor it with confidence. Flow also makes it easier to catch mistakes before spending hours in a debugger trying to find out what happened. Avoid magic Flow declarations for any inte