⏲️ Est. time to complete: 60 min. ⏲️
Today you will learn how to:
- Create a new branch in your project
- How to change the title and it's color of your App
- Test your changes in your codespace
- Commit & push your changes
- Open a pull request & merge it
- Create a new branch in your project
- Change the title and its color of your App
- Test your changes in your codespace
- Commit & push your changes
- Open a pull request and merge it
Go to your repository on GitHub. Click on the "main" dropdown and type in the name of your new branch (e.g., Update-title-and-color). Click on 'Create branch: update-title-and-color' to create it.
Let's type a few git commands in the terminal to create a new branch.
What is a terminal?
You are probably used to getting things done on your computer by moving your mouse around and clicking on things. There is actually a different way with which you can use your computer: The terminal!\ Instead of moving your mouse you can type a command in the terminal and the computer will execute it. Say, you want to go to a specific folder on your computer - we have a command for that, namely, cd <path-to-your-folder> (cd stands for change directory). There are many other commands that can do many different things. We call the set of all commands and their combinations the Shell Scripting language. You can try them out for yourself, go to the terminal (the little box as shown in the picture) and type help - this will list all the built-in commands. Feel free to play around and give them a try to familiarize yourself with the environment. For some handy common commands you can try: pwd (outputs the path of your current directory, pwd stands for print working directory) and ls (lists all the files in the current repository)
Go back into your codespace and type into the terminal:
git pull
and afterwards:
git checkout update-title-and-color
It should look similar to this:
Congrats! You just created a new branch and switched to it successfully. Now you can start making changes to your code!
Open the file Home.vue from the folder frontend/src/views. On top you find a so called <template> that describes the basic structure of the Home-View. To change the title of your App from Milligram however you like, you need to change the text between the <b-navbar-item> tags.
To change the color we need to add a new attribute to the <b-navbar-item> tag. The attribute is called style and we can set it to color: green to make our title green. You can find a full list of all possible colors here.
- Install recommended extensions when prompted.
- In the terminal, navigate to the frontend folder with
cd frontend - Run
npm installto install node packages. - Build the app with this command -
npm run dev - Click browse to site when it pops up to see the deployed test site, you should now see your changes
- Now, try to change the color of the title to another color of your choice: the color will change automatically in the browser without you having to refresh the page!
if the open in browserpop-up does not show up at the bottom of your window, refresh the page and retry |
Click on the + sign on the upper right of your terminal to create a new one. We do not want to stop our app from running, so we will use a new terminal for the next steps.
After verifying your changes, it's time to commit and push. At first we want to check which files we have changed. Type git status into your terminal and press enter. As we have only made changes in our Home.vue file, we can see that it is marked as modified.
Now first run git add . this will add all changed files to the staging area. Afterwards run git commit -m "Update title and color" to commit your changes. The -m flag is used to add a commit message. It is important to add a meaningful commit message, so that others can understand what you have changed. Afterwards run git push to push your changes to GitHub.
Now go back into your GitHub repository. You should see a message that you have pushed your branch. Click on the Compare & pull request button to open a new pull request.
If this message does not appear, click on the Pull requests tab and then on the New pull request button.
A new window will open. Here you can see your last commit message as a title and have the possibilty to insert a description. Check that you have chosen your own repositories main branch for the merge.
Click on the Create pull request button on the lower left to create a new pull request.
Note Please check that you open the pull request against the main branch of your own repository as shown in the screenshot below!
Another window opens. Here you can review your changes again. Click on Files changed. You can see the changes we have made in the Home.vue file.
Click back on Conversation to see the conversation view. Here you can see the commit message and the description we have added.
Pull requests are a very popular way of working professionally together with other developers on a project to ensure code quality. Usually another person would now review your changes and then (hopefully) accept them and merge them into the main branch. Today we will do this ourselves. Click on the Merge pull request and then Confirm merge button to merge your recent made changes.
If everything went well, you should see a message that your pull request has been merged.
Congratulations! You have successfully made your first changes to your project, learned how professional developers work together and merged them into the main branch.