O(1) Reloading With Create React App
Edit (28/10/2020): This tutorial has been updated to work with
You can find the finished project on GitHub.
Some of the comments made throughout this post may no longer apply with CRA 4. I am updated at the request of others!
The post is now a few months old, so lookout for new fresh content with Snowpack that will delve more into running Snowpack with Webpack 5 and TypeScript 4.
Bundlers have been the standard in web development over recent years, but as your application grows in size, so too does the bundle times. This creates issues for developers and costs everyone precious time.
Snowpack is build tool that addresses this issue by serving an unbundled application. They have a great blog post explaining how they got to the version 2 release.
In my own work, I have been getting unbelievably frustrated with build times and have been very keen to explore Snowpack. At first, I played around with their Create Snowpack App starter, but want to know how I could run with Create React App and add Snowpack instead.
There really hasn't been many posts available on how to do this, so I decided to go it on my own with some trial and error. Here are the short steps that you can take to start developing in O(1) build times with a fresh Create React App project!
Note: This tutorial ran with
Create a new React project with the following:
This will create the default
create-react-app setup into the
Babel Run Command File
.babelrc file to your root directory and add the following:
We need to add the
<script type="module" src="/_dist_/index.js"></script> tag into our
Mine looked like the following:
Let's add our dev dependencies for the application! This will install Snowpack and some other dependencies I found along the way that look to be required.
Note: With npm 7, you may need to run this with the
--legacy-peer-deps flag if the peer dependencies do not resolve as expected.
Add the follow script to we can run
dev as a npm script during development. It's not required, but saves time.
Finally, create a
snowpack.config.js file at the root directory and add the following:
These options are some that I carried over from the
Create Snowpack App starter application. The
devOptions may not be required, although I found the build would fail prior to add
fallback: "public/index.html" to those options.
An important update for Create-React-App 4.0
In the CRA 4
src/App.js file, you will note does not import React for you. If you wish to use Snowpack, you will need to add import React from 'react' to the top of the file.
Running out Application
Fire it up now by running
yarn dev or
npm run dev! The application will load on port 8080.
To see some neat speed changes, duplicate
App.css into files
Alt.css. Fiddle around with some of these settings so you can see the changes.
Alt.css to have some colour changes:
Make some simple changes to
Alt.js to use
Alt.css and have some different text:
Seeing the speed changes
index.js and start swapping it back and forth with
<App /> to see some fast changes!
Snowpack reload results
The beauty with running CRA is that we can actually compare with the default settings! Stop the Snowpack server and start
yarn start or
npm run start to get the base app going with the bundler. Notice the following:
- How much slower the server start up is.
- The longer time to reload the app when changing between
It is really important to note here that the app is still really, really small, so time to bundle will only grow greater as we make the application larger and larger! That will be when Snowpack truly shines.
We got up and running with Snowpack in 5 minutes and had a great chance to compare the two! O(1) build tools are a real breath of fresh air!
If you liked this short tutorial, you are going to love my next one where I dive into remote microfrontends with Webpack Federation. Be sure to follow me on GitHub and Twitter for updates on upcoming content.
Resources and further reading
See how you can dynamically create UIs based on React State using dynamic imports, Next.js 10 and React State
Have you ever wanted to build a UI Component Library with TypeScript and React? This blog post will take you through a straightforward set up that uses the bare minimum to get a working component library that you can re-use across your different React projects.
This post will go through a simple example of setting up simple authentication with a user and password to your Next.js website.
This blog post will explore the new internationalised routing in Next.js 10 and how you can use this to your advantage with react-intl for React.js
See a roundup of my look into Vercel's new analytics feature that you can enable on a Vercel project and see how I used GTMetrix to help push some numbers.
1,200+ PEOPLE ALREADY JOINED ❤️️
Get fresh posts + news direct to your inbox.
No spam. We only send you relevant content.