This is a web application to manage add-on source code, such as reviewing code for add-ons submitted to https://addons.mozilla.org. This project was bootstrapped with Create React App.

• You need Node 10 which is the current LTS (long term support) release.
• You need yarn to manage dependencies and run commands.

• Clone this repository
• Type yarn to install everything
• Type yarn dev to launch the test suite, development servers, and all other development processes in stmux. Open http://localhost:3000 to view the development site. Press CTRL-a-? for help.

All available commands are documented below.

Read our contributing guidelines to get started on your first patch.

We use Prettier to automatically format our JavaScript code and stop all the on-going debates over styles. As a developer, you have to run it (with yarn prettier-dev) before submitting a Pull Request.

All code is written in TypeScript. Currently, errors in test files won't be reported until you try to submit a pull request. Because of this, consider configuring your editor for error reporting.

All styles are written in the SASS pre-processor language as css modules.

Example: for a component like StarIcon/index.tsx, you'd create its module as StarIcon/styles.module.scss. You would import it at the top and reference it as a module. As an example, here is a simple stylesheet:

.container {
  padding: 12px;
}

You would reference this CSS class in your component like this:

import * as React from 'react';

import styles from './styles.module.scss';

const StarIcon = () => {
  return <div className={styles.container} />;
};

export default StarIcon;

We use storybook to visualize the look and feel of our React components. Our Storybook is deployed on GitHub Pages: https://mozilla.github.io/addons-code-manager/.

Launch the development server like this:

yarn storybook

When developing a new component, always add a story for it. If you were creating a component like src/components/StarIcon/index.tsx then you'd put its story in stories/StarIcon.stories.tsx. The storybook server will automatically load files having the .stories.tsx suffix in this directory.

You can configure the app by defining environment variables in .env files, the standard way to configure Create React App.

• How to add a new environment variable
  • Add it to .env with the REACT_APP_ prefix.
• How to override an environment variable for a hosted site
  • Define the variable in the corresponding puppet config file. To define a variable for code.addons-dev.allizom.org, for example, you'd update amo.code_manager.dev.yaml. Adding a variable to .env.dev will do nothing since that only affects the yarn dev command.

The Snyk service will warn us about security vulnerabilities.

Occasionally, a vulnerable package won't have a patch available. If we can safely determine that the vulnerability doesn't apply to our application, we can ignore these errors. Set up an ignore rule by running yarn snyk ignore ... according to the documentation. The ignore rule will be added to the .snyk file.

Here are some tips for solving performance problems in addition to what's already in the official docs.

• First, ask yourself if there is a real performance problem. If you need to simulate a slow CPU in the profiler just to see anything dramatic, it might be too early to start profiling!
• Try to profile against a production build, if possible, with something like yarn start-local-dev. The overhead of a development build could be misleading.
• If you want to see execution timing grouped by React component, you will need a development build.
• Use Chrome so you can get React integration, if needed. This is a helpful guide for looking at the execution of React components in the User Timing section.
• When a React component is taking a long time to render and you don't see any other components underneath it, it's time to switch away from the User Timing tab of the profiler to the Main tab so you can look at actual function executions. Clicking on a function will give you information about its source.
• You can try using the React devtool extension for profiling but it doesn't provide a great timeline so it's hard to visualize overall slowness.

In the project directory, you can run the following commands. There are a few commands not mentioned here (see package.json) but those are only used by internal processes.

This builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Note: for this project, we use a node server (see scripts/server.js).

This runs all development processes in a single column using stmux. Open http://localhost:3000 to view the development site. Press CTRL-a-? for help.

This runs all development processes in two columns using stmux. Open http://localhost:3000 to view the development site. Press CTRL-a-? for help.

This starts all development servers using stmux, connected to the -dev AMO API.

Open http://localhost:3000 to view it in the browser. Press CTRL-a-? for help.

This runs the eject command. Hopefully we won't ever need this 😭

This runs ESLint to discover problems within our codebase without executing it. ESLint also enforces some patterns and practices.

This runs all the lint commands at once.

A prerequisite to run this command is to install addons-server locally.

This runs all development processes in a single column using stmux. Open http://olympia.test:5000 to view the development site. Press CTRL-a-? for help. The application is configured to use a local AMO API.

Known issue: it is possible to login/logout but the login process will redirect you to the AMO frontend (http://olympia.test) instead of http://olympia.test:5000. You will have to manually go to code-manager, after that there should be no other authentication problem.

This runs Prettier to automatically format the entire codebase.

This runs Prettier on only your changed files. This is intended for development.

This runs the snyk command.

This runs all development processes in a single column using stmux. Open http://localhost:3000 to view the development site. Press CTRL-a-? for help. The application is configured to use the stage AMO API.

This builds the app for production to the build folder (see yarn build command), configured with the -dev AMO API. It also starts a production server that serves the application (configured for local usage).

Open http://localhost:3000 to view it in the browser.

This builds the app for production to the build folder (see yarn build command), configured with the production AMO API. It also starts a production server that serves the application (configured for local usage).

Open http://localhost:3000 to view it in the browser.

⚠️ It is currently not possible to authenticate users.

This builds the app for production to the build folder (see yarn build command), configured with the stage AMO API. It also starts a production server that serves the application (configured for local usage).

Open http://localhost:3000 to view it in the browser.

This launches Jest in the interactive watch mode.

See the section about running tests for more information.

This will check how much of the codebase is protect by safe static types and fail if it's below the configured threshold.

This checks for TypeScript errors in all files, including test files.

You'd think that build does this but it does not check test files. See create-react-app issue 5626.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.