Render react frontend in Django

Prerequisite: It is assumed that you have a django based application and a react bundle.

We can run both applications separately. You can run a Django based application using any web server of your choice(nginx or apache) with gunicorn and react based application using node/npm. In this approach, you have to set up a web server as well as a node server to deploy the whole application. 

 

Alternatively, You can create a bundle of your react based application. Exported bundle will contain html, css, js and static files(image). You can integrate it in your django application easily and need not to set up a node server running on your server.

Create Django application

It is assumed that you have an existing django project and want to integrate your react frontend in django project. If you didn’t create your django project yet, you can follow Create django project article to do the same(As you are familier to django, this list basic commands and didn’t go in to the deep).

Here are the steps used to integrate your react application in django:

  1. Create Django application to run frontend

    python manage.py startapp 'frontend_web'
    
  2. Render html file
    Create a view in frontend_web/views.py

    from django.shortcuts import render
     
    # Create your views here.
     
    #from django.shortcuts import render, redirect  
    def app(request):
       template = 'frontend_web/index.html'
       return render(request, template)
    

    Create a urls file in frontend_web/urls.py
    nano urls.py

    from django.conf.urls import url
    from .views import *
     
    urlpatterns = [
       url('', app, name='app'),
    ]
    
    

    Enable your app in your project’s settings.py file: You can do it by adding app name under INSTALLED_APPS

    INSTALLED_APPS = [
       'rest_framework', #django rest framework
       'admin.apps.AdminConfig',
       'django.contrib.admin',
       'django.contrib.auth',
       'django.contrib.contenttypes',
       'django.contrib.sessions',
       'django.contrib.messages',
       'django.contrib.staticfiles',
       'frontend_web' #enable your app
     
    ]
    

    Include app urls in project’s urls file:

    from django.contrib import admin
    from django.urls import include, path
    
    urlpatterns = [
       path('admin/', admin.site.urls),
       path('frontend-web/', include('frontend_web.urls')),
    ]
    
    
  3. Place static files in relative directory
    Create static, and templates directories if not exists.

     
    (venv_django) abhishek@work:~/Desktop/django-project$ tree -d -L 3
    .
    ├── core
    │   ├── admin
    │   ├── core
    │   │   └── templates
    │   │       ├── frontend_web
    │   │           └── index.html
    │   ├── frontend_web
    │   ├── static
    │   │   ├── admin
    │   │   ├── frontend_web
    │   │       ├── css
    │   │       ├── js
    │   ├── template
    └── venv
    
    

    Try to run collect static command if you have an issue in accessing static files. 

    When you run the project, there will be no css/js/images in the project. To fix this and to tell the nginx server where is the path to static files, add the following in settings.py file

    STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

    Now run the following command to copy static files to static directory:

    python manage.py collectstatic

    You can set up your project in such a way that you need not to run collectstatic every time when there is any change in static files.

    If you are still unable to access static files, inspect the static file path used in your react application.

    * You can call static files without executing collectstatic command. You can configure nginx to call static files.

  4. Change static file path in index.html
    Load django static file path in your index.html file (include once)

    {% load static %}

    Make changes while you are calling a css/js source as shown below:

    <link href="{% static "frontend_web/static/css/base.css" %}" rel="stylesheet">
    <script src="{% static "frontend_web/static/js/main.js" %}"></script>
    

     

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top
Shares