text: Edit (28/10/2020): This tutorial has been updated to work with
  npm 7,
  create-react-app@4.0.0and
  snowpack@2.15.1.
  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-react-app@4.0.0and
  snowpack@2.15.1.
  Getting started
  Create a new React project with the following:
  npx create-react-app snowpack-uplift
  This will create the default
  create-react-app setup into the
  snowpack-uplift folder.
  Babel Run Command File
  Add a
  .babelrc file to your root directory and add the following:
  { "presets": ["@babel/preset-react"] }
  index.html
  We need to add the
  <script type="module" src="/_dist_/index.js"></script> tag into our
  public/index.html file.
  Mine looked like the following:
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!--> <script type="module" src="/_dist_/index.js"><>
  Add Dependencies
  Let's add our dev dependencies for the application! This will install Snowpack and some other dependencies I found along the way that looks to be required.
  Note: With npm 7, you may need to run this with the
  --legacy-peer-depsflag if the peer dependencies do not resolve as expected.
  npm i --save-dev --legacy-peer-deps \ @snowpack/app-scripts-react \ @snowpack/plugin-babel \ rollup-plugin-node-polyfills \ snowpack
  package.json
  Add the following script to we can run
  dev as a npm script during development. It's not required, but saves time.
  "scripts": { "dev": "snowpack dev --config snowpack.config.js", }
  Snowpack Config
  Finally, create a
  snowpack.config.js file at the root directory and add the following:
  // snowpack.config.js // Plugin: module.exports = { extends: "@snowpack/app-scripts-react", devOptions: { port: 8080, src: "src", bundle: process.env.NODE_ENV === "production", fallback: "public/index.html", }, installOptions: { rollup: { plugins: [require("rollup-plugin-node-polyfills")()], }, }, }
  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.js and
  App.css into files
  Alt.js and
  Alt.css. Fiddle around with some of these settings so you can see the changes.
  I updated
  Alt.css to have some colour changes:
  .Alt { text-align: center; } .Alt-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .Alt-logo { animation: Alt-logo-spin infinite 20s linear; } } .Alt-header { background-color: #fff000; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: black; } .Alt-link { color: black; } @keyframes Alt-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  Make some simple changes to
  Alt.js to use
  Alt.css and have some different text:
  import React from "react" import logo from "./logo.svg" import "./Alt.css" function Alt() { return ( <div className="Alt"> <header className="Alt-header"> <img src={logo} <p> Edit <code>src/Alt.js</code> and save to reload. </p> <a className="Alt-link" href="" target="_blank" rel="noopener noreferrer" > Learn Snowpack </a> </header> </div> ) } export default Alt
  Seeing the speed changes
  Import
  Alt.js in
  index.js and start swapping it back and forth with
  <App /> to see some fast changes!
  import React from "react" import ReactDOM from "react-dom" import "./index.css" import App from "./App" import Alt from "./Alt" import * as serviceWorker from "./serviceWorker" ReactDOM.render( <React.StrictMode> <Alt /> </React.StrictMode>, document.getElementById("root") ) // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: serviceWorker.unregister()
  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
  <Alt />and
  <App />.
  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.
  Conclusion
  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
  Image credit: Katie Moum
  Originally posted on my blog. Follow me on Twitter for more hidden gems @dennisokeeffe92.
  Discussion (0)