Private GitHub Dependencies in React Projects

Include Private GitHub Project as a Dependency

Some of our custom React projects depend on each other. For example, customer-portal depends on react-utility. The way we accomplish this is by pointing the dependency at the repository in GitHub. In the dependencies section of the package.json file, use a GitHub URL instead of a version number.

"dependencies": {

    "@fullcount/react": "github:FullCount-Development/react-utility"

}

The package lock should use an ssh URL pointed at the latest commit of the repository.

"node_modules/@fullcount/react": {

      "version": "1.14.0",

      "resolved": "git+ssh://git@github.com/FullCount-Development/react-utility.git#f1e231c2857868aa20e956fbb0c66bac69039630",

      "peerDependencies": {

          "@mui/material": "^7.1.0",

          "date-fns": "^4.1.0",

          "msw": "^2.8.2",

          "react": "^18.0.0",

          "react-dom": "^18.0.0"

      }

},

GitHub Actions

Dependency Project

For GitHub Actions to be able to use another repository, an SSH key must be shared between the two repositories.

If the repository being included as a dependency does not already have a Deploy Key in GitHub under Settings -> Deploy Keys, create a new one using the following steps.

1. On your local machine, open a command prompt and execute the following, replacing {repo-name} with the name of the dependency repo (ex: react-utility)

   ssh-keygen -C "git@github.com:FullCount-Development/{repo-name}.git"

2. Enter a file in which to save the key or just hit enter to use the default location.
3. When it prompts for a passphrase, hit enter (no passphrase).
4. When it prompts to enter the same passphrase again, hit enter (no passphrase).
5. Open the newly generated .pub file (ex: id_ed25519.pub) and copy the contents.
6. Create a new entry in the Development Team KeePass named GITHUB_{REPO_NAME}_SSH_KEY.
7. Paste the contents of the .pub file (public key) in the Notes section.
8. Under the Advanced tab, select Attach -> Attach Files... and locate the private key file (ex: id_ed25519).
9. Select Open to attach the file.
10. Select OK to close the new entry.
11. Hit Save in KeePass and commit the change to SVN.
12. In the GitHub repository of the dependency, under Settings -> Deploy Keys, select 'add Deploy Key'.
13. Set the 'Title' for the deploy key to {REPO_NAME}_SSH_KEY (ex: REACT_UTILITY_SSH_KEY).
14. Paste the contents of the public key into the 'Key' field.
15. Select 'Add key' to save the new key.

This will be the key that other projects use to consume this project as a dependency.

Adding the private key as a secret to GitHub

Dependent projects will have to provide the private key during the build process. We store these private keys at the account level in GitHub.

1. In the FullCount-Development organization, select the Settings tab.
2. On the left, expand 'Secrets and variables'. Select 'Actions'.
3. Select 'New organization secret'.
4. Name your new secret {REPO_NAME}_SSH_KEY (ex: REACT_UTILITY_SSH_KEY).
5. Paste the contents of the private key into the Value field.
6. Select 'Add secret' to save the new secret.

Dependent Project

When consuming another project as a dependency, you will need the SSH private key. These keys are stored at the account level. If the key does not yet exist, follow steps 

1. In the workflow main.yml file for the project, add the new secret to the list of SSH keys.

      - uses: webfactory/ssh-agent@v0.9.0

         with:

              ssh-private-key: |

                   ${{ secrets.REACT_UTILITY_SSH_KEY }}

                   ${{ secrets.REACT_COMPONENTS_SSH_KEY }}

                   ${{ secrets.{REPO_NAME}_SSH_KEY }}

2. Commit the change to the main.yml file, this should automatically kick off a new build.

Relevant Documentation

• https://stackoverflow.com/questions/28728665/how-to-use-private-github-repo-as-npm-dependency
• https://github.com/marketplace/actions/webfactory-ssh-agent