Project Configuration

Below is the required system and file configurations for creating NPM packages.

1. Set Up Your System

Ensure your system has the following installations:

  • Git
  • Node 22.13 (or greater)
  • NPM 10.9 (or greater)
An icon of a key1
  • Refer to the Git tutorial to install, update, or verify Git on your system.
  • See the package manager tutorial for steps to install, update, or verify Node and NPM.

2. Create a Project Directory

Create a new folder for your project as follows:

Figure 1. Command Line
1 mkdir thank-you-tweet-button-001
An icon of a info-circle1

You may use any name. For example, this tutorial uses thank-you-tweet-button-001.
An icon of a key1
  • Choose a name with 214 characters or fewer.
  • Use only lowercase letters in your project name.
  • Do not include “js” or “node” in your package name.

Afterward, navigate to your project directory using the command line:

Figure 2. The Syntax to Change to a Different Directory
1 cd path/to/thank-you-tweet-button-001

3. Create a package.json File

Use NPM to initialize a package.json file for your project.

Figure 3. Command Line
1 npm init -y

4. Configure the Project as an ES Module NPM Package

This guide uses ES Modules in all JavaScript files, so add a "type": "module" field to your project’s package.json file.

Figure 4. package.json: Set up package as an ES Module library (line 5)
1 {
2   "scripts": {
3     "test": "echo \"Error: no test specified\" && exit 1"
4   },
5   "type": "module"
6 }

You should also initialize Git at this stage.

5. Initialize a Git Repository

Create a .git repo in your project’s root directory:

Figure 5. Command Line
1 git init

6. Specify the Files Git Should Ignore

Create a .gitignore file in your project’s root directory:

Figure 6. Command Line
1 touch .gitignore

Afterward, open the newly created .gitignore file and write the names of the files, folders, or file types you want Git to ignore.

Here’s an example:

Figure 7. .gitignore
1 /node_modules
2 /dist

The snippet above instructs Git to ignore tracking the current directory’s node_modules and dist folders.

An icon of a info-circle1
  • A current directory is the folder in which you are currently working.
  • A current directory is sometimes called a “current working directory (CWD)” or “working directory.”

Now, stage and commit your recent changes.

7. Stage and Commit Your Project’s Changes to Git

Run the following command in your terminal to stage and commit your recent changes.

Figure 8. Command Line
1 git add -A && git commit -m "Initialize project using CodeSweetly's guide"

The command above tells Git to stage and commit all modified and untracked files in the project.

Next, configure a remote repository for the project.

8. Configure a GitHub Remote Repository

  1. Go to the GitHub website and sign in or create an account if you do not have one.
  2. After signing in, create a new GitHub repository. You may use thank-you-tweet-button-001 or another name of your choice.
  3. Once you’ve created a remote repository for your package, link your project’s .git directory (located locally on your system) with the remote repository on GitHub. To connect to the remote repository, go to your package’s root directory via your local terminal and run the git remote add command. Here’s the syntax:
Figure 9. Command Line
1 git remote add origin https://github.com/your-username/remote-repo-name.git
An icon of a info-circle1
  • Replace your-username in the code above with your GitHub username. Likewise, replace remote-repo-name with your remote repository’s name.
  • See GitHub Docs to learn more on creating a GitHub repository.

You can also add the remote repo to your package.json file for easy access to people who want to contribute to your project.

Figure 10. package.json: Add repository field (line 4-7)
 1 {
 2   "name": "thank-you-tweet-button-001",
 3   "version": "1.0.0",
 4   "repository": {
 5     "type": "git",
 6     "url": "https://github.com/your-username/app-repo-name.git"
 7   },
 8   "scripts": {
 9     "test": "echo \"Error: no test specified\" && exit 1"
10   }
11 }

Let’s provide the remote repo’s issues URL as the package’s bug tracker. And an email people can use to report issues:

Figure 11. package.json: Add bugs field (line 8-11)
 1 {
 2   "name": "thank-you-tweet-button-001",
 3   "version": "1.0.0",
 4   "repository": {
 5     "type": "git",
 6     "url": "https://github.com/your-username/app-repo-name.git"
 7   },
 8   "bugs": {
 9     "url": "https://github.com/your-username/app-repo-name/issues",
10     "email": "your-project-email@host.com"
11   },
12   "scripts": {
13     "test": "echo \"Error: no test specified\" && exit 1"
14   }
15 }

Afterward, stage and commit your changes:

Figure 12. Command Line
1 git add -A && git commit -m "Create repository and bugs fields"

Next, push your local Git repository to the remote repository.

9. Push Your Local Git Directory to the Remote Repo

After successfully connecting your local directory to the remote repository, you can begin pushing (uploading) your local project to the remote repository. Here’s how:

Figure 13. Command Line
1 git push -u origin main

The command above instructs Git to push your local main branch’s .git directory to the remote origin branch on GitHub.

An icon of a info-circle1

If you refresh the main page of your remote repository, you should see your upload.

Now it’s time to set up your project with React.

10. Install React

Install React as a development dependency

Figure 14. Command Line
1 npm i -D react@19.2.4

The command above tells NPM to install react as your package’s development dependency.

An icon of a info-circle1
  • The react package is a library containing React’s core functionality for creating React components.
  • i is the shorthand notation for install.
  • The -D flag is the shorthand notation for --save-dev.

You may wonder why React is installed as a development dependency if users need it in production. The following explains the reasoning.

Why Install React as a Package’s Dev-Dependency?

Installing React as a development dependency prevents users from being required to download React when installing your package.

React requires only one copy of the react package per project. Therefore, specifying React as a dev-dependency prevents users from having to download React when installing your package. If their project already has a React copy, they wouldn’t need to install another one.

One thing to note: your package will only work in projects that already have React installed. But there’s a good workaround:

  • Duplicate the "react" property from your package.json "devDependencies" field into the "peerDependencies" field as shown:
Figure 15. package.json: Add peerDependencies field (line 5-7)
1 {
2   "devDependencies": {
3     "react": "^19.2.4"
4   },
5   "peerDependencies": {
6     "react": "^19.2.4"
7   }
8 }

Specifying React as a peer-dependency tells package managers to check whether the app installing your package contains the listed peerDependencies. If so, the application has the dependencies your package needs to work.

If the package manager cannot find the peerDependencies, some NPM versions (such as 7 and 11) will install them automatically. Other versions (such as 3-6) will display a warning that informs the user to install the dependencies manually.

Stage and commit your changes:

Figure 16. Command Line
1 git add -A && git commit -m "Install react"

After configuring the project, continue to the next chapter to learn how to write a test case for your component.

Up next

Testing React Component