typescript-template

A minimal TypeScript project template for both frontend and backend development.

Features

Start a TypeScript project with best practices
Better developer experience with formatting, linting and fast testing
A good starting point for both frontend and backend development

Usage

Use Github template

Use this template to create your own repo on Github. Run the following commands to start:

npm i -g pnpm  # if you haven't already
pnpm i

Create locally

Also, you can create a local project with this template.

npx degit lem0nle/typescript-template my-ts-project
cd my-ts-project
pnpm i

Develop a library

If you want to further publish your project as a npm library, you may need some manual modifications to this template.

Modify your package.json:

{
  // replace `"private": true` line with these:
  "name": "LIBRARY-NAME",
  "version": "0.1.0",
  "author": "YOUR-NAME-AND-EMAIL",
  "repository": {
    "type": "git",
    "url": "YOUR-GIT-REPOSITORY"
  },
  "type": "module",
  "source": "src/index.ts",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": ["dist/"]
  // other fields...
}

Then you can build and publish your library. We recommend using Parcel to build your project for simplicity:

pnpm i -D parcel
npx parcel build

You can add this to your scripts field in package.json:

{
  "scripts": {
    // ...
    "build": "parcel build",
    "prepublishOnly": "npm run build && npm run test"
  }
}

Release your library manually

Whenever you feel ready, you can publish your package to npmjs.com for public access (tests will be run before publishing automatically):

npm login
npm publish --access=public

After it succeeds, you can tag your release with the version number specified in package.json:

git tag v0.1.0 -m v0.1.0
git push && git push --tags

Automatic release with `semantic-release`

Optionally, you can configure your project to trigger automatic release each time the main branch is updated (pushed or merged). Version numbers will be calculated based on conventional commit messages. Consult semantic-release documentation for more information.

Before you make these changes, make sure you manually published your package at least once as described previously.

Install semantic-release and several plugins:

pnpm i -D semantic-release @semantic-release/changelog @semantic-release/git

Modify package.json:

{
  // ...
  "release": {
    "branches": ["main"],
    "plugins": [
      "@semantic-release/commit-analyzer",
      "@semantic-release/release-notes-generator",
      "@semantic-release/changelog",
      "@semantic-release/npm",
      "@semantic-release/git",
      "@semantic-release/github"
    ]
  }
}

Modify .github/workflows/CI.yaml:

jobs:
  build:
    steps:
      # ...
      - name: Semantic Release
        uses: cycjimmy/semantic-release-action@v2
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

Remember to set NPM_TOKEN in your GitHub repository settings (Settings -> Secrets -> Actions -> New repository secret) before you push these changes.

yxonic/typescript-template