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
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
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 😃))
Use Git with Replit (and 'sync' that with GitHub)
Import and use an existing Git repository from GitHub
Use Git with Replit multiplayer sessions
Use Git with Replit multiplayer sessions (and 'sync' that with GitHub)
Exploring Git
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
code the feature
'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
a Git repository stores a history of code for a project
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
by inviting a person to your repl in a multiplayer session, you give them permission to commit changes
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)
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
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
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?
for example, we created a Git repository for the
my-websiteproject. 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?
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
for example, i am going to add an
h1tag to my html with the contentHello Worldas 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
h1tag...')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
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.mdfile using the GitHub user interfaceafter 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 prependinghttps://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:
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
i hope you found this tutorial useful! happy coding! 😛
g(e)thub