How to Push XCode Project to Github?

Hello, in this article, we will talk about in detail how an XCode project is pushed to Github.

Note: You will see quite a lot of screenshots in this project. 😃

Let’s go!

1. We open the XCode application and select the blue box below. With this option, the application creates a project for you.

2. Then we have to choose a project template for ourselves.

3. At this stage, we decide the name of our project, the interface, the programming language we will use and extra information. And then we press the “Next” button.

4. Now, XCode asks us where we want to save the project. I generally like to collect all XCode projects under a single folder. It looks more organized. Before clicking the “Create” button, make sure that the “Source Control” box is checked.

5. After completing the steps above, an editor screen opens as below. Since I first chose SwiftUI as the interface, a project with a “Preview” screen is opened. If you have chosen the Storyboard interface, you may face with a different screen. No problem 😃

6. Let’s make some changes in the project now. In this way, we can see how it looks in XCode.

I changed the interface and added the Github and XCode icons to the Assests file. In the screenshot above, I have boxed two fields.

There is an M next to the files in the green box. It comes from the word “Modified”. It states that these files have been modified.

The red box shows which lines have changed in the selected file.

7. It’s time to “push” them to Github. I use the Sourcetree application for these operations and I will explain how to do it with this application in the rest of the article. But you can use the terminal, XCode’s own “Source Control” tab or other applications. After downloading and installing the application, you need to open the “Preferences” screen and open the “Accounts” tab. Now we will add our Github account information.

After selecting the fields as above, you need to enter your Github username and password. At this stage, it sometimes gives an error about the password. To solve this, open your Github page, go to Settings> Developer Settings> Personal Access Tokens and click on the “Generate new token” button. In the new page, enter a name that you choose for token, and check the tiks that you need then click the “Generate Token” button. Copy the code on the screen and paste it into the password field in the screenshot above. You can read it in more detail on this page.

8. Now we need to introduce our existing project to the Sourcetree application.

9. We will choose which project we want to add on the screen that opens.

10. When we click the “Open” button, we will now be able to see the project in our application.

11. After clicking on our project twice, you will see the screen below.

This screen may seem confusing at first, but you will get used to it as you use it and it will make your job very easy.

1. Commit: Shows the number of files you have made changes in the project on the upper right and opens the “Commit” section you have pressed.
2. Pull: Pulls the final version of the “branch” you are in from Github.
3. Push: Sends the “branch” you are in to Github.
4. Fetch: Pulls the final version of all “branches” from Github.
5. Branch: Creates a new “branch” from a “branch” that you choose.
6. Merge: Merges a “branch” that you choose with another “branch”.
7. Stash: Keeps the file you changed. Then you can access those files again.
8. Workspace: The area where you can see the files you have changed and their history.
9. Branches: Lists the current “branches” in your local. The “branch” name in bold is the “branch” you are in.
10. Remotes: Lists existing “branches” on Github.
11. Stashes: You can see the files you have previously stored with the “Stash” button.
12. Displays the files ready to “commit” you have changed.
13. Shows the files that are not ready to “commit” you made changes.
14. Shows the changes you have made to the file you selected. The green ones mean the lines you added, the red ones the lines you deleted.

12. After adding our local project to the Sourcetree application, we now need to create a “Repository” on Github. There is a green “New” button on the left of the Github homepage. When you press it, you will see the screen below. After filling in the fields, click the “Create Repository” button.

13. Make sure that HTTPS is selected on this screen, as we set up Github connection to Sourcetree with HTTPS protocol. Then you can copy the link by clicking the button in the red box on the right.

14. Let’s go back to the Sourcetee app. If you right click on the “Remotes” text on the left, the following options will appear.

15. We paste the link copied from Github into the URL / path section and enter project name.

16. After Github is connected successfully, it comes to this screen.

With this stage, our local project is successfully connected with Github. Now let’s send our first code 🤓

17. After writing our “Commit” message, we are ready to send our code. If you do not select the box marked with the number 1, you will only send your code to your local. If you want it to go to Github, you must choose it.

You will see the screen below while the “Commit” process continues.

When the process is completed successfully, the part of the files we have changed should be emptied.

If you check your Github after these processes, you will see that your code has arrived.

Thank you if you have read so far. I know this is a long post, but I wanted to explain in a detailed manner. I hope it was useful. Take care of yourselves 😃

If you want to read this article in Turkish, you can reach from here.

Resources:

1. https://www.sourcetreeapp.com
2. https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token
3. https://miro.com for editing screenshots and cover image.