Almost every time I started up a new project during Flatiron School's (Part-Time) Online Software Engineering Boot Camp program (which I just recently graduated from, woohoo~~~!),
I kept finding myself scanning through Google and Stack Overflow trying to figure out (AGAIN) how to get my local project connected to my GitHub repository. I am uncertain as to why this seemingly simple process would repeatedly escape my memory, stacking on unnecessary stress when I was in project mode.
So! If you happen to be struggling with this step as I had, here is a simple set-up to get your new app (I will be using a React app for this example) connected to GitHub.
Create React App
To get your React app started, first run the following line of code in your terminal:
{% raw %}npx create-react-app my-portfolio
To break this down one piece at a time:
-
npx
is a package runner tool that comes withnpm
(from version 5.2 and after). Here is a detailed article explaining the difference between runningnpx
versusnpm
-
create-react-app
only creates a front-end build pipeline that can be used with any back-end API. -
my-portfolio
is the name I've given to this project, so you would just insert the name of your app/project here.
Connect to GitHub
After the necessary packages are installed, hop on into the newly created app's directory and run the following lines of code in the terminal:
-
git init
(creates a new Git repository) -
git commit -m "First commit"
(takes the staged snapshot and commits it to the project history with the message between the quotation marks) -
git remote add origin <your app's Github repository URL>
(creates a new remote called "origin" located at the url) -
git pull origin master
(may or may not be necessary, but this pulls changes from the locally stored branch origin/master and merges it to the local checked-out branch) -
git push -u origin master
(push the local content to GitHub)
At this point, your project should be visible on your GitHub repository.
Making Changes
Now going back to the files created by create-react-app
, you will notice that it is a bit inflated with content you most likely won't need for your own project. As that was the case for me, I went ahead and deleted several files from the public
and src
folders, so that the entire app directory looked like this:
Much cleaner!
It is good practice to keep track of noteworthy changes so that you can see how your project evolves over time, and to revert changes when encountering a bug. 🐞
Run the following lines of code when noting important changes:
git add .
git commit -m "Description of changes here"
git push -u origin master
You can think of commit
as Git's version of "Save" in a word processing software.
Now, move on and have fun with your project!
Top comments (2)
Be aware the clone of your repo and the CRA both have their own .git which means when you will have a repo inside a repo
and will grossly effect your git commands....and get you confused. I know personally :)
Upon creating the react app, it looks like a .git folder is automatically created. So I can just link it to the repo I create on GitHub, correct?