Part 1 — How to build a File Manager Storage web app with Django Rest Framework and Vue.js with Vuex and Ag-grid integration Ozgur Yarikkas Follow Mar 10, 2019 · 9 min read

Since beginning of this year, I have been attending an online course. We have a platform that enables us to store and share files collaboratively. I wanted to clone it, so this web application idea was born ✍️

I will guide you step by step to create a File Manager storage web application. we will have a tech stack as Django with DRF, vue.js with webpack and vuex and libraries such as ag-grid, bootstrap, axios etc. 🎬

I broke up this tutorial into two parts. Part one focuses on setting up Django with DRF and Vue.js and making configurations and preparing our REST API in backend. Part two goes over frontend and finishing our application with vue.js, vuex and ag-grid. If you want to have a look at part 2 before diving in, follow the link below:

In the first part of this tutorial we are going to:

Install and setup Django with Django Rest Framework

Install Vue.js and webpack

Configure Django and vue to make them work together

Create a database model in Django

Create an API endpoint with Django Rest Framework

Let’s start coding! I suppose that you have Python 3.6+ and Node.js installed.

We start with creating a new environment as following. We are going to use “virtualenv” module which comes with Pythton 3.6

(OSX)

python3 -m venv .env (Linux and Windows)

virtualenv .env # Activate your environment

. .env/bin/activate

We are going to use:

Django — Vue.js 2.0 — Webpack

It is good practice to create and requirements.txt file to install our dependencies for Django.

cat > requirements.txt

Django

django-rest-framework

django-webpack-loader

Press Control + D to save the file or install each library with pip manually.

Enter the following and run requirements.txt to install Django and DRF, also with webpack loader package which we will need to make django to talk to vue.

pip3 install -r requirements.txt

Next, create a Django project

django-admin startproject djvuetut

Your current file tree should look like this for the moment. You may want to test it and see that it runs in your browser.

cd djvuetut

python manage.py runserver # start your server in localhost:8000

Ignore any unapplied migrations warning for the moment and let’s check http://localhost:8000 and make sure you have a running django app!

click control + C to stop the server.

Now, we will continue with Vue.js installation and setup.

~ make sure that you are in the same directory with manage.py

enter the commands below to install vue-cli and webpack with simle configuration.

npm install -g vue-cli

vue init webpack-simple Generate project in current directory? Yes

Project name djvuetut

Project description A Vue.js project

Author talented <ozguryarikkas@gmail.com>

License MIT

Use sass? No vue-cli · Generated "djvuetut". To get started:



npm install

npm run dev

as stated:

enter npm install to install dependencies (npm modules) — This may take a while and npm run dev to start the server:

npm install

npm run dev

Default server port for Vue.js is 8080 so you can test that it runs at http://localhost:8080 if it doesn’t load automatically.

Just a quick introduction on how Vue is working in principal:

→ a vue.js instance is already created in main.js

→ the property el: binds the Vue instance to the HTML element with id=”app” and tell us that it is rendered in App.vue

→ in App.vue we have the Vue.js system to enable us to render data into DOM using double braces syntax.