Create a virtualenv:

mkdir proj
cd proj/
virtualenv -p python3.9 venv
. venv/bin/activate

Check python version

python --version
Python 3.9.5

Install django:

pip3 install Django
Successfully installed Django-3.2.3 asgiref-3.3.4 pytz-2021.1 sqlparse-0.4.1

Install django rest framework:

pip3 install djangorestframework
Successfully installed djangorestframework-3.12.4

Create a django project with the name project:

django-admin startproject project

Test that the project works:

(venv) [email protected]:~/proj/project$ ./ runserver
Performing system checks...
System check identified no issues (0 silenced).
You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python migrate' to apply them.
May 30, 2021 - 06:34:22
Django version 3.2.3, using settings 'project.settings'
Starting development server at

Opening this location shows an installation successful page:

Create an app for the project:

./ startapp clinic

Directory structure:

├── clinic
│   ├──
│   ├──
│   ├──
│   ├── migrations
│   ├──
│   ├──
│   └──
├── db.sqlite3
└── project
    ├── __pycache__

Additional options in

import os
    'clinic.apps.ClinicConfig', #yourapp.apps.YourappConfig
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = "/static/"

I organized the code.

I have decided to try out Foundation for this project. So, installing it. Read installation docs here.

From root of project:

npm install foundation-sites

This installs it to ./node_modules/foundation-sites/dist/

I then created a symlink to point to this location, from the staticfiles directory of django.


(venv) [email protected]:~/proj/project/clinic/static/clinic$ ln -s ../../../node_modules/foundation-sites/dist foundation

Now let’s install Vue 4. The latest installation docs can be found here.

npm install [email protected]

That installs Vue 4 to node_modules/vue/dist/

(venv) [email protected]:~/proj/project/clinic/static/clinic$ ln -s ../../../node_modules/vue/dist vue

Install jquery:

(venv) [email protected]:~/proj/project$ npm install jquery
cd clinic/static/clinic/
ln -s ../../../node_modules/jquery/dist jquery

Now, can load in index.html with:

<script src="{% static 'clinic/jquery/jquery.js' %}"></script>
<script src="{% static 'clinic/foundation/js/foundation.js' %}"></script>
<script src="{% static 'clinic/vue/' %}"></script>