AirQo Engineering
AirQo Software Engineering: Developing a React JS website in a Django project.

AirQo Software Engineering: Developing a React JS website in a Django project.

Busigu Faith Daka's photo
Busigu Faith Daka
·

5 min read

Table of contents

Introduction

We all enjoy mixing and matching in our everyday lives, creating blended experiences that add excitement to an entity that seemed to do well on its own. For example, passion juice is so tasty on its own but when it’s mixed with an orange or a mango that taste is enhanced to something richer and fruitier.

When it comes to mixing, the possibilities are endless but not all that’s mixed automatically matches. If you choose to put an iphone screen on a samsung phone then you’ll have successfully mixed but failed to match. At certain crossroads you’ll realise a lot has to be factored in so as to match two entities successfully, and software is no different.

Today, we are not here to learn the entirety of developing web elements using the React JS library or the Django rest framework (please take a look at React JS Docs and Django Docs). We’ll be looking at the initial Django project setup and how the react js website runs.

Operating system: Ubuntu

Github repo: https://github.com/FaithDaka/Django-React-Tutorial

But first, we have to answer certain questions:

1. Why choose Django for a website project?

  • It is an opinionated framework which is an advantage in a collaborative environment because each developer will have to follow a similar implementation style.
  • It is a very robust framework due to its time of life and developer community. Various plugins can be leveraged to create a complex system in a short time frame. And time is a cost that always heads a development lifecycle.
  • It is suited for production in terms of the functions and tools it provides. Therefore a move from development to production is easy.
  • It was created with security at its core. The framework takes care of the security aspects for you which secure all that’s encapsulated in it.

2. Why not separate the react project from the Django project?

  • Django has built-in support for static files therefore the website can be integrated as a static file that the Django project loads as its user interface.
  • For a website that requires an administrative dashboard/portal, then Django provides that in a matter of seconds (after configuration). This reduces the time spent in creating a backend as well as a dashboard for content management.
  • Using Django for just the backend would be a waste of a great framework because of how robust it is.

3. How do the two projects co-exist?

The react js website is added as an application in the Django project. The server is configured in the webpack file and an html template is created as the entry point for the server to the react app. Now the two projects know about each other.

To get a better look at this, visit the AirQo website repository.

Now that the initial questions have been answered (to my satisfaction), let’s dive in.

Prerequisites:

  • Python version 3.8+
  • A python packaging tool. (I’ll be using pipenv)
  • Node version 14+

Setting up your application

a) Create a new folder in your preferred location and open that folder in your favorite editor. In the editor’s terminal, load and open your virtual environment using:

$ pipenv shell

Proceed to install the following packages:

$ pipenv install django

$ pipenv install djangorestframework

This sets up your environment to understand Django and the Django rest framework (DRF) terminology.

b) Create a new Django project. In the same terminal, run the command:

$ django-admin startproject {{project_name}} .

The Django project has been created. We can now proceed to create our Django applications; one to handle our database functionality using django and the other to handle our User Interface functionality using the react library.

c) Change the directory to your project directory and run the commands:

$ python manage.py startapp backend

$ python manage.py startapp frontend

Now you should have two folders in your project called ‘backend’ and ‘frontend’. Let’s switch our focus to the frontend folder. Since we won’t be handling any data in the frontend folder, you can proceed to delete the migrations folder as well as the admin and models files.

d) Build a react project i.e create a react app without create-react-app and if you configured your entry points correctly, you should be able to start your react application.

In case you missed the important steps:

npm i — save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin

npm i react react-dom react-router-dom

npm i — save-dev @babel/core @babel/preset-react @babel/runtime @babel/plugin-transform-runtime babel-loader html-loader style-loader css-loader sass-loader node-sass

touch webpack.config.js webpack.fullapp.config.js webpack.dev.config.js

touch .babelrc
  • Setup configurations and scripts. These are part of the important steps as well so you can bullet them.
  • Create the react app files i.e `index.html`, `index.js` and `App.js` in the frontend folder

e) Let’s set up the backend to recognize the frontend. Open settings.py:

  • Add the frontend app to INSTALLED_APPS
  • Add paths to the static files
STATIC_HOST = "http://localhost:8081/"

STATIC_ROOT = os.path.join(BASE_DIR, "static")

STATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/assets/")]

STATIC_URL = STATIC_HOST+'/static/'

f) Create the template django we will use as the entry point for the server. In your frontend folder, create a template folder and open an index.html file:

{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <title>My React App</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="{% static "main.bundle.js" %}"></script>
    </body>
</html>

g) And now we can run the server:

In terminal 1,

$ npm run build  
$ npm run server //runs server script

In terminal 2, with the virtual environment:

$ python manage.py migrate

$ python manage.py collectstatic

$ python manage.py runserver

Route to http://localhost:8000/admin/ to see the portal. Create a superuser in your terminal to be able to sign in.

For more insights make sure to visit the Github repo, star it, and clone it to make your changes.

Conclusion

A lot can be leveraged from learning about the ecosystem of languages and technologies, so make it a point to explore and have fun along the way.

Happy coding! :)

Are you a developer? We invite you to leverage our open-source air quality data API on your app or project. Click here to get started.

Front-end DevelopmentReactDjangoAirQo