There are several reasons why you might not want to have separate code bases for the front and back end of your app. For one, the project becomes more portable since it can live in one repository/folder. Then again, everything can be deployed on just one server.

TL;DR: https://github.com/nicholaskajoh/React-Django.

Here’s a simple setup for creating a React-Django project. With just a few tweaks, you can swap out React for Angular or Vue.js and everything would work fine.

Django

Follow the steps below to setup Django:

• Have Python and pip installed on your computer.
• Install virtualenv and virtualenvwrapper by running pip install virtualenvwrapper.
• Create a virtual environment for the project using mkvirtualenv name-of-virtual-env.
• Run workon name-of-virtual-env to activate the virtual environment.
• Install Django with pip install django.
• Start a django project by running django-admin startproject nameOfProject.
• Change directory to the project root and create a new app with django-admin startapp mynewapp.
• Add mynewapp to installed apps in settings.py.
• Run app with python manage.py runserver.

See the official Django installation guide for more info.

React

We’ll be using Create React App in this setup. Feel free to use your preferred method of/tool for setting up a React project.

• Have Node.js and NPM installed.
• Run npm install -g create-react-app.
• Create a new app with create-react-app name-of-project.
• Copy/cut all the contents of the React app (in name-of-project folder) and paste in the root of the Django project.**
• Run app with npm start from the project root.

Configure

If you followed all the instructions above, you should have both React and Django apps in one folder. See the starred step (**) under the React heading. Good!

The React app is the SPA (Single Page App) while the Django app is the API. Let’s do some config, shall we?

The goal is to expose two sets of urls/routes. One for the SPA (e.g example.com, example.com/home, etc) and the other for the API (e.g example.com/api/posts, example.com/api/post/1, etc).

The React-Django app would be deployed on a Python web server, so we can easily achieve this using Django.

Step 1: build

Run npm run build. This creates a folder named build in the project root containing a production-ready version of the React app.

Step 2: settings.py

Add the build folder to template directories in settings.py so that Django can load /build/index.html as a template.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

TEMPLATES = [
    {
        # ...
        'DIRS': [
            os.path.join(BASE_DIR, 'build')
        ],
        # ...
    }
]

Also add build as a static files directory so that collectstatic can copy the css and js files.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build'),
]

Step 3: urls.py

Add pattern to return /build/index.html in urls.py as follows:

from django.contrib import admin
from django.urls import path, re_path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    # path('api/', include('mynewapp.urls')),
    re_path('.*', TemplateView.as_view(template_name='index.html')),
]

Run Django’s dev server (python manage.py runserver) to test the app.

Angular, Vue.js, etc

As you’ve seen with React, all you need to do is make a build available to Django, then configure Django to handle API requests and React to handle normal web page routes. You can use the same steps to setup Angular, Vue.js etc with Django.

Repo

Check out the code for this tutorial here: https://github.com/nicholaskajoh/React-Django.

Deploy

Deploying the React-Django app is a story for another day. The process largely depends on your hosting environment and workflow. I made a post on deploying it to Heroku.

Last modified on 2023-03-14