Django VueJS VueCLI and Django REST FRAMEWORK Integration

Yaduvanshi Nitish Kumar

·

Follow

4 min read

·

Apr 1, 2020

--

1

Listen

Share

As Django and VueJs are evolving day by day and both these frameworks are attracting more developer communities to build SPAs ( Single Page Application) by combining the power of these two frameworks.

Django is the fastest among all the backend frameworks when it comes to JSON transaction. And Vue takes less render cycle to load in comparison to Angular & ReactJS.

I have gone through many blogs and found them confusing at some stage and I was wondering to get these two frameworks integrated easily.

Now I will show you how to get things done in a few simple steps.

1. VueJS configuration to use Django server both in development and production.
2. Django configuration to use VueJS application’s homepage in production.
3. VueJS + Django configuration for serving static files in production.

Create a Django and Vue Application

To create a Django application vue_django run the following commands.

django-admin startproject vue_django

django-admin startproject vue_django #Create a Django Project
cd ./vue_django                      #Go inside the project
vue create frontend                  #Create a Vue Project

Vue Configuration for Development

By default, VueJs runs on port 8080 and Django server runs on port 8000. So our main concern is to serve the VueJs application on the same port as Django’s.

To overcome this problem Vue CLI offers us vue.config.js where we can configure our Vue Application to proxy our API requests to the API server during development. This can be configurable via the devServer.proxy option in vue.config.js.

Now let's add vue.config.js to our Vue application named frontend.

Create a file named vue.config.js inside frontend folder

Now add the following configuration to the file and save it.

module.exports = {
  devServer: {
    proxy: {
        '^/api/':{
                  target:'http://127.0.0.1:8000/api/',
                  ws:false,
          }
     }
   },
   outputDir: './dist/',
   assetsDir: 'static',
}

The above configuration tells the development server to proxy any requests which match ‘^/api/’ to http://127.0.0.1:8000/api/ and we are setting ws i.e WebSocket to false. The property outputDir holds the location of the build files during the production and the assetsDir property holds the location of the static files. And we are required to add these locations into our vue_django/settings.py that we will see later on.

Serving static files in Production (Django configuration)

After creating a basic setup now let's configure the Django to serve Vue Js.Now we will use Django build-in the template and static file support to serve a production Vue application.

To serve static files we need to add the location of the directory in our TEMPLATES array which is located in vue_django/settings.py.

TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
FRONTEND_DIR = os.path.join(BASE_DIR, 'frontend')

Now add, FRONTEND_DIR to TEMPLATES in settings.py.

TEMPLATES =[ 
         {
           .
           .
           'DIRS': [os.path.join(FRONTEND_DIR, 'dist')]
           .
           .
         },
]

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(FRONTEND_DIR, 'dist/static'),
    # os.path.join(BASE_DIR, 'static')
]

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

In the above code, we are adding the WebPack built assets directory, frontend/dist/static to STATICFILES_DIRS and also adding template directory to TEMPLATES.

STATIC_URL is simply the prefix or url that is prepended to your static files and is used by the static method. So, when we have STATIC_URL defined as /static/ , then our users would request static files from /static/file-name. example (a relative URL on your server).

STATICFILES_DIRS stores the locations of allthe directories where our static files are located.

STATIC_ROOT is the directory where all the static files are collected once we are ready to deploy our application for production. Once we are done with all the development we run the command.

MEDIA_URL is also a prefix or url which is prepended to our media files.

MEDIA_ROOT stores all the media files.

py manage.py collectstatic

Now to serve media files add the following to vue_django/urls.py.

urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)if settings.DEBUG:
      urlpatterns += static(settings.STATIC_URL,
      document_root=settings.STATIC_ROOT)

Now we are all set to go, create a model and set up urls, now if we start the Django Application by issuing the command.

py manage.py runserver

We can see the index.html of our Vue Application. Now both the applications are integrated.

This seems to work fine right. But let me tell one thing you will get stuck once again and I will solve that issue in my next post. Can you find the problem? Let me know in the comment box.