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.
To get your React app started, first run the following line of code in your terminal:
npx create-react-app my-portfolio
To break this down one piece at a time:
npxis a package runner tool that comes with
npm(from version 5.2 and after). Here is a detailed article explaining the difference between running
create-react-apponly creates a front-end build pipeline that can be used with any back-end API.
my-portfoliois the name I've given to this project, so you would just insert the name of your app/project here.
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.
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
src folders, so that the entire app directory looked like this:
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!