Frontend Setting

All frontend-related files (except Django templates in web-app/django/VIM/templates/) are located in web-app/frontend/. These files can be divided into two groups:

• Static Files: CSS and images are in web-app/frontend/assets/.
• Dynamic Files: TypeScript files are in web-app/frontend/src/.

Static Files

Static files are served through Nginx, aliased as virtual-instrument-museum/static/assets/, and can be hot-reloaded in development mode.

Dynamic Files

• TypeScript files are built using Vite and served via localhost:5173 in the background. These files are integrated with Django using django-vite. django-vite supports hot reload in development mode, and maps built files to virtual-instrument-museum/static/ in production mode.
• SCSS files are compiled using SASS to static CSS files in web-app/frontend/assets/css/, and served by nginx. SCSS files are watched by SASS in development mode, and built in production mode.