Build and publish your Sitecore JSS dist as an NPM package to GitHub Packages – Part 1

Fellow Sitecorians, I have seen the light. Blazor will forever be the beacon in my life. And with NET 6, Blazor will be AWESOME.

Meanwhile while we are waiting for the NET 6 release, let’s have some fun with GitHub Packages, GitHub Actions and of course Sitecore JSS 🙂

Where you guys aware that GitHub Packages can store several “package” types:

How cool is that! In my previous post, Building and pushing docker images using GitHub Actions for your Sitecore solution, I showed you guys how to build and publish Docker images to GitHub Packages.

Today’s post will be about building your Sitecore JSS dist as an NPM package and publishing it to the GitHub Packages. And we will of course use GitHub Actions 

Let’s get started!

Before we start we need to do some changes to the package.json file.

Change/update name in package.json:

"name": "@myorganization/mywebapp"

*This is needed because GitHub Packages only supports scoped npm packages. Scoped packages have names with the format of @owner/name or @organization/name

Remove the private : true, otherwise we will not be able to publish the package to GitHub Packages. But we still want it to be “private”, so we will add the following:

 "publishConfig": {
    "registry": "https://npm.pkg.github.com/",
    "access": "restricted"
  }

* This means that the package will be restricted and it can only be published to GitHub Packages.

We just want the dist folder(build artifacts), so let’s add the following:

"files": [
    "build"
]

*To build the dist, we will use the command “jss build”. It will create a build folder with all the build artifacts. The “files” in the package.json, decide what should be in the package. In our case, only the build folder and its contents.

Great, the package.json is now updated 🙂

Time for the magic stuff! We will create a workflow file(github action), and put it in .github/workflows in our Sitecore JSS repo.

Here is the full YML file:

name: Build and push dist packages for my website

on:
  push:
    branches: [ test ]
    
  workflow_dispatch:

jobs:
  build-images:
      runs-on: ubuntu-latest
     
      env:
        TOKEN: ${{secrets.GITHUB_TOKEN}}
        CI: true

      steps:
      - name: Checkout my code
        uses: actions/checkout@v2
        
      - name: Create scjssconfig.json
        id: create-json
        uses: jsdaniell/create-json@1.1.2
        with:
          name: "scjssconfig.json"
          json: '{"sitecore":{"apiKey":"API-KEY-JSS-APP}", "layoutServiceHost":"https://mywebsite.localhost", "graphQLApiHost":"http://mywebsite.localhost"}}'
         
      - name: Change name in package.json
        run: echo "`jq '.name="@myorganization/mywebapp_test"' package.json`" > package.json
      - name: read package.json
        run: cat package.json
      
      - name: Update version package.json
        run: echo "`jq '.version="${{ github.run_number }}.0.0"' package.json`" > package.json
      - name: read package.json
        run: cat package.json
      
      - name: Build and push npm package to Github Packages 
        run: | 
          npm config set //npm.pkg.github.com/:_authToken $TOKEN
          npm install
          npm i -l @sitecore-jss/sitecore-jss@15.0.1
          npm run jss build
          npm publish

Let me describe the workflow.

It will execute every time there is a push(in our case, the test branch). It can also be triggered manually

on:
  push:
    branches: [ test ]
    
  workflow_dispatch:

Tell the workflow, what it should run on/in

runs-on: ubuntu-latest

Create environment variable TOKEN, we need it later to authenticate to GitHub Packages. And set the built in variable CI to true. It is default set to true. I just want it to be “visible” in case we need to set it to false. Let say we have warnings but still want the package to be published…

env:
  TOKEN: ${{secrets.GITHUB_TOKEN}}
  CI: true

Next is to check out the code from the repo:

steps:
- name: Checkout my code
  uses: actions/checkout@v2

To build the build artifacts(dist) we will use the JSS CLI command – jss build. But to make it work it needs the scjssconfig.json file, which is excluded from the repo. So we will create the scjssconfig.json file, but only with the “needed” attributes: apiKey, layoutServiceHost, and graphQLApiHost(This is a custom attribute that needs it to get GraphQL working when running JSS SSR PROXY in Docker and Kubernetes. You can read about it in my previous post – Running Sitecore JSS with Node Headless SSR Proxy in Sitecore 10, all in Docker – This is the Way)

- name: Create scjssconfig.json
  id: create-json
  uses: jsdaniell/create-json@1.1.2
  with:
    name: "scjssconfig.json"
    json: '{"sitecore":{"apiKey":"API-KEY-JSS-APP}", "layoutServiceHost":"https://mywebsite.localhost", "graphQLApiHost":"http://mywebsite.localhost"}}'

This part is optional, but let say you have a dev, test and master branch. For each branch, you want to build an npm package, e.g. for the dev branch you want the package name to be mywebapp_dev and so on. In order to do so, you need to update/change the name attribute in package.json. But we don’t want to commit the name change, meaning we will change the name right before we do a build and publish the package. So we will change the name in the package.json, like this:

- name: Change name in package.json
  run: echo "`jq '.name="@myorganization/mywebapp_test"' package.json`" > package.json
- name: read package.json
  run: cat package.json

This is the tricky part, we want to have a version number on the package. But we do not want to commit it, so we can not use the npm version. Instead, we want to set the version number right before building and publishing the package. Notice that we are using the built-in variable github.run_number, it will give a unique number for each run of a particular workflow in a repository. So we will change the version in the package.json, like this:

- name: Update version package.json
  run: echo "`jq '.version="${{ github.run_number }}.0.0"' package.json`" > package.json
- name: read package.json
  run: cat package.json

Here is the building and the publishing of the npm package. First, we need to get access to the GitHub Packages. To build we are using the Sitecore JSS CLI command – jss build. We need to install it and then we do the jss build, which will create the build artifacts(dist) and put them in a build folder. And lastly, we will publish the package to the GitHub Packages.

- name: Build and push npm package to Github Packages 
  run: | 
    npm config set //npm.pkg.github.com/:_authToken $TOKEN
    npm install
    npm i -l @sitecore-jss/sitecore-jss@15.0.1
    npm run jss build
    npm publish

The end result… Houston we have a package 🙂

I really like this. I see great potential in using GitHub Packages. There will be a second post, where we will use the npm package to build(and push) an image. It will of course be automated by using the lovely Github Actions, please stay tuned!

That’s all for now folks 🙂


One thought on “Build and publish your Sitecore JSS dist as an NPM package to GitHub Packages – Part 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.