Python and Django Full Stack - Have React speak to PostgreSQL

Backend Overview

The most popular way of getting ReactJS to speak to PostgreSQL is using a backend framework that can handle the communication between the two, such as Express.js or Django. 
While the PERN stack (PostgreSQL, Express, React, Node.js) is a popular full-stack solution for building web applications with React and PostgreSQL, the React/Django/PostgreSQL stack is popular for its versatility and ease of use, and is suitable for large-scale web applications that require a solid backend.
In this post, we will work with the Django framework and achieve our objective of having react communicate with PostgreSQL.

ReactJS/Django/PostgreSQL stack

Here's a general overview of how to connect ReactJS, Django, and PostgreSQL to build a full-stack web application:

Setting up the backend:

  • Install Django using pip: pip install django
  • Create a new Django project using the command line: django-admin startproject projectname
  • Create a new Django app within the project: python manage.py startapp appname
  • Install the Django REST framework to create APIs: pip install djangorestframework
  • Add the REST framework to your Django project's INSTALLED_APPS in the settings.py file.
  • Create a model for the data you want to store in the PostgreSQL database. You can do this in the models.py file within your Django app.
  • Migrate the model to the PostgreSQL database: python manage.py makemigrations followed by python manage.py migrate
  • Create views and serializers to handle the incoming data in the backend using the Django REST framework.

Connecting to the PostgreSQL database:

  • Install the psycopg2 library to connect Django to PostgreSQL: pip install psycopg2
  • Update the DATABASES setting in your project's settings.py file to include the details of your PostgreSQL database, such as the name, user, password, host, and port.

Setting up the frontend:

Install ReactJS and create a new React project using the 

Connecting the frontend and backend:

  • Start the Django backend by running the following command in the project directory: python manage.py runserver
  • Start the React frontend by running the following command in the project directory: npm start
In the next post, we will dig deeper into the backend, create models, register them to work with react, and also examine the django interface, which provides us with interactive features to work with the database directly.

Comments

Post a Comment

Popular posts from this blog

Python and PostgreSQL – Creating database, schema, tables and inserting data using python library psycopg2

In this post, we will learn to create a database called 'foodApp' in postgreSQL,a schema called 'foodschm' within the database, a table called 'menu' within the schema, and finally, insert data into the table 'menu'.   Install PostgreSQL from https://www.postgresql.org/download/ .  Install psycopg2 using pip install.  C reate a folder under your working directory. Let's call it 'foodApp'. Inside  'foodApp', create a directory called backend.Next, i nside the folder backend, create the program called main.py with the code as follows: 1.       Import psycopg2  import psycopg2 2.       Define database connection properties and connect to the host. Connect to the default database ‘postgres’ with whatever password you gave it during installation.    Make sure to keep the autocommit to true. Without this, postgresql will throw up a transaction error.  Use the connection object to create a cu...
Read more

Full Stack Web Developer BootCamp. (A course by Jose Portilla on Udemy) - Updated for recent versions of Python and Django

Image
      Welcome to a step by step write up to creating a web application using Python (V3.10) and dJango (v4.1.5). While going through the course by Jose Portilla on Udemy for a full stack web development bootcamp by Jose Portilla, I realised that the course followed much older versions of python and Django. Hence, I noted updated findings and hope that it may help someone chart their path through a bit easily. I am skipping the parts in learning HTML/CSS/JavaScript etc and going straight to Section 16 (Django Level One Basics) of the course.   1.      Install Django using Python pip feature. Command prompt: pip install django 2.      Create your project under your working directory. Let us call it "first_project". Command prompt:   django-admin startproject first_project This command will create the following files under the first_project directory -   asgi.py, settings.py, urls,py and wsgi.py:  ...
Read more