The Front End¶
Pegasus’s front-end architecture is a hybrid model, with a standalone front-end codebase that is compiled and served inside Django templates.
Pegasus’s styles use the Bulma CSS framework, and building the CSS files is included as part of the front-end build pipeline.
The source front-end files live in the
assets directory, while the compiled files
get created in the
Generally you should only ever edit the front-end files in
and compile them using the instructions below.
Prerequisites to building the front end¶
Getting started should be as simple as running:
In your project’s root directory. This will install all the dependencies necessary to build the front end.
Building in Development¶
Whenever you make modifications to the front-end files you will need to run the following command to rebuild the compiled JS bundles and CSS files:
npm run dev
You can also set it up to watch for changes by running:
npm run dev-watch
Building for production¶
To build for production, run:
npm run build
This will compress your files, remove logging statements, etc.
Deployment best practices¶
For ease of initial set up, the front-end bundle files are included with the Pegasus codebase. This allows you to get up and running with Pegasus without having to set up the front-end build pipeline.
However, after you have set up the front-end toolchain it is recommended that you:
- Add the bundle files to your .gitignore so they are no longer managed by source control.
- Build the bundle files on your production server (using
npm install && npm run build) as part of your CI/CD deployment process.
This will ensure that the latest, optimized version of the front-end code is always deployed as part of your production environment.