Day 4 - First code changes

The first code changes are an exciting moment, but doing it right has a lot of steps. And we are going to do it right, so here’s what we’ll do:

• Create a local git branch
• Run the app in developer mode
• Change some code
• Check the changes
• Commit the code to the local branch
• Publish the local branch to GitHub
• Create a pull request on GitHub
• Merge the pull request

Create a branch

Git works with branches. Each branch is a history of some code and those branches can split off and merge back together. In a professional project branches are very important so that different people can be working on the same application at the same time. In an solo project it’s less important, all commits can just be to a single main branch. However, let’s do this the proper way, it’ll help in the long run. Open GitHub desktop and you will see that it has a tab that says "Current branch: main". That is a drop down menu that if you open, you’ll see an option for "New branch". Create a new branch and give it a descriptive name. I like to use the format: "feature/a-descriptive-name". The word "feature" is there to show that we are adding a new feature as opposed to "bug" if we are fixing a bug, or "chore" for something boring like updating dependencies.

Editing Next.js 13

Now we are working on a feature branch, let’s change some things and see if we like it. If we do, we can merge it into the main branch and Vercel will deploy it to our main url. Before we make any change let’s run the app in developer mode by opening the VSCode terminal and typing npm run dev and in your browser, go to "localhost:3000" and you’ll see the unchanged app.

In VSCode, on the left hand side is the Explorer. The explorer shows the files and directories in the application. Open the "app" directory and you will see a file called "pages.js" this is the file that Next uses for the home page. Open the file and you will see that it exports a default function called "Home". Inside the "return" statement you’ll see what it returns. The code in there is called jsx, but basically it looks like the html that it will render. I’m not going to introduce html, if you’re unfamiliar, have a look at a few pages from w3schools.com’s html tutorial. I chose a couple of things to change. First, I changed the a <p>tag’s content as per line 9, the highlighted line here:

4export default function Home() {
5  return
6    <main className={styles.main}>
7      <div className={styles.description}>
8        <p>
9          Mike James Rust - a QA's playground
10        </p>

Now look in your browser at your locally running page and you will see that it has been updated.

Back in VSCode, if, like me, you’ve included an apostrophe, you’ll see that VSCode has highlighted it as an error with a with a red underline. Never ignore these errors, they really help. Hover over it and see what it says:

VSCode error

So it’s not happy with me using an apostrophe 'character, I need to replace it with an encoding. I’ve chosen to encode it with ’.

I also decided to change some more text on the cards. I’ve changed the href’s (urls) of the links so that they point to the home page. And I’ve removed one of the cards so that there are 3 instead of 4. You can see all these changes on the GitHub pull request.

Fix the css

The changes in the page.js file are changes to the content and structure of the webpage. But you can see I changed another file, the page.module.css. CSS files are Cascading Style Sheets. These files are used to determine the styles of a webpage, eg. colours, sizes and layouts. This file defines a grid for the cards to be displayed on. The grid has 4 columns, one for each card. But now I have only 3 cards so I have updated it to be 3 like so:

42.grid {
43  display: grid;
44  grid-template-columns: repeat(3, minmax(25%, auto));
45  width: var(--max-width);
46  max-width: 100%;
47}

In fact, I should have also updated the minmax to be (33%, auto), but I missed that at the time. Oh well, bugs happen.

Push the changes

Now you have some changes, check them in your browser and make sure you are happy with them. There’s just a few more steps to getting them deployed to you server on the internet. First go to GitHub desktop, you’ll see that it shows the changes to each file. Quickly check through them and make sure you haven’t included anything by accident. When you are ready, you can "commit" the changes. Create a summary description, I went with "3 column grid and copy changes". Then click the "Commit to ..." button. And your changes have been committed to your local branch. GitHub Desktop will update to show that there are no local changes anymore - you haven’t lost them it’s just that they have been committed to the branch. Instead of the changes it will show you a "Publish branch" button. Click it and this will "push" your changes to GitHub.

Opening a Pull Request

Go to your project in GitHub in your browser, for me that would be https://github.com/ppywmjr/mike-james-rust-personal-site GitHub has detected that you have recently pushed changes and you’ll see a big green button to create a pull request.

GitHub's Compare & pull request button

If you don’t do it immediately and the button isn’t there, you can still go into the "Pull requests" tab and create it with the "New pull request" button.

Add a nice descriptive summary and click the "Create pull request" button. GitHub will check that Vercel successfully built and deployed the app to a test deployment. It should look something like this:

GitHub merge checks

If you are working in a team, you would want someone else to check your work and approve the pull request before merging, but as I am working alone, there is no one to approve. So I clicked the checkbox to "Merge without waiting for requirements to be met (bypass branch protections)". Then I select "Squash and merge". Now GitHub merges the changes to the main branch and Vercel deploys those changes. Amazing! I can now see my changes at the url Vercel deploys to, for me that’s https://mike-james-rust-personal-site.vercel.appAlthough by the time you click this, it will have a changed a lot. So here is a screenshot from the time.

My changes to the Nextjs template app

Although, you know what, actually it didn’t work out so smoothly, in reality I broke the app with the first change!