Loading
Current section: nx 20 exercises
lesson

Adding Provenance Support

Everything is now nicely set up and automated to publish from our GitHub repo to an npm registry. However, there's one more thing we can add: provenance support. Provenance support allows users to see where specific releases originated from.

For instance, let's take a look at how the Nx package its

Loading lesson

Transcript

00:00 So everything is now nicely set up and automated to publish from our GitHub repo to an npm registry. There is one little thing that we could add almost as a bonus which is provenance support. Provenance is a way to actually sign your packages and link them to the commit that

00:16 they originated from. So let's have a look for instance at the nxjs package here which is this one and if you scroll down here you can see here the version and it has this neat little sign here this check mark and if you click on it it says build and sign on GitHub actions. Now if you click more details you can see here this banner again and then it links to the source

00:36 commit this specific release has originated from and the actual build file that triggered it as well as some transparency log entries. Now what are the prerequisites such that we can do that as well for our neat little design system package repository. So here are prerequisites always on

00:52 the npm.js docs. You should review here the immutable records and there should be a specific minimum CLI that you're using. I think we should be fine there. Ensure the package is configured with a public repository that matches case sensitive where publishing provenance comes from.

01:10 So this is actually this package and we should add this in here and so I don't believe our package json right now has this field and so if you look in here in fact we don't have one. Now what we should add in here is a new repository entry which you can specify as follows. So it should be type

01:28 git should be our url here and I believe you can even define here a directory which should be package forms. Now this should be happening for all the different packages so let me ask cursor here

01:42 and so this looks actually pretty good. So let's accept all of this and go and verify whether this actually worked and so if you go here on our buttons package json we should have the proper

01:56 packages button which is fine and for forms we already added it so it should be fine as well. Let's make sure we don't have a second one. Same here as well and so let's go ahead and

02:10 here as well we have our slate core works as well and finally for the themes one it works too. So we have the repository configuration satisfied. Now what else do we

02:25 need to do? We need to set up automation with our CI CD provider and so let's go here for github actions. So first of all we need to have an id token right in our publish file here of workflow. So we can have here id token right add some additional permission. We also need to

02:45 make sure we pass the dash dash provenance here. Now another way to do that is actually to provide an environment variable and so if you go here at this level here and define an environment variable that says npm config provenance true this should be automatically be picked up by the nx release

03:03 and so we should be good to go. Let's commit this and push our repo. Let's hit the action button again here. So when it succeeds let's check whether the commit actually happened. So we now have 1.9.0. Let's go to our packages. We should see the reflected here as well. Here we have a few

03:30 seconds ago. Let's go into one of these packages inside and if we now scroll down here we now see that we have the check mark as well and if you go to more details we can see how it is being linked to a specific commit that happened on our repository.