Front End

This section provides details on the Pegasus front end.

• Front End Overview
  • Architecture
  • Choosing a front end build tool
  • Front-end files
  • Prerequisites to building the front end
  • Initial setup
  • Building in Development
  • Building for production
  • TypeScript and type checking
• Vite-Specific Instructions
  • Vite architecture overview
  • Vite in Development
  • Adding files to Django templates
  • Configuration
• Webpack-Specific Instructions
  • Development with Webpack
  • Bundled Static Files and Source Control
• Front End Design Patterns
  • Providing site-wide JavaScript
    • site.js and app.js
  • Making an existing package available
    • Example: Adding simple-datatables
    • Using the SiteJS library
• Troubleshooting
  • Changes are not being picked when running make npm-watch in a Docker container
• Migrating from Webpack to Vite
  • 1. Upgrade your project to 2025.5
  • 2. React only: Rename all .js files using JSX to .jsx
  • 3. Change your bundler setting from “Webpack” to “Vite” and do another Pegasus upgrade
  • 4. Add your custom CSS / JavaScript exports to your vite config
  • 5. Update your front end file references in templates
  • 6. Update Webpack libraries
  • 7. Rebuild and run your front end