Skip to content

Latest commit

 

History

History
651 lines (432 loc) · 26 KB

CONTRIBUTING.md

File metadata and controls

651 lines (432 loc) · 26 KB
Raw

Contributor's Guide

We welcome pull requests from freeCodeCamp campers (our students) and seasoned JavaScript developers alike! Follow these steps to contribute:

  1. Find an issue that needs assistance by searching for the Help Wanted tag.

  2. Let us know you are working on it by posting a comment on the issue.

  3. Follow the instructions in this guide to start working on the issue.

Remember to feel free to ask for help in our Contributors Gitter room.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

If you've found a bug that is not on the board, follow these steps.

Quick Reference

command description
npm run test run all JS tests in the system, including client, server, lint and challenge tests
npm run test-challenges run all challenge tests (for each challenge JSON file, run all tests against all solutions)
npm run seed
  (or node seed/index.js)		 parses all the challenge JSON files and saves them into MongoDB (code is inside seed/index.js)
npm run commit interactive tool to help you build a good commit message
npm run unpack extract challenges from seed/challenges into unpacked subdirectory, one HTML page per challenge - see Unpack and Repack
npm run repack repack challenges from unpacked subdirectory into seed/challenges

Table of Contents

Setup

Make Changes

Submit

Setup

Prerequisites

Prerequisite Version
MongoDB Community Server ~ ^3
MailHog ~ ^1
Node.js ~ ^8.9.3
npm (comes with Node) ~ ^5

Updating to the latest releases is recommended.

If Node.js or MongoDB is already installed on your machine, run the following commands to validate the versions:

node -v
mongo --version

To check your MongoDB version on Windows, you have to locate the installation directory. It is probably located at something like C:\Program Files\MongoDB\Server\3.4\ where 3.4 is your version number.

If your versions are lower than the prerequisite versions, you should update.

Platform-specific guides to setting up a development environment:

Forking the Project

Setting Up Your System

  1. Install Git or your favorite Git client.
  2. (Optional) Setup an SSH Key for GitHub.

Forking freeCodeCamp

  1. Go to the top level freeCodeCamp repository: https://github.com/freeCodeCamp/freeCodeCamp
  2. Click the "Fork" Button in the upper right hand corner of the interface (More Details Here)
  3. After the repository (repo) has been forked, you will be taken to your copy of the freeCodeCamp repo at https://github.com/yourUsername/freeCodeCamp

Cloning Your Fork

  1. Open a Terminal / Command Line / Bash Shell in your projects directory (i.e.: /yourprojectdirectory/)
  2. Clone your fork of freeCodeCamp
$ git clone https://github.com/yourUsername/freeCodeCamp.git

(make sure to replace yourUsername with your GitHub username)

This will download the entire freeCodeCamp repo to your projects directory.

Setup Your Upstream

  1. Change directory to the new freeCodeCamp directory (cd freeCodeCamp)
  2. Add a remote to the official freeCodeCamp repo:
$ git remote add upstream https://github.com/freeCodeCamp/freeCodeCamp.git

Congratulations, you now have a local copy of the freeCodeCamp repo!

Maintaining Your Fork

Now that you have a copy of your fork, there is work you will need to do to keep it current.

Rebasing from Upstream

Do this prior to every time you create a branch for a PR:

  1. Make sure you are on the staging branch
$ git status
On branch staging
Your branch is up-to-date with 'origin/staging'.

If your aren't on staging, resolve outstanding files / commits and checkout the staging branch

$ git checkout staging
  1. Do a pull with rebase against upstream
$ git pull --rebase upstream staging

This will pull down all of the changes to the official staging branch, without making an additional commit in your local repo.

  1. (Optional) Force push your updated staging branch to your GitHub fork
$ git push origin staging --force

This will overwrite the staging branch of your fork.

Create a Branch

Before you start working, you will need to create a separate branch specific to the issue / feature you're working on. You will push your work to this branch.

Naming Your Branch

Name the branch something like fix/xxx or feature/xxx where xxx is a short description of the changes or feature you are attempting to add. For example fix/email-login would be a branch where you fix something specific to email login.

Adding Your Branch

To create a branch on your local machine (and switch to this branch):

$ git checkout -b [name_of_your_new_branch]

and to push to GitHub:

$ git push origin [name_of_your_new_branch]

If you need more help with branching, take a look at this.

Set Up Linting

You should have ESLint running in your editor, and it will highlight anything doesn't conform to freeCodeCamp's JavaScript Style Guide (you can find a summary of those rules here).

Please do not ignore any linting errors, as they are meant to help you and to ensure a clean and simple code base.

Set Up MailHog

To be able to create a user and log into your development copy, you need to set up MailHog. MailHog is a local SMTP mail server that will catch the emails your freeCodeCamp instance is sending. How you install and run MailHog is dependent upon your OS.

macOS

Here is how to set up MailHog on macOS with Homebrew:

brew install mailhog
brew services start mailhog

Windows

Download the latest MailHog version from MailHog's official repository. Click on the link for your Windows version (32 or 64 bit) and .exe file will be downloaded to your computer.

Once it finishes downloading, click on the file. You will probably get a Windows firewall notification where you will have to allow access to MailHog. Once you do, a standard Windows command line prompt will open with MailHog already running.

To close MailHog, close the command prompt. To run it again, click on the same .exe file. You don't need to download a new one.

Linux

First install Go.

For Debian-based systems like Ubuntu and Linux Mint, run:

sudo apt-get install golang

For CentOS, Fedora, Red Hat Linux, and other RPM-based systems, run:

sudo dnf install golang

Or:

sudo yum install golang

Set the path for Go:

echo "export GOPATH=$HOME/go" >> ~/.profile
echo 'export PATH=$PATH:/usr/local/go/bin:$GOPATH/bin' >> ~/.profile
source ~/.profile

Then install and run MailHog:

go get github.com/mailhog/MailHog
sudo cp /home/$(whoami)/go/bin/MailHog /usr/local/bin/mailhog
mailhog

Using MailHog

Once you have installed MailHog and started it running you need to open your MailHog inbox in your browser, open a new tab or window and navigate to http://localhost:8025. You should now see a screen like below:

MailHog Screenshot 1

When your freeCodeCamp installation sends an email you will see it appear here. Like below:

MailHog Screenshot 2

Open the mail and you should see two tabs where you can view the content - plain text and source. Make sure you are on the plain text tab.

MailHog Screenshot 3

Any links in the email should be clickable.

For any other questions related to MailHog or for instructions on custom configurations, check out the MailHog repository.

Set Up freeCodeCamp

Once you have freeCodeCamp cloned, before you start the application, you first need to install all of the dependencies:

# Install NPM dependencies
npm install

Then you need to add the private environment variables (API Keys):

# Create a copy of the "sample.env" and name it as ".env".
# Populate it with the necessary API keys and secrets:

# macOS / Linux
cp sample.env .env

# Windows
copy sample.env .env

Then edit the .env file and modify the API keys only for services that you will use.

Note: Not all keys are required, to run the app locally, however MONGOHQ_URL is the most important one. Unless you have MongoDB running in a setup different than the defaults, the URL in the sample.env should work fine.

You can leave the other keys as they are. Keep in mind if you want to use more services you'll have to get your own API keys for those services and edit those entries accordingly in the .env file.

Now you will need to start MongoDB, and then seed the database, then you can start the application:

# Start the mongo server in a separate terminal
# On OS X:
mongod

# If you are using Windows, you have to instead specify the full path to the mongod binary
# Make sure to replace 3.4 with the version you have installed
"C:\Program Files\MongoDB\Server\3.4\bin\mongod"

# Initialize freeCodeCamp
# This will seed the database for the first time.
# This command should only be run once.
npm run only-once

# Start the application
npm run develop

Now navigate to your browser and open http://localhost:3000. If the app loads, congratulations – you're all set.

Otherwise, let us know by asking in the Contributors chat room on Gitter. There might be an error in the console of your browser or in Bash / Terminal / Command Line that will help identify the problem.

If the app launches but you are encountering errors with the UI itself, for example if fonts are not being loaded or if the code editor is not displaying properly, you may try the following:

# Remove all installed node modules
rm -rf node_modules

# Reinstall npm packages
npm install

# Seed the database
node seed

# Re-start the application
npm run develop

Setup freeCodeCamp using Docker

Isolated

Use this if you just want to work on freeCodeCamp.

You will need to have docker and docker-compose installed before executing the commands below.

Setup:

docker-compose run --rm freecodecamp npm install
docker-compose run --rm freecodecamp npm run only-once

Run:

docker-compose up

Shared

Use this if you want to work on other services that will run alongside of freeCodeCamp, using the database directly. An example is the open-api project.

docker-compose -f docker-compose.yml -f docker-compose-shared.yml up

Creating a New User

To create a new user, you will need to perform the following steps:

  • run MailHog if you haven't set up yet check set-up-mailhog
  • run npm run develop and navigated to http://localhost:3000
  • Click over the Sign-Up link situated on the right corner of the navigation bar.
  • Write your email over the input and press the button "get a sign in link" this will send an email with the login URL into MailHog.
  • The last step is to check your inbox in MailHog for a new email from "team@freecodecamp.org" click over the URL inside of it you will be redirected and logged in into the app.

Make Changes

This bit is up to you!

How to find the code in the freeCodeCamp codebase to fix/edit

The best way to find out any code you wish to change/add or remove is using the GitHub search bar at the top of the repository page. For example, you could search for a challenge name and the results will display all the files along with line numbers. Then you can proceed to the files and verify this is the area that you were looking forward to edit. Always feel free to reach out to the chat room when you are not certain of any thing specific in the code.

Adding or Editing Challenges

The challenges are stored inside the seed directory (and its various subdirectories).

The seed directory contains all the challenges that appear on the freeCodeCamp learning platform.

For each challenge section, there is a JSON file (fields documented below) containing its name, seed HTML, tests, and so on.

For more about creating challenges, see seed/README and seed/challenge-style-guide.md.

Changes to the seed files

If you made changes to any file in the /seed directory, you then need to stop the server by typing CTRL-C, then you need to run

$ node seed

Then run

$ npm run develop

in order to restart the server and see the changes you just made to the files.

Run The Test Suite

When you're ready to share your code, run the test suite:

$ npm test

and ensure all tests pass.

Creating a Pull Request

What is a Pull Request?

A pull request (PR) is a method of submitting proposed changes to the freeCodeCamp repo (or any repo, for that matter). You will make changes to copies of the files which make up freeCodeCamp in a personal fork, then apply to have them accepted by freeCodeCamp proper.

Need Help?

freeCodeCamp Issue Mods and staff are on hand to assist with Pull Request related issues in our Contributors chat room.

Important: ALWAYS EDIT ON A BRANCH

Take away only one thing from this document: Never, EVER make edits to the staging branch. ALWAYS make a new branch BEFORE you edit files. This is critical, because if your PR is not accepted, your copy of staging will be forever sullied and the only way to fix it is to delete your fork and re-fork.

Methods

There are two methods of creating a pull request for freeCodeCamp:

  • Editing files on a local clone (recommended)
  • Editing files via the GitHub Interface
Method 1: Editing via your Local Fork (Recommended)

This is the recommended method. Read about How to Setup and Maintain a Local Instance of freeCodeCamp.

  1. Perform the maintenance step of rebasing staging.

  2. Ensure you are on the staging branch using git status:

    $ git status
On branch staging
Your branch is up-to-date with 'origin/staging'.

nothing to commit, working directory clean

  3. If you are not on staging or your working directory is not clean, resolve any outstanding files/commits and checkout staging git checkout staging

  4. Create a branch off of staging with git: git checkout -B branch/name-here Note: Branch naming is important. Use a name like fix/short-fix-description or feature/short-feature-description.

  5. Edit your file(s) locally with the editor of your choice. To edit challenges, you may want to use unpack and repack -- see Unpack and Repack for instructions.

  6. Check your git status to see unstaged files.

  7. Add your edited files: git add path/to/filename.ext You can also do: git add . to add all unstaged files. Take care, though, because you can accidentally add files you don't want added. Review your git status first.

  8. Commit your edits: We have a tool that helps you to make standard commit messages. Execute npm run commit and follow the steps.

  9. Squash your commits if there are more than one.

  10. If you would want to add/remove changes to previous commit, add the files as in Step 5 earlier, and use git commit --amend or git commit --amend --no-edit (for keeping the same commit message).

  11. Push your commits to your GitHub Fork: git push origin branch/name-here

  12. Go to Common Steps

Method 2: Editing via the GitHub Interface

Note: Editing via the GitHub Interface is not recommended, since it is not possible to update your fork via GitHub's interface without deleting and recreating your fork.

Read the Wiki article for further information

Common Steps

  1. Once the edits have been committed, you will be prompted to create a pull request on your fork's GitHub Page.

  2. By default, all pull requests should be against the freeCodeCamp main repo, staging branch. Make sure that your Base Fork is set to freeCodeCamp/freeCodeCamp when raising a Pull Request.

    fork-instructions

  3. Submit a pull request from your branch to freeCodeCamp's staging branch.

  4. In the body of your PR include a more detailed summary of the changes you made and why.

    • If the PR is meant to fix an existing bug/issue then, at the end of your PR's description, append the keyword closes and #xxxx (where xxxx is the issue number). Example: closes #1337. This tells GitHub to close the existing issue, if the PR is merged.

  5. Indicate if you have tested on a local copy of the site or not.

Unpack and Repack

npm run unpack extracts challenges into separate files under seed/unpacked for easier viewing and editing. The files are .gitignored and will not be checked in, and mongo seed importing uses the repacked JSON files inside seed/challenges; this is essentially a tool for editing challenge.json files.

These HTML files are self-contained and run their own tests -- open a browser JS console to see the test results.

Note: These in-browser tests should work for simple JavaScript challenges. But other types of challenges may not fare so well. For HTML challenges, challenge tests assume that the solution HTML is the only HTML on the whole page, so jQuery selectors may select seed and solution elements. For React / Modern JS challenges, we would need to transpile JSX or ES6 before running the tests.

npm run repack gathers up the unpacked/edited HTML files into challenge-block JSON files. After running repack, use git diff to see the changes in your console, and npm run seed to see the changes in your local freeCodeCamp app instance.

When editing the unpacked files, you must only insert or edit lines between comment fences like <!--description--> and <!--end-->. In descriptions, you can insert a paragraph break with <!--break-->.

Unpacked lines that begin with //--JSON: are parsed and inserted verbatim.

If you want to add a challenge, change the order of challenges in a block, or edit the title or any other fields of a challenge, you must do that work inside the main seed JSON file and then re-run unpack.

Challenge Template

{
  "id": "unique identifier (alphanumerical, mongodb id)",
  "title": "Challenge Title",
  "description": [
    "Challenge description.",
    "An new string in the array will create a new paragraph."
  ],
  "releasedOn": "date formatted like: January 1, 2016",
  "challengeSeed": [
    "// code displayed in the editor by default",
    "// a new string in the array is a new line"
  ],
  "solutions": [
    "at least one code solution that passes the tests below, used for automated testing (and inspiration for students)."
  ],
  "tests": [
    "an array of assert tests that check if the user's solution is working",
    "assert(aFunction('argument') === 'result', 'message: This message explains what the test is testing');",
  ],
  "type": "string identifying type of challenge. takes priority for viewType",
  "challengeType": "number identifying type of challenge (step, project, normal). takes priority for submitType",
  "isRequired": "boolean value that indicates whether challenge is required for certificate",
  "translations": {
    "language-code": {
      "title": "The Title in a Different Language",
      "description": [
        "The description in a different language."
      ]
    }
  }
},

see also

How We Review and Merge Pull Requests

freeCodeCamp has a team of volunteer Issue Moderators. These Issue Moderators routinely go through open pull requests in a process called Quality Assurance (QA).

  1. If an Issue Moderator QA's a pull request and confirms that the new code does what it is supposed without seeming to introduce any new bugs, they will comment "LGTM" which means "Looks good to me."

  2. Another Issue Moderator will QA the same pull request. Once they have also confirmed that the new code does what it is supposed to without seeming to introduce any new bugs, they will merge the pull request.

If you would like to apply to join our Issue Moderator team, message @quincylarson with links to 5 of your pull requests that have been accepted and 5 issues where you have helped someone else through commenting or QA'ing.

How We Close Stale Issues

We will close any issues or pull requests that have been inactive for more than 15 days, except those that match the following criteria:

  • bugs that are confirmed
  • pull requests that are waiting on other pull requests to be merged
  • features that are a part of a GitHub project

Next Steps

If your PR is accepted

Once your PR is accepted, you may delete the branch you created to submit it. This keeps your working fork clean.

You can do this with a press of a button on the GitHub PR interface. You can delete the local copy of the branch with: git branch -D branch/to-delete-name

If your PR is rejected

Don't despair! You should receive solid feedback from the Issue Moderators as to why it was rejected and what changes are needed.

Many Pull Requests, especially first Pull Requests, require correction or updating. If you have used the GitHub interface to create your PR, you will need to close your PR, create a new branch, and re-submit.

If you have a local copy of the repo, you can make the requested changes and amend your commit with: git commit --amend This will update your existing commit. When you push it to your fork you will need to do a force push to overwrite your old commit: git push --force

Be sure to post in the PR conversation that you have made the requested changes.

Other Resources