Have templates publish to GitHub packages

[alehechka]

Current Behavior

Currently, npm publish runs yarn prepare script to build the package then deploys to npm for the logged in user.

Desired Behavior

Have an CLI option and config file to be able to also deploy to GitHub packages. This could be wrapped into the prepare script or added as an additional script that will use the config to deploy to GitHub packages instead.

Suggested Solution

Since deploying to GitHub packages requires logging in with GitHub credentials to a different registry and adding a publishConfig to the package.json, it would probably be best to add a new script that will run npm login to the GitHub registry and apply the config credentials. This would also need to edit the package.json to add the publishConfig before running npm publish. Then also do the clean up to remove it so you can later run npm publish with normal login.

Since this would change the user's login to the GitHub registry it would also be a good idea to have the config include their npm credentials so the normal prepare script can log them into npm normally.

Another alternative solution would be to update the GitHub actions to automatically deploy to GitHub packages. (now that I type this I think that would definitely be the route to take since developers can just add the secret token directly to the repo then have it work on all commits to master)

Who does this impact? Who is this for?

This would be useful for all developers because deploying to GitHub packages is becoming increasingly popular.

Describe alternatives you've considered

Currently, I am manually logging in with both npm credentials and publishing to each manually.

[agilgur5]

I think that is currently out-of-scope for TSDX. How, when, and where people publish packages tends to be very different per author and TSDX does not currently have an opinion on that or control your publish in any way.

Maybe in the future TSDX will have an opinionated semantic release style automated publish in the templates, but it does not currently touch publishing

This would be useful for all developers

Most people publish solely to NPM so I think it is only useful to a small proportion of folks

[alehechka]

Created my own GitHub action that can deploy to both when committing to master (with an incremented version)

name: npm-publish
on:
  push:
    branches:
      - master # Change this to your default branch
jobs:
  npm-publish:
    name: npm-publish
    runs-on: ubuntu-latest

    steps:
      # Publish to Node Package Manager
      - name: Checkout Repo
        uses: actions/checkout@main

      - name: Setup Node.js (NPM)
        uses: actions/setup-node@master
        with:
          node-version: '12.x'
          registry-url: 'https://registry.npmjs.org'

      - name: Use cached node_modules
        uses: actions/cache@master
        with:
          path: node_modules
          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            nodeModules-

      - name: Install dependencies
        run: yarn install --frozen-lockfile
        env:
          CI: true

      - name: Update Publish Config
        run: sed -i 's^registry-url^registry.npmjs.org^' package.json

      - name: Publish to NPM
        run: npm publish --access public
        env:
          CI: true
          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

  gpr-publish:
    name: gpr-publish
    runs-on: ubuntu-latest

    steps:
      # Publish to GitHub Package Registry
      - name: Checkout Repo
        uses: actions/checkout@main

      - name: Setup Node.js (GPR)
        uses: actions/setup-node@master
        with:
          node-version: '12.x'
          registry-url: https://npm.pkg.github.com/
          scope: '${{ github.actor }}'

      - name: Use cached node_modules
        uses: actions/cache@master
        with:
          path: node_modules
          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            nodeModules-

      - name: Install dependencies
        run: yarn install --frozen-lockfile
        env:
          CI: true

      - name: Update Publish Config
        run: |
          sed -i 's^registry-url^npm.pkg.github.com/@${{ github.actor }}^' package.json
          cat package.json

      - name: Publish to GitHub Package Registry
        run: npm publish --access public
        env:
          CI: true
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

NOTE: A GitHub secret for NPM_AUTH_TOKEN will need to be added to the repo (the token can be created from your npm account).

Additionally the package.json will need to include this config:

"publishConfig": {
    "registry": "https://registry-url"
  }

[alehechka]

Just wanted to leave another comment and thank you and all the contributors of this project! This made it extremely easy to create a TS (react) npm package! Feel free to point to that above GitHub action config for other developers to use in their own projects.

[AkinAguda]

Just wanted to leave another comment and thank you and all the contributors of this project! This made it extremely easy to create a TS (react) npm package! Feel free to point to that above GitHub action config for other developers to use in their own projects.

Thanks a lot. I modified the action slightly because my username has uppercase characters. So, ${{ github.actor }} would give AkinAguda. The github package registry will not successfully publish a package uppercase character in its scope. So, I modified the action a bit:

name: npm-publish
on:
  push:
    branches:
      - master # Change this to your default branch
jobs:
  npm-publish:
    name: npm-publish
    runs-on: ubuntu-latest

    steps:
      # Publish to Node Package Manager
      - name: Checkout Repo
        uses: actions/checkout@main

      - name: Setup Node.js (NPM)
        uses: actions/setup-node@master
        with:
          node-version: '12.x'
          registry-url: 'https://registry.npmjs.org'

      - name: Use cached node_modules
        uses: actions/cache@master
        with:
          path: node_modules
          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            nodeModules-

      - name: Install dependencies
        run: yarn install --frozen-lockfile
        env:
          CI: true

      - name: Update Publish Config
        run: sed -i 's^registry-url^registry.npmjs.org^' package.json

      - name: Publish to NPM
        run: npm publish --access public
        env:
          CI: true
          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

  gpr-publish:
    name: gpr-publish
    runs-on: ubuntu-latest

    steps:
      # Publish to GitHub Package Registry
      - name: Checkout Repo
        uses: actions/checkout@main

      - name: Store lowercase actor name
        run: |
          echo 'actor_name<<EOF' >> $GITHUB_ENV
          echo ${{ github.actor }} | tr "A-Z" "a-z" >> $GITHUB_ENV
          echo 'EOF' >> $GITHUB_ENV
    
      - name: Store package name
        run: |
          echo 'package_name<<EOF' >> $GITHUB_ENV
          grep -Po '"name": *\K"[^"]*"' package.json | grep -oP '"\K[^"\047]+(?=["\047])' >> $GITHUB_ENV
          echo 'EOF' >> $GITHUB_ENV

      - name: Setup Node.js (GPR)
        uses: actions/setup-node@master
        with:
          node-version: '12.x'
          registry-url: https://npm.pkg.github.com/
          scope: '${{ env.actor_name }}'

      - name: Use cached node_modules
        uses: actions/cache@master
        with:
          path: node_modules
          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            nodeModules-

      - name: Install dependencies
        run: yarn install --frozen-lockfile
        env:
          CI: true

      - name: Update Package Name
        run: |
          sed -i 's,"name": "${{ env.package_name }}","name": "@${{ env.actor_name }}/${{ env.package_name }}",' package.json
          cat package.json

      - name: Update Publish Config
        run: |
          sed -i 's^registry-url^npm.pkg.github.com/@${{ env.actor_name }}^' package.json
          cat package.json

      - name: Publish to GitHub Package Registry
        run: npm publish --access public
        env:
          CI: true
          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}