Alpha Coder

Here’s a dead simple React-Django setup for your next project

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:

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.

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

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

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

1
2
3
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/static'),
]

Step 3: urls.py

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

1
2
3
4
5
6
7
8
9
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.

Need help getting something to work in your project? Try Alpha Coder Support!

Subscribe to the Alpha Coder Newsletter!

Get timely updates on new articles, courses and more from Nicholas Kajoh. Unsubscribe anytime.

Enjoy the content on Alpha Coder? Please buy me a coffee. 😊

Previous post: Naive Bayes

Next post: Deploy your React-Django app on Heroku


comments powered by Disqus