How I used GitHub Copilot Chat to debug my deployment workflow 🐥🤖

A few weeks ago I was working on putting together a slide deck for my talk at GitHub Universe 2023. I spoke about how you can use Github Copilot in the CLI to improve your time in the terminal.

I typically use Canva to create my presentations but I reaaaly didn't want to do that this time around because I get really anal about the small details and I didn't want to spend a lot of time on design. I wanted to focus on the content and the delivery.

So of course, I tweeted and someone suggested slidev.

I took a quick gander at it and was quite impresed with the dev experience and built in themes and decided to give it a go. I was able to create the initial draft of my slides pretty quickly and I'm quite happy with the results!

I'm not going to go into the details of how to use it but I'll link to the docs here.

Deploying my slides

So, let's get into the GitHub Actions part. So slidev has a template workflow for deploying your slides to GitHub Pages. I copied the workflow and added it to my repo, pushed to GitHub ad expected magic to happen on the first go. It didn't of course lol.

I ran into a few issues with actions and thought oh, GitHub Copilot is the perfect tool to help me out so I decided to use it to help me debug my workflow.

What is GitHub Actions

If you've never used GitHub actions before, it's essentially a way for you to automate anything in your repos. You can use it to build, test, and deploy your code right from GitHub and you can also use it to automate your project's triage process, label issues, and more.

If you want to learn more about actions, checkout my talk below from Philly ETE Conference this past April.

You can also check out this repo for a full walk through of how to use actions.

Anyway, so my workflow didn't work for a few reasons.

1. I didn't enable Github Pages

I didn't enable GitHub pages in my repo. I know, I know, lol. I was so excited to get my slides deployed that I forgot to enable it. So I enabled GitHub pages to use actions and tried again. Still didn't work.

2. The installation of package.json failed

I received an error stating that my directory could not be found.

So my slides are located in a folder and not the root of my repo. I had to update the workflow to point to the correct folder, so I updated the command like so:

name: Install dependencies
run:  cd ../copilot-cli && npm install

But that still didn't work. So I went to copilot and pasted the error message I saw in the actions logs:

What I love about this is that it not only provided a suggestion on how to solve the problem, copilot also gave me a bit of education: I didn't know that workflows were ran from the root of the repo. I thought they were ran from .github/workflows directory, so I learned something new.

I updated my workflow with copilots suggestion and it worked well. But then the slidev build command failed. 😫

3. Slidev build command failed

Since I had the earlier experience of forgetting to update the directory, I knew that I had to update the build command to point to the correct directory. I updated the command like so:

name: Build
run: slidev build --base /gh-copilot-cli/copilot-cli/

This goes into the repo and then goes into the folder where my slides are located and then runs the build command. It failed, so I updated the command to this:

name: Build
run: slidev build --base /copilot-cli/

That makes sense right? Since the workflow is ran from the root of the repo, I should be able to just go into the folder where my slides are located and run the build command. But that failed too.

So, I went to copilot and pasted the error message I saw in the actions logs:

Oh gotcha, I need to cd copilot-cli then point to /copilot-cli directory. I implemented copilot's suggestion and it ran successfully! 💃🏼

But then, I got another error. 😫

4. The post build command failed - no dist folder found

You would think by now I would've learned my lesson and updated the command to point to the correct directory. But I didn't. 😅 When the build failed again, I updated the build command to this:

uses: actions/upload-pages-artifact@v1
    with:
        path: copilot-cli/dist

I was like ok that should do it, I'm pointing to the correct directory. But it failed again. So I went to copilot and pasted the error message I saw in the actions logs:

That's what I did, hmm 🤔. I went back to my debugging buddy and it suggested the following:

After listing the directory contents as suggested, it turns out that the dist folder was not being created by the slidev build command. Here's what the logs showed:

Run ls -la copilot-cli
total 536
drwxr-xr-x   6 runner docker   4096 Oct 28 16:46 .
drwxr-xr-x   6 runner docker   4096 Oct 28 16:46 ..
-rw-r--r--   1 runner docker     78 Oct 28 16:46 .gitignore
-rw-r--r--   1 runner docker     57 Oct 28 16:46 .npmrc
-rw-r--r--   1 runner docker      9 Oct 28 16:46 .prettierignore
-rw-r--r--   1 runner docker    267 Oct 28 16:46 README.md
drwxr-xr-x   2 runner docker   4096 Oct 28 16:46 components
drwxr-xr-x   2 runner docker   4096 Oct 28 16:46 layouts
-rw-r--r--   1 runner docker    248 Oct 28 16:46 netlify.toml
drwxr-xr-x 467 runner docker  20480 Oct 28 16:46 node_modules
-rw-r--r--   1 runner docker 299331 Oct 28 16:46 package-lock.json
-rw-r--r--   1 runner docker    431 Oct 28 16:46 package.json
drwxr-xr-x   2 runner docker   4096 Oct 28 16:46 pages
-rw-r--r--   1 runner docker 166229 Oct 28 16:46 pnpm-lock.yaml
-rw-r--r--   1 runner docker   7616 Oct 28 16:46 slides.md
-rw-r--r--   1 runner docker    144 Oct 28 16:46 vercel.json

No dist directory in sight. So of course, I went back to my bestie copilot and pasted the returned directory contents. Here's what it suggested:

I implemented copilot's suggestion and it failed again. I decided to use my eagle eyes and comb through the Build logs. Turns out, the slidev build command wasn't even running! What?! 😫

.... not solved lol

That was a journey lol. 😂

5. Lessons learned

I learned a few things from this experience:

1. I need to read the docs
2. GitHub Copilot is a great debugging buddy
3. I need to read the docs and pay closer attention my files 😅

My slides are still not deployed LOL but here they are in PDF format!

If you've ever worked with slidev before lemme know how I can deploy my slides to gh-pages LOL. GitHub Copilot was still a great rubber ducky! 🐥

Happy coding! 💕
Kedasha