Project Configuration

The following outlines the necessary system and file configurations for creating NPM packages.

Ensure your system includes the following installations:

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

Create a new folder for your project as follows:

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

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

You should also initialize Git at this stage.

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

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

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:

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

Now, stage and commit your recent changes.

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

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.

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:

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

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

Afterward, stage and commit your changes:

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

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:

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

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

Install React and TypeScript as development dependencies:

The command above tells NPM to install react, typescript, and @types/react as your package’s development dependencies.

We installed typescript and @types/react as dev-dependencies because you only need them for your package’s development and testing purposes. Users do not need them in production.

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

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:

Specifying React as a peer dependency tells package managers to check whether the app installing your package includes 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:

After installing React and TypeScript, proceed to configure the TypeScript compiler.

Developers use a tsconfig.json file to specify a project’s root directory and the options the compiler needs to compile the project’s files.

tsconfig.json is the default TypeScript configuration file name, but you may use custom names such as tsconfig.custom.json or codesweetly-type-config.json. This is useful in NPM package development when different configurations are needed for build, test, or IDE purposes.

Navigate to your package’s root directory and create a root configuration file along with four custom configuration files:

• tsconfig.base.json: A base configuration file having universal compiler options that other TypeScript configuration files can inherit through the extends property.
• tsconfig.json: The project’s root configuration file for IDE tools like VSCode to use to provide IntelliSense and error checking while you work.
• tsconfig.test.json: The configuration file containing the compiler options for test libraries, like Jest, to use during tests.
• tsconfig.cjs.json: Used to configure TypeScript to output CommonJS (CJS) Module compilations.
• tsconfig.esm.json: Used to configure TypeScript to output ECMAScript Module (ESM) compilations.

Open the newly created files and add the following configurations:

• compilerOptions: specifies how TypeScript should compile the project.
• jsx: specifies how TypeScript should compile the JSX syntax in .tsx files to plain JavaScript. (The “react-jsx” value means TypeScript should change JSX syntaxes to _jsx calls that are optimized for production. This allows you to use JSX without explicitly including import React from "react" in every file.)
• target tells TypeScript the JavaScript version you want to compile your code into.
• rewriteRelativeImportExtensions: rewrites TypeScript file extensions such as .ts, .tsx, .mts, and .cts in relative import paths to their JavaScript equivalent extensions in output files.
• allowSyntheticDefaultImports tells TypeScript to allow you to declare default imports like import Feature from "package" rather than import * as Feature from "package" when the module you are importing does not have a default export.
• esModuleInterop tells TypeScript to make its compiled code interoperable (compatible) between CommonJS and ES Modules codebases by creating namespace objects for all imports.
• forceConsistentCasingInFileNames tells TypeScript to throw an error when a program tries to reference a file with a casing different from the file’s name. For instance, referencing a codesweetly.ts file with ./CodeSweetly.ts will throw an error.
• noEmitOnError specifies that TypeScript should not emit any compiled code if errors exist in the TypeScript project.
• noImplicitReturns tells TypeScript to issue an error if a function’s code path does not return a value.
• noUnusedLocals tells TypeScript to issue an error if a codebase contains unused local variables.
• noUnusedParameters tells TypeScript to issue an error if a function has unused parameters.
• removeComments tells TypeScript to remove all comments when transpiling TypeScript files to JavaScript.
• skipLibCheck specifies that TypeScript should not type-check declaration (.d.ts) files.
• strict tells TypeScript to use “strict mode” to type-check your codebase.

• extends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.
• module: specifies that TypeScript should use the file’s extension or the type field in the nearest package.json file to determine the syntax of the compiled file (.mts or modules for ESM output and .cts or commonjs for CJS output).
• moduleResolution: tells TypeScript to use the latest Node.js module resolution strategy to resolve (locate) the modules you import into your TypeScript files.
• noEmit: tells TypeScript not to output any file. It should only type check and report errors.

• extends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.
• module: specifies that TypeScript should use the CommonJS module syntax in the compiled file.
• moduleResolution: tells TypeScript to use the standard (loose) Node.js module resolution strategy of versions greater than 10 to resolve (locate) the modules you import into your TypeScript files. This lets the resolver find files automatically, even when the imports lack file extensions.
• noEmit: tells TypeScript not to output any file. It should only type check and report errors.
• isolatedModules: tells TypeScript to transpile each file at a time rather than perform cross-file analysis. This prevents program-wide module resolution conflicts by ensuring TypeScript just transpiles the file and leaves Jest to resolve the module import statements.

• extends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.
• module: specifies that TypeScript should use the CommonJS module syntax in the compiled file.
• moduleResolution: tells TypeScript to use the standard (loose) Node.js module resolution strategy of versions greater than 10 to resolve (locate) the modules you import into your TypeScript files. This lets the resolver find files automatically, even when the imports lack file extensions.
• outDir: tells TypeScript to emit its CommonJS transpiled files into the dist/cjs folder.
• declaration: prevents TypeScript from generating d.ts type declaration files.

• extends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.
• module: specifies that TypeScript should use the ES2020 module syntax in the compiled file.
• moduleResolution: tells TypeScript to use the bundler-compatible module resolution strategy to resolve (locate) the modules you import into your TypeScript files. The bundler mode is best for frontend libraries that bundlers like Vite, Webpack, and Rollup will consume.
• outDir: tells TypeScript to emit its ECMAScript Module (ESM) transpiled files into the dist/esm folder.
• declaration: tells TypeScript to generate d.ts type declaration files from your package’s TypeScript and JavaScript files.
• declarationDir: tells TypeScript to emit its d.ts type declaration files into the dist/esm folder.

Stage and commit your changes:

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