Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP conversion to Vite #3622

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

WIP conversion to Vite #3622

wants to merge 1 commit into from

Conversation

jcushman
Copy link
Contributor

This is my WIP on converting our build pipeline from Webpack 4 to Vite. The general process I'm following is:

  • Create a vanilla vite project to borrow a package.json and vite.config.js from.
  • Replace our current package.json -- we only want to bring over dependencies that turn out to be used, so I add anything that gets complained about when compiling.
  • Delete webpack.config.js. Fill in vite.config.js with the entrypoints, and anything else that turns out to be needed.
  • For integration with Django, delete django-webpack-loader and add django-vite.
  • Keep trying to get npm run build to work and fix anything that breaks. This is mostly imports and jquery usage.
  • Import the css files in global.js, since Vite finds CSS through JS imports. Edit CSS to get paths working.
  • Convert Django templates to show Vite assets instead of Webpack assets. That means using {% vite_asset 'frontend/pages/dashboard.js' %} instead of {% render_bundle 'dashboard' 'js' %}, and removing {% render_bundle 'global' 'css' %}. Also means moving the entire {% block scripts %}{% endblock %} to the header so CSS works, which may break any JS that assumes the page is already loaded.

Status:

  • create-link.html seems to work fine.
  • single-link.html is WIP. It has a CSS issue where the menu bar is way too tall.
  • Other Django templates still have to be switched over and tested.
  • Vite uses hot module reloading by default, which not everyone likes -- I think controlled by the DJANGO_VITE dev_mode setting. Vite also has pretty different dev and production builds provided by Rollup, one better for debugging and one better for speed. Figure out what combination of settings works well for different devs. I think the three states we'll want Django settings for are (a) dev JS build with HMR; (b) dev JS build without HMR; (c) production build.
  • We need to make sure the built assets in the repo end up as the production build, in some not too annoying way that doesn't make people remember to run another command before sending PRs. Maybe this is already handled by Perma's CI setup -- I remember something about a CI pipeline committing built assets, but not sure if that's Perma or CAP.
  • There is a flash of unstyled content on page load, which I think happens only on dev mode in exchange for fast easy to debug builds. Need to check that it works as intended on prod, and is a good compromise on dev.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant