Enable Github Actions with Turbporepo Remote Caching
Github Actions helps to automate the building, testing, and deploying of your applications. We'll configure our actions in the ci.yml file in a new directory called .github/workflows. When that file is configured, we can update our scripts in our package.json to run off of those. We will also need to make/set up our TURBO_TOKEN and our TURBO_TEAM which we will create on Vercel and Github.
[0:00] Instructor : Let's create a new folder that is called .github/workflows. Inside this workflows folder, we're going to create a new file. It is going to be called ci.yml. [0:18] I grabbed all this file from the Turborepo site. Basically, what we care about is this part. What it says is that whenever a pull_request happens and that pull_request is open or it synchronizes, we will run all these steps.
[0:35] Let's go down to the bottom of the file. We see that we are installing dependencies. This is fine. We are building the project. This is fine. We are testing the project. This is a bit different from what we have in our project. Let me save this.
[0:52] Let's change this test to be check. This should be check as well.
[1:00] Let's open the package, JSON file, in the root of the project. Here we are in the scripts. We have a check script. Now let's add the build script. We're going to run turbo run build. With that, whenever we push a PR to GitHub, we will run Install, then we will run Build, and then we will run Check.
[1:27] Let's uncomment this. Now, let's grab these turbo token and turbo team values. In the resale dashboard, let's click Settings. Now let's click Tokens. Let's create a new token. We are going to call this Turbo Token.
[1:42] For the scope, we're going to select full account. For expiration, you can choose whatever you want. I will choose one day because I don't want this token to live longer than that. Let me create the token.
[1:59] Now, let's go to GitHub to your repository. Let's go to Settings. Scroll down a little bit. Go to Secrets. Let's click Actions. We don't have any secret yet. Let's create a new one. This is going to be called Turbo Token. We're going to paste this value here, and we add that secret.
[2:25] Now we're going to add another secret. We're going to call this Turbo Team. Its value is going to be your account name in Purcell, or your team name. To find out what value to use, you can go to settings. Then, in Personal Account Settings, in General, you'll see that you have this username. Let's grab this and paste that here. Let's add the secret. That's all we need.
[2:57] Whenever this runs in GitHub, GitHub is going to inject those values here and here. The idea is that you'll manage your secrets on GitHub. You don't hard-code them here, because that is dangerous.
[3:10] All right. Let's commit this and push it into a new branch. Let's create a PR and see what happens. Now that we have the PR open, let's see the files changed. The first one is the yml file that defined the workflow. The second one is the package.json with the new build script.
[3:35] Let's go back to Conversation. Now, scroll all the way to the bottom. Let's click in the Show all checks button and it will show us everything that happened. We see that we deployed a vitejs application. We deployed the nextjs application.
[3:52] This is the part that I'm most curious about, which is the CI workflow that we just configured. Let's click on details. Its opened that in a new tab. Here we see everything that we configured in our workflow file.
[4:09] Let's zoom in a little bit. Let's click on build. This will open. As you can see, it only took two seconds. We build three applications in just two seconds.
[4:21] Let's scroll down. We see that we have remote caching enabled. We are building three packages. That yes indeed, we hit the cache for the utils:build, we hit the cache for the dashboard:build, and we hit the cache for the blog:build.
[4:41] If we scroll all the way to the bottom, we'll see that everything took only one second and 100 milliseconds. Let's open the check. Same thing. Here we didn't have the cache in the Remote Cache, so it is a cache miss, cache miss, cache miss, cache miss.
When we run utils: [5:00] Build, we see that we got a cache hit. This is because we already build utils and that cache is already in the Remote Cache. We are saving precious time here.
[5:17] Now that we know what happened here, we can be 100 percent sure that our project is not broken. Let's merge this pull request and that's it.
[5:31] To recap, we created a ci.yml file inside a .github folder inside a workflows folder in the root of a project. This enables CI for the whole project. This job is using remote caching, because we have this TURBO_TEAM and TURBO_TOKEN secrets available.
[5:56] We have remote caching enabled because we have TURBO_TOKEN and TURBO_TEAM set up. We have set this up in Vercel. To set up that in Vercel, we have to go to settings, tokens, then we create a token here. With that value, we added it into the repo configuration in the settings, secrets, actions.
[6:19] Here we use that token inside the TURBO_TOKEN environment variable. We set the TURBO_TEAM value to our team name in Vercel. With all that set up, we opened up PR and that PR triggered this GitHub action.
[6:35] If we scroll down a little bit, if we open check, and if we open build, we'll see that remote caching is working because it says remote computation caching enabled. We see that utils build is already in the cache, so we didn't have to run it.
[6:53] The same goes for check. Some things were not on the cache but this one was, so we saved some precious seconds there.