Project Configuration

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

1. Setting Up Your System

Please ensure your system has the following installations:

Git
Node 22.13 (or greater)
NPM 10.9 (or greater)

Use the Git tutorial to install, update, or verify Git on your system.
Use the package manager tutorial to install, update, or verify Node and NPM on your system.

2. Creating a Project Directory

Create a new folder for your project like so:

Figure 1. Command Line

1 mkdir thank-you-tweet-button-001

You may use any name. For example, this guide uses thank-you-tweet-button-001.

Specify a name that is less than or equal to 214 characters.
Use lowercase letters only in the name.
Your package’s name should not contain “js” or “node”.

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

Figure 2. Command Line

1 cd path/to/thank-you-tweet-button-001

3. Creating a package.json File

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

Figure 3. Command Line

1 npm init -y

Let’s also configure Git.

4. Initializing a Git Repository

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

Figure 4. Command Line

1 git init

You now need to specify the files you want Git to ignore.

5. Specifying the Files Git Should Ignore

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

Figure 5. 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 6. .gitignore

1 /node_modules
2 /dist

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

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.”
See the .gitignore file example to learn more about gitignore.

It’s now time to stage and commit your recent changes.

6. Staging and Committing Your Project’s Changes to Git

Enter the following command on your terminal to stage and commit your recent changes.

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

Let’s now configure a remote repository for the project.

7. Configuring a GitHub Remote Repository

Go to the GitHub website and sign in or sign up if you do not have an account.
After signing up for an account, create a home (a repository) in GitHub for your Git repository. (You can use thank-you-tweet-button-001 as the repo’s name or any other name you prefer.)
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 8. Command Line

1 git remote add origin https://github.com/your-username/remote-repo-name.git

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 about creating a GitHub repository.

You can also add the remote repo to your package.json file so that people who want to contribute to your project can easily access it.

Figure 9. 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 10. 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 11. Command Line

1 git add -A && git commit -m "Configure project's remote repo"

Let’s now push the local Git repository upstream.

8. Uploading Your Local Git Directory to the Remote Repo

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

Figure 12. 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.

Refreshing your remote repository’s page should now reflect your upload.

Let’s look at how to write a test case for your package in the next chapter.

Up next

Testing JavaScript Code