A Comprehensive Guide to Replit's New Git and GitHub Features
h
eankeen (918)

A Comprehensive Guide to Replit's New Git and GitHub Features

recently, Replit has added integrations for Git and GitHub. now, you can interact with Git and GitHub within the same interface you are already used to. sounds cool, huh?

this guide is for people that are new to Git and / or want to learn more about Replit's Git and GitHub integrations. don't worry if you do not know much about Git or if you have not used it before. i will try to explain the topics with as few technical terms as possible

Prerequisites

  • experience using Replit
  • no prior Git experience required
  • a GitHub account (optional)

there are six main sections to this tutorial. if you are new to Git, i would recommend only focussing on sections 1, 2, and 3

  1. Use Git with Replit
    • a. Create a Git repository while using Replit
    • b. Making commits to the Git repository
    • c. Slightly more detailed explanation of Git (for git-newbies (👋 haii welcome 😃))
  2. Use Git with Replit (and 'sync' that with GitHub)
  3. Import and use an existing Git repository from GitHub
  4. Use Git with Replit multiplayer sessions
  5. Use Git with Replit multiplayer sessions (and 'sync' that with GitHub)
  6. Exploring Git
  7. Troubleshooting

1. Use Git with Replit

a. Create a Git repository while using Replit

first, you need to create any type of repl. i will be choosing an 'html, css, js' repl. feel free to follow along, especially if you are new to Git 😜

after you created your repl, there is a icon in the left sidebar you can click on. that pops open the Git repository viewer. in there, click 'Create a git repository'

but what is a Git repository?

a Git repository stores a history of code for your project

for example, we created a Git repository for the my-website project. it stores a history of our code. you, the developer, choose how detailed this history is. right now, the history is not detailed; there is only one commit called ('Initial commit') (see image below)

we can make the history more detailed by making more commits

b. Making commits to the Git repository

but what is a commit?

a commit is a 'snapshot' of the repository at a point in time

the more commits you have, the more 'snapshots' you have. more 'snapshots' makes your repository's history more detailed

let's say i want to add a feature to my repl and commit those changes - it's a two step process

  1. code the feature
  2. 'commit' your changes

for example, i am going to add an h1 tag to my html with the content Hello World

as you can see in the screenshot above, i added the feature. now, let's commit these changes. to commit it, add a commit message where it says 'What did you change?', then click 'commit'. (my commit message is 'feat: added h1 tag...')

once you commit those changes, you will see your history updated with 1 extra commit (see screenshot below)

wow! so now you made a commit! because commits are essentially snapshots of your code, you'll be able to browse back and see what your code exactly looked like at this point in time

c. Slightly more detailed explanation of Git (for git-newbies)

if you are new to git, and you didn't quite catch that, just remember these two things

  1. a Git repository stores a history of code for a project
  2. a commit is a snapshot of the repository at a point in time

let me give an example. when i created the git repository, Replit automatically created a commit called 'Initial commit'. at that point, that was the only commit in my history. once i started adding features, i made a few more commits (you can see all 6 commits below)

if it is still hard to understand, i'd recommend watching the coding train's videos about Git. 😉 Rather than using Replit to interact with the Git repository, he uses GitHub (but his explanations are still useful nevertheless)

one more thing, a Git repository can be stored anywhere. For example, right now, your Git repository is on Replit. Your Git repository can also be on your local computer. Furthermore, your Git repository can be stored in other locations, such as GitHub


above screenshot depicts the history of a Git repository, which has 6 commits

2. Use Git with Replit (and 'sync' that with GitHub)

in my opinion, this is the coolest feature. you can 'sync' your Git repository on Replit with GitHub

to start, first click 'Connect to GitHub'. Follow the steps to authorize Replit access to certain parts of your GitHub account (you will be redirected to the GitHub login page)

once you have authorized Replit to use some of your GitHub information, now you can sync the Git repository that is on Replit with GitHub. hit that same button 'Connect to GitHub', fill in details about your repository, and smack that 'Create GitHub Repository' green button (as in the image below)

boom 💥. now our repository is on GitHub! to view it in GitHub's user interface, click the link as in the image below

after you are redirected to GitHub, you can see all your project files! super cool!

you can even click on '6 commits' (or however many you have) to see the whole history! unsurprisingly, they exactly match what we see on Replit

the really cool thing is that if i edit code on GitHub, i can have those changes 'synced' back to Replit

for example, i am going to create a readme.md file using the GitHub user interface

after i switch back to the Replit website, Replit will tell me that there are changes that need to be 'pulled' from GitHub (GitHub has 1 commit that my Git repository on Replit does not have)

the 'pull' button does exactly that - syncs the change in your code. a more detailed explanation: Git will fetch that 1 extra commit from your Git repository on GitHub, and merge it with your Git repository on Replit. once this happens, your Git repository on Replit will match your Git repository on GitHub

3. Import and use an existing Git repository from GitHub

for a while now, Replit has let you import a Git repository from GitHub. we can use this existing feature to our advantage. first, we will import a fork of kevin roast's asteroids project, make some commits, and then push that to GitHub.

instead of importing kevin roast's repository directly, i am going to import a fork of his repository because i do not have permission to edit kevin roast's repository directly (for when we push changes back to GitHub)

(if you do not have a GitHub account, you can fork kevin roast's repository directly, but you just won't be able to 'push' those changes back to GitHub)

so, fork that repository

then, import the forked repository from within the 'Create a new repl' dialog box. of course, you would want to replace eankeen, with your GitHub username (if the import does not work initially, try prepending https://github.com/)

after you 'Import from GitHub', Replit will automatically clone the repository. once you run the repository, you can see everything works! you can even see that the last commit to the repository was done over 5 years ago! - that is a long time ago 🤓

like we did before, we can make some commits. i am going to replace the asteroid background image with a picture of the moon i found on wikipedia commons like so:

boom! after 'committing and pushing' those changes, everything shows up on GitHub! if you wish, you can view my copy here (if you make your own modifications, make sure to abide by his project's license)

4. Use Git with Replit multiplayer sessions

the new Git integration has pretty good interoperability with multiplayer sessions. you can add a Git repository to a multiplayer session anytime. it behaves as you would expect:

  • all collaborators will be able to see the repository's history (including the email addresses of the people that made commits)
  • all collaborators will be able to commit changes to the repository
  • if a user makes a commit, that commit's email address will be that user's email address they used to make that Replit account

5. Use Git and GitHub with Replit multiplayer sessions (and 'sync' that with GitHub)

if you have a multiplayer session in Repl, and it has a Git repository, and you are pushing / 'syncing' changes to GitHub, it will work best when all contributors have a GitHub account and show up as collaborators to your project on GitHub

let me show you what will happen if a user in your multiplayer session has not been added as a collaborator on GitHub

in the situation below, edwin kofler (eankeen) invited a friend (person b) to his repl in a multiplayer session. edwin's screen is in the screenshot directly below. edwin has a GitHub account and has 'synced' the Git repository with GitHub

'person b' is in the screenshot directly below. they do not have a GitHub account

let's say both users have just collaborated on 'removing all the print statements'. 'person b', who does not have a GitHub account will try to commit and push their changes to GitHub. after doing that, we get this:

as per the image above, Replit tell us that it was 'Unable to connect to the GitHub repository'. more specifically, 'person b' was not able to push his changes to GitHub because he does not have permission to modify edwin's repository (that is on GitHub)

interestingly, 'person b' was still able to commit these changes; however, the commit author is 'edwin kofler', and not 'person b'. to fix this, 'person b' must sign up for a GitHub account, and edwin must add them as a collaborator to the repository on GitHub

so, if you are working with a Git repository connected to GitHub on Replit

6. Exploring Git

i only scratched the surface of git in this tutorial. for example, i did not talk about Git branches at all, even though you can use them from within Replit's user interface (@21natzil shows you how to use it in his tutorial). i will leave looking up more complex Git topics as an exercise to the reader

there is one big thing that might trip up people new to Git, if you are using Replit to code. if you are reading a tutorial online, they may mention something like 'code stored locally on your computer' or 'code on your local computer'. since we are using Replit, you would want to interpret that statement to mean 'code stored on Replit', since you are coding via Replit's website (instead of your physical, local, computer)

7. Troubleshooting

Prevent blocking of command line pushes that expose email

if you created a GitHub account with the email [email protected], github will prevent that email from being published. this ensures that your private email address will never be shown.

if you are following all the above steps, but a blank github repository is still being created, you will need to disable this feature.

for now, we want to disable this feature. in your github email settings, uncheck 'block command line pushes that expose my email'

from my understanding, this issue will be fixed down the road, but for now, use this workaround. i will add that because this is a new feature, there are bound to be bugs, and the behavior may change slightly in the future. if you encounter a bug, report it on their bug page or upvote an existing bug report that matches yours

Troubles with Git repositories in Replit multiplayer sessions connected to GitHub

in short, if you are having trouble integrating Repl multiplayer sessions with Git and GitHub, ensure the following are true for the most optimal experience

  • ensure the Repl actually has a Git repository created for it (see section #1, part 'A' for how to do this)
  • ensure you connected your Git repository on Replit with GitHub (see section #2 for how to do this)
  • all collaborators have a GitHub account
  • all collaborators have their GitHub account with their Replit account (see section #2 for how to do this)
  • all collaborators are actually added as a 'collaborator' on GitHub (see github help and Stack Overflow for how to do this)

i hope you found this tutorial useful! happy coding! 😛

You are viewing a single comment. View All