How to migrate a create-react-app (CRA) from Webpack to Snowpack

Summary
The current Snowpack documentation focuses on creating a new project, but what if you already have an ongoing project, and want to have a faster HMR cycle? The easiest way I've found to migrate is to create a new Snowpack project with a template that is closer to your current project.
Read time: 3 minutes
Date published
February 18, 2021
Developer working on a laptop

Why should I migrate my app?

Webpack has been the standard tool for bundling source code into deployable software for quite some time now, and as we move further into the development cycles, the bundle tools tend to become just one item of the list of supporting tools that help you on your day-to-day code experience. For instance, if you use create-react-app, that decision was already made for you, so you can focus on coding features for your fantastic products.

As time goes on, you keep adding new amazing features, building solutions, and helping others achieve their goals and objectives. All the while, without making too much noise, it starts taking more and more time for that update on the code to reach the browser—to the point where you are drinking more coffee than you realize while you wait to see your changes come to live in the save, wait for the hot reload, and confirm your changes cycle.

There are other options for bundlers, such as rollups, Parcel, and esbuild, but the focus of this post is on Snowpack, and how to migrate an existing application to it.

Here is a comparison for the Hot Module Replacement (HMR) on a React application with Redux and using Material UI components:

Number of seconds between save and update on browser

Another reason to consider migrating from Webpack is the build time, which impacts the CI cost, especially if your build process runs for each PR (which it should!), as follows:

Number of seconds between to generate the production build deployable. Left is just the create-react-app, and right the app with Redux and Material

The differences are small in this sample project, but you can extrapolate the ripple effect of these improvements.

So, how do I migrate my app?

The current Snowpack documentation focuses on creating a new project so one can reap its benefits, but what if you already have an ongoing project, and want to have a faster HMR cycle?

The easiest way I've found to migrate is to create a new Snowpack project with a template that is closer to your current project. In this scenario, I've used:

npx create-snowpack-app app-name-to-migrate --template @snowpack/app-template-react-typescript

With the new empty project, I added all the dependencies from my current project into the package.json (if you have any outdated dependencies, this is an opportunity to address that, too). I've also copied any other scripts I needed from the source project. To bring in the code, I simply copied the content from public and src folders.

It would be great if that was all it was necessary to migrate. Now, comes the two issues I faced while migrating this simple project:

Issue 1: redux logger

The way the project was using the logger before the migration was trying to create a new logger using import { createLogger } from "redux-logger". I just had to replace it to use the logger provided by redux-logger: import logger from "redux-logger".

Issue 2: process.env

In the Snowpack documentation, it mentions that the process can be accessed for packing the project (https://www.snowpack.dev/reference/configuration#packageoptions.env) but that doesn't work for the dev cycle. To solve this issue, I just replaced process.env with import.meta.env.

And that is all that is needed to migrate a CRA project to use Snowpack! Even though the example for this post was simple, the difference when coding is noticeable. Now I almost don't wait for the hot reload, since that by the time I changed from the IDE to the browser, the changes are already there.

Don't forget to check out more of our popular how-to-guides for developers.

UPDATE: To make it simpler to generate a new project (without having to find the right template or remember the parameters to use) you can use the snowpack-start CLI. It's an interactive tool that you can use directly from npx (npx snowpack-start) and will ask everything it needs to generate a new project. Give it a try!

Tags

See what Ranglers are writing about on our blog