Project Configuration

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

Please ensure your system has the following installations:

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

Create a new folder for your project like so:

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

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

Let’s also configure Git.

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

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

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.

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

Enter the following command on 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.

Let’s now 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 so that people who want to contribute to your project can easily access it.

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:

Let’s now push the local Git repository upstream.

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

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

The next step is to set up the project with TypeScript. So, let’s do that now.

Install TypeScript as a dev-dependency:

The command above tells NPM to install typescript as your package’s dev-dependency.

So, now that you’ve installed TypeScript, we can 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.
• 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.