How to create your own full stack project in the terminal and track using Git.
Hello! I want to show you how you can start a full stack project and utilize Git Hub. There can be a lot of steps and can ne overwhelming, but in time I am sure with the more projects you create the process will get easier!
There will be a lot of steps, but hopefully this will help.
Create Your Local Repo:
First, you will want to cd into the directory where you will have your project in: ex. $ cd Development/code/phase-5
then you want to make a new directory with the name of your project (be descriptive!) $ mkdir diabetic-cookbook-phase-5-project
now that you have created the directory make sure you move into the directory by $ cd diabetic-cookbook-phase-5-project
once you have done that you can initialize your directory as a Git repo (repository) $ git init
you will know that you did it correctly if you see this after pressing enter: Initialized empty Git repository in /home/kxm203/Development/code/phase-5/diabetic-cookbook-phase-5-project/.git/
Create Some Content:
Now that you have created your repo, now it is time to make some content. First thing you want to create is a README.md file because this will be a story to anyone looking at your project (what is the purpose, what would you like it to do, how is the code laid out). There are 2 ways you can do this: 1. From your terminal you can add content to your directory by typing $ touch
README.md
then you can add some content by typing in your console: $ echo "# Diabetic Cookbook" >>
README.md
(this was just an example I used) now you will see this in your vs code by typing $ code .
in your terminal and opening up your README.md file. Or 2. you can open up your vs code and you can create a README.md file by adding a file and name it README.md and then you can add the content you want. Make sure before you move on that there is a README.md in your vs code and that it has the content you just created.
Your Initial Commit:
Now that you added some content, it is time to commit your changes to git. But first you want to check the status of your repo by entering: $ git status
you should see this message:
What this is saying is that you made this file, and Git can see it, but it is not currently tracking, so lets make this trackable by entering in your terminal: $ git add .
followed by $ git commit -m 'Initial commit'
then you will see a message that looks similar to this:
To make sure this worked you can check the status of your repo and should see this message:
Create Your Remote Repo:
Once you completed the work in your terminal you can now go to https://github.com/ and make sure you are signed in. From here you want to create a new repository (by clicking the "+" button in the upper right hand corner on the page. After this you will see a new page with your username and a place you can name your repo (to make things easy try and name it the same way you created the repo in your terminal).
Adding a Remote To Your Local Repo:
After you clicked on Create repository, a new page will pop up with different options to start things moving. In my case I went with option three that looks like this:
Once you run these commands in your terminal, you can make sure things worked by looking at GitHub and going to your new repo and you should be able to see the README.md file you created earlier.
From here on out you will want to commit your work on a regular basis by using these three steps
:
Adding Files to Your VS Code:
So now that you have things set up in GitHub and you local terminal, you can start to add files to your project! Again just as mentioned before you can either add the files by local terminal via the $ touch <your filename.type>
or you can just add the files and name them directly from VS code.
You can also install React by first running $ npm init
which will create a new package.json
file and then you will be able to get React by typing $ npm install react
into your terminal, and now if you look in your package.json
file you should see something like this:
This is just the basics to adding what you need on the front end, and you can always add what you need as you go, but now here is how to make sure the back end programs are working with your code.
You can check to see which version of Python you have by typing $ python --version
into your terminal and it will show you which version you have, in my case I got Python 3.8.13
back in my terminal. So if you have made a file in VS code app.py for example and you have some code you can see the result in your terminal by making sure you are in the directory you need to be in and type $ python <your filename>
and you should see what you need to see. For example in my VS code in app.py I entered print("Hello World!")
and when I was in my terminal I went to my folder server and entered $ python app.py
and I got back: Hello World!
as a response!
To see if you have SQLite3 installed in your terminal you can type $ which sqlite3
and you hopefully will see this return: /usr/bin/sqlite3
if you do not see this there are ways to install SQlite from Homebrew for OSX by typing $ brew install sqlite
and if you are using windows there are a couple more steps:
Also there is a SQLite VS code extension to make it easier to interact with the SQLite databases from VS code by using https://marketplace.visualstudio.com/items?itemName=alexcvzz.vscode-sqlite Lastly the most comprehensive, graphical tool for interacting with the database is installing DB Browser for SQLite for install it by following here: https://sqlitebrowser.org/dl/
From here you can still add files in your VS code, and hopefully from here you can start coding!
I hope this will help you with starting out and I am sure there are other ways that you can startup a repository from scratch, so do whatever you are comfortable with!
Have fun coding!!!
Subscribe to my newsletter
Read articles from Kenny McClelland directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Kenny McClelland
Kenny McClelland
I am a full-time Software Engineering student with Flatiron school, and part-time CSA with Lowe's.