# Notes: Replit + GitHub Integration

### Connecting Replit to Github

Connecting Replit to Github involves installing Replit on GitHub by connecting the GitHub service to Replit, and requesting authorization from GitHub to allow the Replit user to push code to GitHub. &#x20;

Our process starts by writing code.  In order to push this code to GitHub we need create a GitHub repository.  The steps below will connect us to GitHub, create a repository and push the code to GitHub.  We only need to run the step that connect to GitHub the first time we want to push code from Replit.  After that, the connection will be setup and we only need to use the Replit Git User Interface to  authorize the user and create a repository and push code.

This [video](https://youtu.be/iKlMfhc9RJU?si=wkdcFoi85qjTZiIx) will walk you through the Replit+GitHub Integration.

<table><thead><tr><th width="271">Step</th><th width="405">Notes</th></tr></thead><tbody><tr><td>Add a README.md file</td><td>The README markdown file appears on the GitHub website and describes the Repository (this is optional but if you don't do it, GitHub will indicated that you should)</td></tr><tr><td>Connect GitHub Service in Replit and Authorize in GitHub</td><td>Navigate to Account in Replit to find Connected Services</td></tr><tr><td>Authorize Replit Account to add and change code in GitHub Repository</td><td>You will get prompted to Authorize if you have not already done so.</td></tr><tr><td>Create Repository</td><td>You only need to create the repository once per Replit project.</td></tr><tr><td>Commit changes with a message and "Sync with Remote" changes to GitHub from Replit.</td><td>When ever you make a set of changes to your code, you'll click on Sync to move the code into GitHub.</td></tr></tbody></table>

### Step Through Replit/GitHub Integration

Install Replit On GitHub By Registerig it as a Connect Service in your Replit Account.

<figure><img src="https://lh7-us.googleusercontent.com/T0aATqVHHa7x4FiqgTUT7OYpWHQn9ejr3fUeLIMhSRt5fYISoT5xjNnqeUAOd6OuDSB_WaCkitsCfyFlgQTFbJQ9KKrXUqN0N_DQlTK9mCutLIPGKhrAm_5WfcWM0HQ8_E0FDGQdWPftKRntP8G7qSeuYg=nw" alt=""><figcaption><p>GitHub is Connected When Connect Services offers Disconnect Link</p></figcaption></figure>

<figure><img src="https://1895162031-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtpIC9dmT9qEF2T4Gy2eJ%2Fuploads%2FnReGTyHwmQGnwxzysyhB%2Fimage.png?alt=media&#x26;token=f8d7b7ce-098f-455d-917a-fed940e77b64" alt=""><figcaption><p>GitHub will show Replit as an Installed App When Replit Shows GitHub Services Connected</p></figcaption></figure>

#### Create or Open a Repl That is Not Integrated with GitHub&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/6awpe8AEtWEsGQATZkSSUbItIv-86mppzDvuK9ZL50fsPJiTgTkDB961QhSMRveNRrM9J4SLZ_dOGN-4a4O3qVyTHABOJulpavexxxSs_etuwJ_var0lOmBYKYT12fB0inuTWtofGjR5UoKkJ9b007xvBA=nw" alt=""><figcaption><p>Open Git Tab on the Right</p></figcaption></figure>

Check the "Create initial commit with all changes" or you will be prompted later to set up your first commit.

<figure><img src="https://lh7-us.googleusercontent.com/GthiP9vhMdXyTBMiyLfGOghiHwZgRozjBvwDyxjSwlv0rzDmjL0B19YlhfGTACc8KFaA1sqqsiviooMjKQqw_4RsS8UZ6-d5LbPdt6VnUcRlfrOYDSFF7xyGxG5vaoCQGTiVlDT1kFWmK_0TxrPavL7zNA=nw" alt=""><figcaption><p>Click on blue link to go to Git Settings View</p></figcaption></figure>

<div data-full-width="true"><figure><img src="https://1895162031-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtpIC9dmT9qEF2T4Gy2eJ%2Fuploads%2FbOTRjI1WmGtUJVfG27ZS%2Fimage.png?alt=media&#x26;token=6b536053-c19e-4339-9873-bf90839ca9a9" alt=""><figcaption><p>Enter Values for Remote, Repository Name, and Select Default Replit User or Authorize New User</p></figcaption></figure></div>

Click on Create Repository to create a new Repository on GitHub.  Replit needs to know the GitHub account name labeled Remote (<https://github.com/rebeccapeltz1>) and the Repository name (HelloWorld2). &#x20;

Select "Public" for Privacy and then click to create the repository on GitHub.

&#x20;Click the radio button (blue circle) next to Default Profile.  If this is the first time you've created a GitHub repository, this will not exist and you'll have to click on GitHub Settings as shown in the lower commit author to authorize this user.

&#x20;

<figure><img src="https://1895162031-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtpIC9dmT9qEF2T4Gy2eJ%2Fuploads%2FLALLeGHUqPKgkLHSNmdP%2Fimage.png?alt=media&#x26;token=f5122f71-356a-4421-a85c-49f53df385ee" alt=""><figcaption><p>Click on "Create Repository on GitHub" Button</p></figcaption></figure>

A few seconds after you click on the "Create Respository on Github" button, you'll see the green message on the bottom right letting you know that the repository was successfully created.  You can return to the main Git view by clicking on the "<" Settings at the top.

<figure><img src="https://1895162031-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtpIC9dmT9qEF2T4Gy2eJ%2Fuploads%2FvvonMuNsDJbXQwAgZjmJ%2Fimage.png?alt=media&#x26;token=86b5a27f-f911-45d2-a2bb-d7947c6df7c4" alt=""><figcaption><p>Now you can push your code to GitHub.</p></figcaption></figure>

<figure><img src="https://1895162031-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtpIC9dmT9qEF2T4Gy2eJ%2Fuploads%2FrVJ5XX4tN5JJPIUuhiY7%2Fimage.png?alt=media&#x26;token=5907b5ea-b809-458f-a649-68df08213b9d" alt=""><figcaption><p>Cick Confirm to continue to push the code</p></figcaption></figure>

You may get prompted to authorize the push and to sign in to GitHub.

<figure><img src="https://1895162031-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtpIC9dmT9qEF2T4Gy2eJ%2Fuploads%2Fmp6StfM3BWR8WfKvbQs2%2Fimage.png?alt=media&#x26;token=19451cba-fd92-4865-a312-5a10e9ab0b36" alt=""><figcaption><p>You are signing on to GitHub here so use your Github Account Name and Password.</p></figcaption></figure>

Now you can continue modifying code and syncing to GitHub.

<figure><img src="https://lh7-us.googleusercontent.com/3LuvqWEQtznofTi7tgst5SgWkilAtfsYryekaEte_i-sX3Ej_9IZZZ0TPHbyTXqTe5_k8F7fzboH4e7M57qNpruQznCM4FmQSlxbgHAtMOxspxrVRaEf0pderzM6iGo9LnA9Tdc0w_lB7CiZGSxXtEFZyA=nw" alt=""><figcaption><p>Read to sync more code</p></figcaption></figure>

<figure><img src="https://1895162031-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtpIC9dmT9qEF2T4Gy2eJ%2Fuploads%2FMObiEZVFqeAWooxTr6Ya%2Fimage.png?alt=media&#x26;token=4bf7a845-5eed-4283-b40a-ce3fc301c380" alt=""><figcaption><p>This is what the Repository will look like without a README.md</p></figcaption></figure>
