Skip to content
A web application to manage add-on source code
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Make sure directory exists before saving image (#408) Mar 18, 2019
.github
public Better CSP for static files (#497) Mar 29, 2019
scripts
src
stories Introduce a Skeleton component (#606) Apr 17, 2019
.dockerignore Refactor Dockerfile to build static app during deployment (#475) Mar 27, 2019
.env
.env.common-local
.env.dev Configure a CDN (#485) Mar 28, 2019
.env.stage Configure a CDN (#485) Mar 28, 2019
.eslintrc Add eslint-config-prettier (#266) Feb 25, 2019
.gitignore Add config to publish our storybook to gh-pages (#216) Feb 18, 2019
.node-dev.json
.prettierignore Introduce authentication code (#56) Jan 29, 2019
.prettierrc Add prettier (#29) Jan 17, 2019
.snyk Set up Storybook (#65) Jan 30, 2019
.travis.yml Use Node 11.10 (#337) Mar 7, 2019
.yarnrc Add SCSS support (#27) Jan 16, 2019
CODE_OF_CONDUCT.md CoC (#509) Apr 1, 2019
CONTRIBUTING.md Add contrib files (#106) Feb 4, 2019
Dockerfile Refactor Dockerfile to build static app during deployment (#475) Mar 27, 2019
LICENSE.txt Minor fixes for prettier (#57) Jan 23, 2019
README.md Fix `stage` npm script (#217) Feb 19, 2019
package.json
renovate.json Configure lockfile maintenance PRs for Renovate (#543) Apr 9, 2019
tsconfig.json Add ESLint reporter for jest (#141) Feb 14, 2019
version.json
yarn.lock Update dependency refractor to v2.9.0 (#618) Apr 19, 2019

README.md

addons-code-manager

Build Status codecov

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.

Requirements

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

Getting started

  • 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.

Prettier

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.

TypeScript

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.

CSS

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;

Storybook

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.

All Available Commands

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.

yarn build

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).

yarn dev

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.

yarn dev-2col

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

yarn dev-servers

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.

yarn eject

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

yarn eslint

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

yarn lint

This runs all the lint commands at once.

yarn prettier

This runs Prettier to automatically format the entire codebase.

yarn prettier-dev

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

yarn stage

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.

yarn start-local-dev

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.

yarn start-local-prod

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.

yarn start-local-stage

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.

yarn test

This launches Jest in the interactive watch mode.

See the section about running tests for more information.

yarn type-coverage

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

yarn typecheck

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.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

You can’t perform that action at this time.