Appendix 1: Git and GitHub

Search…
Create a GitHub repository for your project. Manage and sync it using Git.
GitHub
​GitHub is a code repository website, which integrates with Git. It allows you to publish your project on the Web, copy (fork and clone) other open source projects and collaborate. To be able to publish your project, make sure you create a user on GitHub (for free, of course).
Creating a GitHub user
If you already have a GitHub user you can skip this step. To create a GitHub user go to GitHub's super-cool sign up page. Fill in the details and make sure to validate your email address.
Creating a new repository for your project
Once you've signed in to GitHub, create a new repository to host your Angular app. (Click on the link here, or on GitHub click on the + sign next to your avatar and select "New repository".) Give your repository a name. It can be the same name as your Angular project, i.e. todo-list or ng-girls-todo-list .
We recommend using lowercase letters in the repository name. Some services that connect to GitHub that you may use later are case sensitive - so it's the best to use lowercase letters in repository name.
Connecting your repository
Give your repository a name
Select whether the repository is private or public. If it's private, you'll be able to add collaborators who can see your code. You can change your decision later. However, a public repository may be forked (duplicated by someone else) and you'll have no control over the forks that were made. This shouldn't stop you from making the repository public, as many projects are. Just make sure not to put any secret keys and codes in the project.
Select whether the repository is private or public
Don't add any templates or files. Click on the button "Create repository".
Don't check any box, just hit the green button
Upload the todo-list project to the repository
You have several options to set up the repository. You have already created the project on your computer, so the relevant option is to push an existing repository from the command line. Copy the commands starting with git (you can click the "copy" button on the right side to copy all the commands) and paste into the terminal that's open in your project folder. (You don't have to paste line by line. You can copy all three lines and paste them. The commands will run one after the other, except the last one where you'll have to hit Enter.)
The commands to connect and push your project to the repository
What do these commands do?
The first command, git remote add origin... connects the project to the GitHub repository you have created. It configures the remote location of the project, so that each time you sync the code (push changes to the remote or pull from it) you don't need to specify the remote explicitly.
The second command, git branch -M main renames the default branch from master to main, since it has become the new standard to name it. 
The third command, git push -u origin main pushes the code from the main branch to the GitHub repository using the configuration of the origin as you have set in the first command. 
Now you can go back to the browser where you have created your repository and refresh it. You will see the files and directories of your project, and below the contents of the README file that was generated by the Angular-CLI. 
Pushing changes to GitHub
Whenever you have finished a feature and the application seems to be working well, it's a good time to commit your changes locally and push them to GitHub to sync the repository. It is usually recommended to work on the code on different branches, then sync them with the main branch. However, for the simplicity of this tutorial you may work directly on the main branch.
Add new files to git - when you create new files, git doesn't include them automatically. You can notice that new files appear in red in the file list in the IDE. Run the following command to add all the files that were created in the project folder and subfolders. (The dot . represents the current location. Alternatively, you can specify a file.)
git add .
This is equivalent to git add --all or git add -A. 
Alternatively, use the IDE to add the files when committing.
Commit the changes - this is like hitting "save" on your project, with the ability to go backward and forward between the commits. (Yes, time traveling!!) This is useful in many ways, one of which is when you discover a new bug and want to go back or compare to a previous version.
You can either run a commit command in the terminal and supply a commit message:
git commit -m "your commit message where you describe what has changed"
Or use your IDE to which supports the commit process. With the IDE you can see which files have changed, select the ones you want to commit or ignore, compare the changes with the last commit, edit the commit message, and more.
Find out how to commit (and generally use git) from your IDE:
​Instructions for VS-Code​
​Instructions for WebStorm (shortcut - Ctrl+K or Command+K)
You can find instructions and conventions for writing good commit messages on the web. For example, https://www.freecodecamp.org/news/a-beginners-guide-to-git-how-to-write-a-good-commit-message/​
Push the changes to GitHub - run the command
git push
(If you're on a new branch, the command will fail with instructions to open a branch of the same name on the remote repository. Just copy-paste the command.) You can also use the IDE to push.
Check out your repository to see the changes!
Pulling changes from GitHub
If changes were made from a different computer (another collaborator, service, or your other computer) and synced to GitHub, you must pull the changes to your local repository before being able to push additional changes to the same branch (main or any branch you're working on). You can also pull changes that were made on different branches and check them out on your computer. Simply run the following command (and hope that there aren't any conflicts to resolve and merge!)
git pull
To work on a separate branch, use the following commands: 
git checkout -b new-branch-name - create a new branch and switch to it
git checkout main - switch back to the main branch (use git checkout to switch to any existing branch)
After committing your changes in the branch, you can push them to GitHub and create a Pull Request. There you'll be able to review the changes, discuss them, comment directly on the code snippets, push additional changes, and finally approve the pull request and merge it to main. Then, sync your local main branch by running git pull.
If you're working in collaboration with other contributors, you may need to merge their work and rebase the commits.
More on Git and GitHub
There are many more features on Git and GitHub. (One of my favorites is git rebase!) As you go forward with your project, and especially collaborate with teammates, you will get to learn more commands and useful workflows.
Workshop: Todo List - Previous
#21: 💪 Enrich the todo-item component
Next - Workshop: Todo List
Appendix 2: 🛰 Deploying your app
Last modified 11mo ago
Copy link
Outline
GitHub
Creating a GitHub user
Creating a new repository for your project
Connecting your repository
Upload the todo-list project to the repository
Pushing changes to GitHub
Pulling changes from GitHub