Made withReactClip

React + Django Integration Tutorial | Hello World App

D

Dennis Ivy

Creator on the React channel

Watch on YouTube ↗

274K viewsJan 13, 202011:01 runtime

Learn how to integrate a React frontend with a Django backend within a single project. This tutorial walks you through the complete setup for a simple "Hello World" application, establishing a solid foundation for more complex apps. You'll see how to use Django to handle the…

Chapters

#react#clip#frontend

Project Goal

Integrate a React frontend and a Django backend within the same project, where Django serves the compiled React application.

Core Integration Steps

1. Project Structure

First, create a Django project and a React app. Then, move the entire React app folder into the root directory of the Django project.

django_project/
├── react_app/         # <-- Your create-react-app folder
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   └── package.json
├── django_project/    # <-- Your Django configuration folder
│   ├── settings.py
│   └── urls.py
└── manage.py

2. Django Configuration (`settings.py`)

Two key settings must be updated in your Django project's settings.py to make Django aware of the React build output.

Templates

Tell Django where to find the main index.html file generated by React.

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

Static Files

Tell Django where to find React's compiled static assets like CSS and JavaScript.

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

3. URL Configuration (`urls.py`)

Use Django's generic TemplateView to render the index.html file as the main entry point for your application.

from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    # ... other urls
    path('', TemplateView.as_view(template_name='index.html')),
]

Development Workflow

Important
After making any changes to your React application's source code (in the src folder), you must run the build command again for the changes to be reflected when served by Django.
# Navigate to your react_app directory
cd react_app/

# Run the build command
npm run build

Source Code Notes

Note
If you are cloning the project from a Git repository, the build/ and node_modules/ directories will likely be excluded (via .gitignore). You will need to generate them yourself by running npm install followed by npm run build inside the react_app directory.

Introduction & Initial Setup

Hey guys, so in this video I'm gonna show you how we can integrate a Django and React app within the same project. So Django will handle everything on the back end while React takes care of everything on the front end. So we're just gonna build a simple hello world app and show you how that integration works.

Right now we'll just render out a template, but in another video we will actually build off of this and build a full-fledged to-do app with the REST API where we'll handle all that CRUD operation. So there's just gonna be a better idea of how all this works and just a little bit more advanced.

So for now, what we're gonna do is just run this npx create-react-app command and we're gonna set this up on our desktop and then drag this into a Django project that we built here. So I just ran django-admin startproject and that's it. So if you look here, we have no apps, there's no integration, so we're starting fresh. We're just going to bring in React here and start our server.

So I have two command prompts open. One I have my Django app which I'm cd'd into, and we'll just call it todo even though this is a hello world app. And in the other, I'm just cd'd into my desktop. So from here let's just go ahead and run npx create-react-app. And there's many ways to do this, but I'm choosing just a simple version because this is just an integration video, so we're just trying to get it set up and started. So we'll just go ahead and call it react-app. Let's just try that, see if it lets us do that. And give it a minute, it's gonna run some installs and once this is done, I'll probably just fast forward this, and we'll go ahead and throw this into our Django project.

Structuring the Project Directory

Okay, so that just set up our React project and that should be somewhere within our desktop. So let's go ahead and just close that out here and go ahead and find the app somewhere here. So just move all these files down and here we go. So I think it's in react-app right here. So there's our React app and here is our Django project.

What we're gonna do is actually just drag the React app into the Django root directory. So if I open up my project here, we're gonna see the React app appear within it. So that's the todo app. And just give it a second to move that in. And what we're gonna have to do is actually go ahead and cd again into that React app, and now within the Django project. So there's our React app and everything checked out. So there's all of our files.

I'll just go ahead and make this full screen, and it's sitting again right within the root directory of our Django app. So in our command prompt, let's go ahead and cd into that. So now we're gonna do desktop todo and then react-app. And then let's go ahead and just run build right now. So this command and get everything prepped. So npm run build and get everything set up for our template. Okay, so that should be taken care of. I think that ran... npm run build, that needs to be a space there.

Configuring Django to Find React Templates

Okay, so we just ran that build and that should give us this folder within React. So what we need to do is connect two things: we need to connect our template and then the React static assets.

So in here, in build, we need to connect to this index.html file. So that's just a compiled React code. So first what we're gonna do is actually go into our Django templates directory, and we're gonna give Django another area to look for templates. So in here, we're just gonna create another list item and give Django another option to find our templates. So we're gonna do os.path.join and this is gonna be BASE_DIR. And I'm assuming you already know Django and React at this point, this is just the integration, so I won't go into too much detail on what this is. But we're gonna do BASE_DIR and then our React app is called, simply as a string, react-app/build. And that'll give us access to this folder here, and index.html sits right here.

Setting Up URL Routing for the React App

So now that we can use this template, what we need to do is actually connect this into our urls.py file. So within our root directory in our Django project, first we're gonna run an import, and we just want to use a class-based view here that just allows us to render a template without actually calling a view.

So we're going to import from django.views.generic import TemplateView. So TemplateView Capital V there. And we're just gonna create the path. And what we're gonna do is allow the base URL to be our Django app, so we're just gonna set that as empty there. And we'll just do TemplateView, and because this is a class-based view, we're gonna do .as_view() and then we're just going to give it the name of the template that we want to find. So we're gonna do template_name, so it's template_name and that's going to be equal to that index.html.

And what's happening here is... make sure that's right... and I need to be a string there. What did I mess up here? Oh, I put a quote around template. Okay, so what's happening here is because we included this path right here into our React project, into this build folder right here, we're able to set a file path just to render out this template, so this built template every time we run that run build command, so index.html.

Configuring Django for React's Static Files

So if we set that up and now connect our static files. So we also want to connect to static and then all those React static files. We need to make one more configuration down here. So down in our settings.py file, we're gonna do STATICFILES_DIRS. So staticfiles_dirs and that's gonna be equal to just a list there. And here we're gonna copy, instead of writing it out again just because I'm a really slow typer when I'm talking, we're just gonna do this os.path and paste that in and change up one little thing there.

So instead of react-app/build, we're gonna do react-app/build and then we want to go into this file here, so /static. So now we know to get all the static files here. So right now our Django project, if we open it up, I believe it'll just be... it'll give us an error at this point if I run my server. So let's go ahead and open up our todo app. And if I run the server... okay, so it gives us that default app, but if I make some changes it's gonna give me... it won't show our changes right now.

So this actually covers that configuration process. What I'm gonna do now is actually just work within that React app and render out some template data, but the configuration is done.

Modifying and Rebuilding the React App

Every time we go into our Django app or our React app, so let's actually go ahead and try that, we're gonna have to run run build. And I'll just show you what I mean by that.

So if I open up within React, and that is within source and we'll just work within App.js. And I'm gonna turn on the syntax of Babel, make sure that's all cleaned up. And if I take this out, and I'm actually gonna copy and paste my own code here. So give me a second, I'm gonna drag this in from another project here. So I'm gonna copy and paste just within our app wrapper here. And what we're doing is throwing in one more center column, and that's what you saw in that preview, and then just three bars here. So those are gonna be those to-do items.

So if I save this, and I actually need to also update my App.css file within React, and I'll just go ahead and remove all of this and paste that in. So you can copy this from my source code or just write that out, it's not too much. So if I refresh my Django app, it's not gonna work. I'm assuming you know this if you know React. We just have to run build again. So npm run build. And if I refresh this in a second we should see what I showed you in that demo. Okay, so that build just ran, and there we go. There's our static data with our styled app.

Complete Project Recap

Let's go ahead and recap everything. So I started off the video with a Django project set up. All I did was just ran django-admin startproject. Then I went ahead and ran create-react-app, put those into a folder next to each other out here. So within my desktop, I just opened up two, or created two apps side by side, dragged in our React app into our Django app, so this todo app.

Once we were in here, I went ahead and ran those builds. So we wanted to make sure we had this folder. And within settings, we wanted to make sure Django could find that React template. So within our templates right here, not actually added this in templates, within that DIRS list right here, we just created a file path to our React app and to that build file, so build right here, which stores index.html.

Once we did that, all I had to do was go to our URL path and get the view that just allows us to render a template. We find that template because we can find it right here. And the last thing we had to do was connect our static files. So in STATICFILES_DIRS we wanted Django to find the static files within the build folder and within static, which is right here, static, and all of these.

So that's all it takes to configure a Django-React app. It's not much harder than that. If you're going through the customizations and setting everything up yourself, there's different ways of doing this. Sure, the steps are gonna be a little different, but if you're just trying to get started, this is all it takes. So in the next video—this isn't gonna be a series necessarily—but I will build a to-do app based off of this. So make sure you're watching that and make sure you're subscribed if you want to see that.

Important Note on Source Code

So a really quick note. I was just about to start editing this, but once you download the source code, if you are working with my source code, I will exclude in the GitHub repository this build file and this node_modules file. So make sure to run this build, and also you might have to start your own React app and just drag it in here because there are too many files for me to throw up on GitHub. So this will be missing. So make sure you have both of these and properly set it up. So you might again just have to set up your own React app and follow along. It's going to be kind of hard to drag that in if you're completely new with React.