✨Feature: Vite HMR in development mode + Vite backend django integration

[LoTerence]

Fixes #563

• Goal: enable vite HMR in development mode.
• With this PR, the frontend should be fully migrated from webpack to vite.
• The only thing left to do is remove all the webpack files and code.

Changes

Big changes:

• Integrated vite frontend with django backend
  • Followed this guide: https://vitejs.dev/guide/backend-integration.html
  • And implemented the django-vite package in the backend: https://github.com/MrBin99/django-vite
  • that was recommended by the official vite docs: https://github.com/vitejs/awesome-vite?tab=readme-ov-file#django
• With this, the frontend vite development server will reload on file changes
• Created a docker-compose.dev.yml file for quickly booting up the dev environment on your local machine.
  • I wasn't sure what was going on in the original docker-compose.yml file to be honest. It wasn't working for me.
  • I achieved this by creating a dev/vite.Dockerfile and a dev/django.Dockerfile for building separate containers for the frontend and backed.
  • Used this guide to help create the django.dockerfile:
    • Django + Poetry + Docker. Managing Python packages for Django… | by Nathan Clement | Medium

Try it yourself

How to run the new full stack CivicTechJobs application in development mode?

1. Simply run the following command in the root directory to start the application in dev mode:

docker compose -f docker-compose.dev.yml up --watch

2. Wait for docker compose to finish building and running the containers. There should be 3 containers: pgdb, django, and vite.
3. Navigate to http://localhost:8000 in your browser
4. Now try changing text in frontend/src/pages/LandingPage/LandingPageIntro.tsx
5. Watch the text on the page reload in less than a second 🚀

How does the new vite backend integration work?

Vite dev server

• Running $ vite dev inside the /frontend directory will start a vite development server with fast Hot Module Reload enabled.
• The django settings.py file is configured to load js modules from the dev server in DEBUG mode (aka dev mode).
• It does so with the help of the django-vite PyPI package.
• django-vite is set to fill in your index.html template with vite js modules for you.

Production bundle - NEEDS REVIEW

• Running $ vite build inside the /frontenddirectory will create a build directly in the django backend.
• The static assets are saved into a folder called backend/vite_assets_dist.
• Django will serve this build as static assets in production.
• THIS NEEDS REVIEW FROM THE TEAM - I have no idea how static assets are served in production at the moment. I would be happy to change this to suit whatever process you guys had in place before.

Changes by file:

• ./.dockerignore - added the vite build files and tidied up a bit
• ./.gitignore - ignore the vite build files
• backend/settings.py - configured environment variables and set up django-vite integration
• backend/urls.py - add a path for the new index.html template
• backend/poetry.lock - added django-vite and python-decouple packages
• backend/pyproject.toml - added django-vite and python-decouple packages
• backend/templates/index.html - moved the index.html template from the frontend to the django backend, where it makes more sense to keep.
• dev/django.Dockerfile - new dockerfile for building the django dev environment docker image
• dev/vite.Dockerfile - new dockerfile for building the vite development server docker image
• ./docker-compose.dev.yml - new compose file for running the application in development mode
• frontend/.gitignore - ignore vite.config.mts.timestamp... - this temp file is created when you run $ vite dev, but sometimes it does not get removed after.
  • This is a known issue: There will be temporary vite.config.js.timestamp files that have not been cleaned up vitejs/vite#13267
  • We will have to manually remove it ourself until they find a fix for it 😕
• frontend/package.json - remove vite-plugin-html package, it is no longer needed
• frontend/package-lock.json - remove vite-plugin-html package, it is no longer needed
• frontend/src/index.tsx - import vite/modulepreload-polyfill - necessary for vite backend integration.
• frontend/src/templates/vite-index.html - removed this file as it is no longer needed
• frontend/vite.config.mts - configured vite settings to integrate with django backend and docker compose.

Screenshots, if applicable

No changes to the website's appearance.

[JimmyJuarez10]

Approved on 09/12 Meeting