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:
- #1: TODAY: Architecture and application overview
- #2: Changing our Django & React code for Deployment
- #3: Pushing our code to GitHub using Git
- #4: Deploying our Django Backend on Microsoft Azure
- #5: Deploying our React JS Frontend on Microsoft Azure
- #6: Costs of Deployment and Troubleshouting
In this post I will explain the architecture and pre-requisites for deployment, and show you the code we will be deploying!
Architecture of our deployment on Microsoft Azure
The deployment of our Django & React application is displayed below. The local code is on my personal computer, and will be pushes to a GitHub repository using Git. We will be using GitHub to connect our code to the resources on Microsoft Azure.
You can deploy your Django Backend and React JS Frontend in seperate GitHub repositories. In this example I will push them to 1 repository.
On Microsoft Azure we start by creating a resource group, which serves as a container for our services. Our backend and Frontend will be deployed using two different services.
- Backend: We will be using Azure App Services, and we will utilize the web + database option where Microsoft creates a server (App Service) and Azure Database for PostgreSQL for us. Next to that Azure will create a few supporting services such as virtual networks and private links. By using the Web + Database option a lot of configuration will be handled by Azure.
- Frontend: The frontend will be deployed on Azure Static Web App. This is the most populair method to store static files such as HTML, CSS, or JavaScript.
Prerequisites for deployment
You will need the following things to follow along with this tutorial series:
- An Azure Account: You can create an Azure Account for free, and Microsoft will give you 200 dollars of credit to spend which is more than enough to follow along. Unfortunately, you will need to specify credit card details.
- GitHub account: You will need to create a GitHub account which is completely free.
The application we will deploy
In this series we will deploy an application with basic crud functionality. It has a home page with a table, and pages for creating, editing, and deleting records. I have not made any significant changes to the configuration of these apps. The source code is available on GitHub but you also just folllow along with your own application!
Below some specifications of development:
- Code editor: Visual Studio Code
- Python version: 3.8.10
- Django version: 4.2.5
- React version: 18.2.0
The end result and full development of this application is documented on my YouTube channel.
Let’s start the deployment!
With the architecture and prerequisites explained we can get started with the actual deployment. In the next post I will show you the changes we will need to make to our code before the deployment.
