Using the Git Pane

The Git pane serves as a powerful tool for effortless code tracking, management, branch navigation, and collaborative work within your workspace.

Getting Started

While you are in your Repl, navigate to the Tools section where you see Console and Shell. Select + sign to add Git into your Tools section.

A pane will open prompting you to initialize a Git Repository. Select Initialize Git Repository to get started.

Connect to GitHub

After initializing the repository, select the gear icon in the upper-right corner.

You will see two commit authors, one pointing to a default generated profile and another pointing to your personal GitHub account.

1. Select the Connect to GitHub button, which opens up a new window for you to login to your GitHub account using your credentials. If you are already logged in, select Configure next to your name.
2. Once you are logged into your GitHub account, navigate to the Repository access section located at the center of the page, choose All repositories and then Save.
3. In your Replit workspace, fill in the GitHub metadata - Repository name, Repository description, choose the privacy setting between Public and Private. Then, select Create Repository on GitHub.
4. Once the repository is created, you will see the Remote field is populated with your GitHub remote URL. You can verify that a repository is created in your GitHub and it is empty.

Go back to your Git pane by selecting the back arrow in the Settings section.

Push your first commit

In your Repl, make modifications to some files and see the modified files appear in the Review Changes section in the Git pane.

note

You can use our Generative AI tool, ask questions and generate code in your file you wish to modify.

Add a commit message in the Message field describing about your change(s).

Select Stage and commit all changes.

Select Push branch as 'origin/main' and your repository will be populated with the files from your Repl.

You will be prompted to confirm your GitHub credentials; you can select Confirm for this session. You will see that your changes are published to your GitHub repository main branch.

Stage and commit all files

To add and commit all changed files to your commit, Provide a commit message and select Stage and commit all changes.

Stage files

To stage a single file, click the "+" icon on the right-hand-side of the specific file. This action is equivalent to running git add <file-name>.

To stage all changed files, select Stage All. This action is equivalent to git add .

Then, select Stage and commit all changes to commit your changes to the branch.

You will see 1 commit to push in the Remote Updates section.

Now, use the Push button to push the changes to your remote repository.

Discard one or all files

To undo the changes for a file, select the discard changes icon located on the right side of the specific file. This action is equivalent to git reset <file>.

To discard the changes from all the files, select Discard All. This action is equivalent to git reset .

caution

This action will reset the file to its state when last tracked by Git. If the file did not exist in the latest version of your branch, the file will be deleted.

Branches

The Git pane allows you to easily create and switch between branches.

Create or switch to a branch

You can create a new branch or even select an existing branch to push your commits.

Select the arrow beside the main branch which opens up a window to search from existing branches or create a new branch with a name of your choice.

1. After creating the new branch, you will be prompted to publish it. Select Publish branch as 'origin/<branch>'.
2. Once published, your new branch is readily available.

Pulling Changes

If you have changes in your remote repository and you wish to pull them to your Replit workspace, you can use the Pull button.

Alternatively, you can use the Sync with Remote button to pull the latest from the remote repository.

If you have uncommitted changes, you can't pull the latest changes from the current branch. Stage and commit those changes first, and then you can pull from your remote repository.

Merge Conflicts

A merge conflict happens when two different sets of code changes try to combine, but they both have edits in the same part of the code. This means you have to manually figure out which changes to keep.

Here is a common example of a merge conflict:

1. John changes line 1 of script.js to console.log("Hi Developers!") and pushes these changes to the main branch.
2. Kevin changes line one of script.js to console.log("Hello Programmers") after John has made his changes.
3. Kevin tries to push his changes to the main branch.
4. A merge conflict occurs because Git isn't sure which changes in the code to keep.

If you try to push your changes during an active merge conflict, you will see a Git error as shown in the screenshot below.

On the other hand, if you try to pull changes when a merge conflict is active, you will see some warnings in the Git UI.

To resolve the merge conflict, you'll need to manually edit the code to make the different changes work together. This means finding the conflicting changes and deciding which ones to keep before you can update your code.

Resolving a Merge Conflict

When a merge conflict arises, the Git Pane shows a warning saying the changes cannot be pushed before resolving the merge conflict. In the upstream section, select the Pull button.

The UI will then highlight the conflicting files.

Navigate to each of the conflicting files. You will see some conflict markers. A typical conflict marker looks like this:

<<<<<<< HEAD
=======
## Overview
>>>>>>> <commitID> (<Conflicting change>)

The Current change is your code and the Incoming change is the conflicting code. You can do three things:

1. Keep your code
2. Keep the incoming change
3. Manually edit the two changes to make the code behave in the desired way

After resolving a conflicted file, you can remove the conflict markers by removing the lines starting with <<<, == and >>> and save the file.

After the conflict has been resolved, select Pull. Now, you will see that the latest changes have been updated in the code and the latest commit is shown in the Commit section.

Your code is now ready to be pushed. Select Push to update the branch with your latest changes.

Your local changes are now in sync with the remote changes.