Data Analyse Breda

Deploying Django & React on Microsoft Azure #3: Push Source Code to GitHub using Git

In this brand new tutorial series we are deploying a full stack web application using Python Django in the Backend and React JS in the Frontend. This series is split in 6 parts:

In todays post we push our GitHub using Git The full project code is available on GitHub. You can find a link to the Youtube video on the bottom of the post.

What are we going to do?

We will push our code to GitHub using Git through 5 steps:

  • Discuss options for deployment.
  • Initialize Git in our local code repository.
  • Creating a GitHub repository.
  • Pushing our code to GitHub.
  • Test and process updates to the code.

To follow along you need to install Git on your computer, and create a GitHub account (which is free).

Options for deployment

For your deployment you have two options:

Option 1: Put our backend and frontend in one GitHub repository. This means that every time we commit, both deployments of backend and frontend are redeployed.

Option 2: Backend and frontend in seperate repositories. Prevents deployment of both frontend or backend when only one is changed. Does mean that you need to create two GitHub repositores and constantly need to commit twice if you make change in backend and frontend.

We go for option 1, since it is a very small application. If different teams or people are developing the backend and frontend I would recommend to split the repositories.

Initialize Git in local code repository

Open a new terminal and make sure that you are in the highest level of your project. We start with a few commands for configuration.

Set the user name:

git config --global "Your Name"

Set the email adress:

git config --global ""

Do two commands with some basic configuration.

git config --global push.default matching
git config --global checkout

Now we can initiate Git!

git init

You will see two changes on your computer. In your project folder in the file explorer you will see a new folder called .git. All of the files will be green with a U, that means that you have Untracked files.

Now we need to add the untracked files to our Git repository. We do that with two commands in the terminal.

Git add .
Git add -am 'initial commit'

Git add selects all files. Git commit takes those files and adds them, and adds a message of initial commit. The message will be visible as a comment on GitHub.

Creating a GitHub repository

Now we create the repository where we want to store the code. Log in on the GitHub site, and click on new repository.

To create a new repository we fill in a repository name (Django React Deploy Tutorial in my case). We add a description and keep the repository on public.

After filling these fields we click on Create repository.

Pushing our code to GitHub

After the creation of our GitHub repository we get the option to push an existing repository from the command line.

Copy that codeblock and run it in your terminal.

If you now refresh the GitHub repository page you will see your code.

Processing updates to GitHub

When you make updates to your code you want to republish the latest version to GitHub. You can do that with three commands.

Adding all files to Git :

git add .

Commit the changes and add a message:

git commit -am "your message"

Push the changes to GitHub:

git push

You will see the updates in the GitHub repository. In this case I added the message: Change to about page.

The YouTube video of this tutorial

Leave a Reply