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

A number of weeks in the past I used to be engaged on placing collectively a slide deck for my discuss at GitHub Universe 2023. I spoke about how you should use Github Copilot in the CLI to enhance your time within the terminal.

I usually use Canva to create my shows however I reaaaly did not need to try this this time round as a result of I get actually anal in regards to the small particulars and I did not need to spend so much of time on design. I needed to concentrate on the content material and the supply.

So after all, [I tweeted (https://twitter.com/itsthatladydev/status/1717737766027514046) 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 cant wait to chat with ya’ll about copilot and how it can help you in the terminal!

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 even try this repo for a full stroll by way of of how you can use actions.

Anyway, so my workflow did not work for just a few causes.

1. I did not allow Github Pages

I did not allow GitHub pages in my repo. I do know, I do know, lol. I used to be so excited to get my slides deployed that I forgot to allow it. So I enabled GitHub pages to make use of actions and tried once more. Nonetheless did not work.

2. The set up of bundle.json failed

I acquired an error stating that my listing couldn’t be discovered.

So my slides are positioned in a folder and never the basis of my repo. I needed to replace the workflow to level to the right folder, so I up to date the command like so:

title: Set up dependencies
run:  cd ../copilot-cli && npm set up

However that also did not work. So I went to copilot and pasted the error message I noticed within the actions logs:

What I really like about that is that it not solely supplied a suggestion on how you can remedy the issue, copilot additionally gave me a little bit of schooling: I did not know that workflows have been ran from the basis of the repo. I assumed they have been ran from .github/workflows listing, so I discovered one thing new.

I up to date my workflow with copilots suggestion and it labored nicely. However then the slidev construct command failed. 😫

3. Slidev construct command failed

Since I had the sooner expertise of forgetting to replace the listing, I knew that I needed to replace the construct command to level to the right listing. I up to date the command like so:

title: Construct
run: slidev construct --base /gh-copilot-cli/copilot-cli/

This goes into the repo after which goes into the folder the place my slides are positioned after which runs the construct command. It failed, so I up to date the command to this:

title: Construct
run: slidev construct --base /copilot-cli/

That is sensible proper? For the reason that workflow is ran from the basis of the repo, I ought to be capable to simply go into the folder the place my slides are positioned and run the construct command. However that failed too.

So, I went to copilot and pasted the error message I noticed within the actions logs:

Oh gotcha, I have to cd copilot-cli then level to /copilot-cli listing. I applied copilot’s suggestion and it ran efficiently! 💃🏼

However then, I acquired one other error. 😫

4. The put up construct command failed – no dist folder discovered

You’d suppose by now I’d’ve discovered my lesson and up to date the command to level to the right listing. However I did not. 😅 When the construct failed once more, I up to date the construct command to this:

makes use of: actions/upload-pages-artifact@v1
    with:
        path: copilot-cli/dist

I used to be like okay that ought to do it, I am pointing to the right listing. However it failed once more. So I went to copilot and pasted the error message I noticed within the actions logs:

That is what I did, hmm 🤔. I went again to my debugging buddy and it prompt the next:

After itemizing the listing contents as prompt, it seems that the dist folder was not being created by the slidev construct command. Here is what the logs confirmed:

Run ls -la copilot-cli
complete 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 elements
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 bundle.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 listing in sight. So after all, I went again to my bestie copilot and pasted the returned listing contents. Here is what it prompt:

I applied copilot’s suggestion and it failed once more. I made a decision to make use of my eagle eyes and comb by way of the Construct logs. Seems, the slidev construct command wasn’t even operating! What?! 😫

…. not solved lol

That was a journey lol. 😂

5. Classes discovered

I discovered just a few issues from this expertise:

1. I have to learn the docs
2. GitHub Copilot is a good debugging buddy
3. I have to learn the docs and pay nearer consideration my information 😅

My slides are nonetheless not deployed LOL however here they are in PDF format!

For those who’ve ever labored with slidev earlier than lemme understand how I can deploy my slides to gh-pages LOL. GitHub Copilot was nonetheless an awesome rubber ducky! 🐥

Blissful coding! 💕
Kedasha