Use @semantic to release package to NPM and publish docs to gh-pages automatically

default.md

Describe how to release package to NPM and publish gh-pages according to your commits automatically.

#awef

1. Install requisite dependencies

# run local scripts for executing ts file for deploying docs
npm i -D @types/node
npm i -D ts-node

# semantic-release and plugin for attaching version number to package.json
npm i -D semantic-release
npm i -D @semantic-release/git

# git hooks and validate commit messages
npm i -D husky
npm i -D @commitlint/cli

2. Add content to package.json

{
  "scripts": {
    "deploy-docs": "ts-node tools/gh-pages-publish.ts",
    "semantic-release": "semantic-release"
  },
  "files": [
    "dist"
  ],
  // if package scoped like @bndynet/ui, by default private, so...
  "publishConfig": {
    "access": "public"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

3. New file .releaserc (Release Configurations)

{
    "branch": "master",
    "prepare": [
        "@semantic-release/npm",
        {
            "path": "@semantic-release/git",
            "assets": [
                "package.json",
                "package-lock.json"
            ],
        "message": "chore(release): ${nextRelease.version} by CI\n\n${nextRelease.notes}"
        }
    ],
    "plugins": [
        "@semantic-release/commit-analyzer",
        "@semantic-release/release-notes-generator",
        "@semantic-release/npm",
        "@semantic-release/github",
        "@semantic-release/git"
    ]
}

4. New file .travis.yml (CI configurations for publishing docs and releasing package)

language: node_js
cache:
  directories:
    - ~/.npm
notifications:
  email: false
node_js:
  - '10'
script:
  - npm run build
after_success:
  - if [ "$TRAVIS_BRANCH" = "master" -a "$TRAVIS_PULL_REQUEST" = "false" ]; then npm run deploy-docs; fi
  - if [ "$TRAVIS_BRANCH" = "master" -a "$TRAVIS_PULL_REQUEST" = "false" ]; then npm run semantic-release; fi
branches:
  except:
    - /^v\d+\.\d+\.\d+$/

5. New file tools/gh-pages-publish.ts (Scripts to upload docs to gh-pages branch)

import { cd, exec, echo, touch } from "shelljs";
import { readFileSync } from "fs";
import { parse } from "url";

let repoUrl
let pkg = JSON.parse(readFileSync("package.json"))
if (typeof pkg.repository === "object") {
  if (!pkg.repository.hasOwnProperty("url")) {
    throw new Error("URL does not exist in repository section")
  }
  repoUrl = pkg.repository.url
} else {
  repoUrl = pkg.repository
}

let parsedUrl = parse(repoUrl)
let repository = (parsedUrl.host || "") + (parsedUrl.path || "")
let ghToken = process.env.GH_TOKEN

echo("Deploying docs!!!")
cd("docs")
touch(".nojekyll")
exec("git init")
exec("git add .")
exec('git config user.name "Bendy Zhang"')
exec('git config user.email "zb@bndy.net"')
exec('git commit -m "docs(docs): update gh-pages"')
exec(
  `git push --force --quiet "https://${ghToken}@${repository}" master:gh-pages`
)
echo("Docs deployed!!")

6. Add environment variables to CI (Travis CI)

• GH_TOKEN or GITHUB_TOKEN: your token generated in GitHub and has repo scopes
• NPM_TOKEN: your token generated in NPM