About six months ago, the team that developed Snowpack realized that their efforts had paralleled those of the Vite.js tooling. Vite.js also used ES Modules, and provides a mature code base and strong community support. Since the Snowpack team wanted to work on other projects (Astro), they switched their underlying tooling to use Vite.js.
So… I decided to see what it would take to migrate my Snowpack project to use Vite.js. Everything I had read said that it was easy. Here’s a field report from what was required.
vitejs-docker-dev repo has good documentation. It describes a lot of background of how the Docker machine gets built and how to use it.
Update: Andrew Welch (who created the vitejs-docker-dev project) sent me a link to his article about using “Docker for all the things.” It’s a good adjunct to the original “Run More Stuff in Docker” post.
Back to the main story – here are the steps I followed to get my Snowpack project on the air with Vite.js:
- Create the Docker instance. Clone the
vitejs-docker-dev repo. Then run
make docker to put the set of development tools into a new Docker instance. This one-time step takes a few minutes. You may see several warnings (as described in a Github issue) but these don’t seem to be important.
- Check the default Vite.js app builds on Docker. Run
make vite-pnpm run dev in one terminal window, then run
make app-pnpm run dev in a second window (waiting between the commands as described in the README). Click the http://localhost:3000 URL to see if the test Vite app starts up. Edit the
index.html file to see if the change is reflected in the web browser. (It should be…)
- Customize the
/app directory for your app. Copy all your app’s files into the
app directory. (I renamed the original to
app-old and created a new
app directory.) This required a bit of jiggering to adjust between Snowpack and Vite.js, such as:
index.html file for Snowpack was in the
public directory; for Vite.js, I moved it to the top-level
- Copy the
package.json and other important directories to
- Adjust the paths for
index.html: Snowpack bundles source files from
/src into the
/dist directory; Vite.js processes the files directly from
- I can’t remember whether I made other tweaks; it certainly wasn’t odious.
- Remove references to the Snowpack modules from the
package.json file. Optionally, you could take the opportunity to update the versions of dependencies.
- Rebuild the Docker instance (#1 above) and restart the development process (#2 above). Click the link to http://localhost:3000 and your app should begin to run. You’ll probably need to make adjustments, but you’ll be substantially on the air.
TL;DR The process of converting to Vite.js wasn’t very hard (at least, not on my small project). It required a little farbling around, but nothing terrible. The jury’s still out on whether
vitejs-docker-dev will make my life better – but I think it just might.