Initializing the Project

# Initializing the Project

# Creating the Code Repository

Next, let's initialize the project. First, we'll go to GitHub to create a repo, fill in the repo name, and write a README with a brief project description.

Typically when initializing a project, we need to configure a bunch of things, such as package.json, .editorconfig, .gitignore, etc., as well as build tools like rollup and webpack along with their configurations.

When writing a project with TypeScript, we also need to configure the TypeScript compilation settings file tsconfig.json and the tslint.json file.

All these configurations can be overwhelming for anyone wanting to start a project from scratch. It would be great if there were a scaffolding tool to generate these initial files for us. Fortunately, such a tool exists -- let us introduce our star: TypeScript library starter.

# TypeScript library starter

It is an open-source scaffolding tool for developing TypeScript base libraries that can help us quickly initialize a TypeScript project. You can visit its official site (opens new window) to learn more and use it.

# Usage

git clone https://github.com/alexjoverm/typescript-library-starter.git ts-axios
cd ts-axios

npm install

1
2
3
4

First, clone the project code into our ts-axios directory via git clone, then run npm install to install dependencies and name the project ts-axios.

After installing dependencies, let's preview the project's directory structure.

# Directory Structure

The directory structure generated by TypeScript library starter is as follows:

├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── code-of-conduct.md
├── node_modules
├── package-lock.json
├── package.json
├── rollup.config.ts // rollup configuration file
├── src // source code directory
├── test // test directory
├── tools // scripts and tools for publishing to GitHub Pages and npm
├── tsconfig.json // TypeScript compilation configuration
└── tslint.json // TypeScript lint file

1
2
3
4
5
6
7
8
9
10
11
12
13

# Integrated Tools

Projects created with TypeScript library starter integrate many excellent open-source tools:

Uses RollupJS (opens new window) to help us bundle the code.
Uses Prettier (opens new window) and TSLint (opens new window) to help format code and ensure consistent code style.
Uses TypeDoc (opens new window) to automatically generate documentation and deploy it to GitHub Pages.
Uses Jest (opens new window) for unit testing.
Uses Commitizen (opens new window) to generate standardized commit messages.
Uses Semantic release (opens new window) to manage versions and releases.
Uses husky (opens new window) to simplify the use of git hooks.
Uses Conventional changelog (opens new window) to automatically generate changelogs from commit messages.

We've listed many tools here -- feel free to click the links to learn more about each one.

# Npm Scripts

TypeScript library starter also configures several npm scripts in package.json. Let's first list the scripts commonly used during development; we'll introduce the rest as we encounter them later.

npm run lint: Uses the TSLint tool to check TypeScript code in the src and test directories for readability, maintainability, and functional errors.
npm start: Runs rollup in watch mode to bundle code.
npm test: Runs jest to execute unit tests.
npm run commit: Runs commitizen to submit formatted git commit messages.
npm run build: Runs rollup to compile and bundle TypeScript code, and runs typedoc to generate documentation.

# Linking to the Remote Branch

The code is now initialized. Next, we need to link the current repository to our remote repository. First, run the following command to check the remote branch:

git remote -v

This won't produce any output because we haven't linked a remote branch yet. Go to GitHub, find the repository URL, and run:

git remote add origin <repository-url>

After linking, the remote is called origin -- this is Git's default name, though you can change it. origin makes it clear it's the remote repository.

Then you can run git remote -v again to verify the link.

# Pulling Code

Run the following command to pull and merge the master branch from the remote repository:

git pull origin master

This will produce an error:

error: The following untracked working tree files would be overwritten by merge:
	README.md
Please move or remove them before you merge.
Aborting

1
2
3
4

This is because typescript library starter also created a README.md during initialization, which conflicts with the remote repository's README.md. Delete the README.md file and run again:

git pull origin master

This time the code is pulled successfully, and a master branch is created locally.

# Pushing Code

Finally, let's push the code. First run:

git add .

to move the files from the working directory to the staging area, then run npm run commit to submit the code. It will ask you several questions in sequence, such as the scope of your changes, a description, whether there are breaking changes, which issues are affected, etc.

After filling in the information, the tool will run git commit and automatically compose a commit message from your answers. Then run the following command to push the code to the remote repository: