Gemini CLI Tutorial #3 - Making Code Changes

Key Takeaways

All right then, my friends. In the last lesson, we made a Gemini markdown file which can now be used by the Gemini CLI as additional instructions and context whenever we ask it to do something like make code changes or new components or whatever else. And that's what we're going to do in this lesson. We're going to ask it to make a new simple UI component. And that component is going to be a card component. So, if we look on the homepage and scroll down a little bit, we can see these three cards right here for the site features. and then three more cards below that for some popular food combos. And all of this template code is currently written directly in the homepage component where the template gets repeated for each one. Now, I think it would be better in this case to make either one or two reusable card components where we define the template once then just reuse that component multiple times in the homepage for these things. And that way we're going to have much less code duplication. So in this lesson we're going to ask Gemini to do that for us. Okay. Okay, so before we begin, I want to say that I've already switched to a new branch to work on called Gemini/Card. And that way, if things go south, I can just delete the branch and return to the main one, which remains untouched. And this is something I always do when I'm using AI to generate code and work on my project because then I'm just keeping my main codebase safe. Also, I've created a new components folder inside the app folder, so I can tell Gemini to make any new UI components in there. So, the current template for all the cards is currently in the index page component inside this pages folder. And if you open that up and scroll down a bit, you're going to see a bunch of feature cards. And if you scroll down even more, you're going to see a bunch of combo cards. So, these are the things I want to extract into separate UI components so we don't have a load of duplication in this file. And then those components can be used here instead. So then I'm going to keep this file open so it automatically gets added to the session context when I ask Gemini to make this component and that way it can see directly what template needs to be extracted and replaced. But I am going to close this file tree down and come back to the chat window in this other side panel. And then I'm just going to paste in a prompt so you don't have to watch me type this all out from scratch. And it says in the homepage there's currently three feature cards and three combo cards. Can you extract the templates or styles of these two types of cards into reusable UI components called feature card and combo card? They should be made in the app components directory. Then update the homepage to use these card components in the places they're needed. So then now let's cross our fingers, hit enter, and see what happens. [music] Okay. And right now you can see it's asking for permission to make a directory. Now, although we auto accepted edits before, we didn't accept this thing right here, which was to make a new directory. So, you can either allow this once or yes, allow always, which is what I'm going to do right now. >> [music] >> All right. So now that's done and you can see it's made two new cards, the feature card and the combo card. And it actually ran tests for those as well. So it did that of its own accord. I didn't ask it to write any test which is sometimes a little bit annoying. Uh but either way it's created tests and it's also created the components. So let's just have a little look at the code now just to make sure that everything looks okay. So this is the homepage and you can see where we used to have the template hardcoded, we've now got these feature cards instead. So that's good. We've got three of those and we've got three combo cards down there. Now if we open up the file tree, we should see those two components right here. So the combo card and that looks pretty much the same as what it was when it was just coded inside the index file. And you can see we're taking these props, the title, description, and tags and we output those right here. Okay, that looks good. And then the other one is the feature card. And this time we're just taking the title and we have that title right there. We have a slot for the icon and also just a generic slot as well. So let's go back to the homepage and have a look how this was done. All right. Yeah. So there is the icon slots and then the rest of the content just gets rendered right here. So that looks pretty good. And I always like to do this. I always like to check the code that the AI model produces because sometimes it's not right. Sometimes I would do something different, but that looks all good to me. So, let's try this out in a browser. All right. So, if we scroll down, then everything looks at first glance to be the same, which is good. That's what we wanted. We didn't want it to do anything fancy, change the styles or the template or anything like that. We just wanted it to extract the template code from the homepage and put it into reusable components. So, I'm pretty happy with that. Okay. So, I'm happy with these changes then. And at this point, I'd make a commit. And if there were no other code changes needed, I might push up this branch and merge it. So I can open the source control panel over here to do that, which is currently listing all the file changes. Then I'll click on this little twinkle icon to let Copilot this time make a commit message for me because I'm super lazy. Once it's done that, I'll make the commit and push this new branch up to my repo. And then after this lesson, offscreen, I might merge that branch and pull down the new code down into my local project. But anyway, that was a simple enough thing to do, right? We got Gemini to pull out the card templates, make new reusable card components with those templates, and then use them in the homepage. Now, a lot of the time I might not be completely happy with the code changes it makes, and I'll either go through a bunch of further prompts and revisions with the CLI or go into the weeds myself and update the code manually. And if things go off track too much, I can just delete the branch and start again. Anyway, we'll be making more code changes as we go through the series. But first, in the next lesson, I want to talk a little bit about commands and settings in the Gemini CLI.