Visions In Code

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:

• Container
• npm
• RubyGems
• Maven
• Docker
• Nuget

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.

"name": "@myorganization/mywebapp"

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

"files": [
    "build"
]

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 🙂