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$ ./manage.py 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 manage.py migrate' to apply them.
May 30, 2021 - 06:34:22
Django version 3.2.3, using settings 'project.settings'
Starting development server at http://127.0.0.1:8000/

Opening this location shows an installation successful page:

Create an app for the project:

./manage.py startapp clinic

Directory structure:

.
├── clinic
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── project
    ├── asgi.py
    ├── __init__.py
    ├── __pycache__
    ├── settings.py
    ├── urls.py
    └── wsgi.py

Additional options in settings.py:

import os
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'clinic.apps.ClinicConfig', #yourapp.apps.YourappConfig
    'rest_framework',
]
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.

~/proj/project/clinic/static/clinic

(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/vue.global.js' %}"></script>
<script>
    $(document).foundation();
</script>