esbuild is js bundler that is getting more and more traction because of it impressive build speed. create-react-app (CRA) is well-established script to generate a new react application. In this article, we will take a look on what tweaks are needed to CRA output to pass build with esbuild.
Alternatives
There are some react app generators that use esbuild out of the box:
and those can be a good idea if you are starting a new project, but for already existing apps they probably will not be of much help.
Generting new application
To simplify our example, let's generate new application with CRA:
$ npx create-react-app esbuild-cra
Creating a new React app in /home/marcin/workspace/github/tmp/esbuild-cra.
Installing packages. This might take a couple of minutes.
...
We suggest that you begin by typing:
cd esbuild-cra
npm start
Happy hacking!
The next step is to install esbuild:
$ npm install --save-dev esbuild
added 1 package, and audited 1962 packages in 4s
146 packages are looking for funding
run `npm fund` for details
...
Adding test HTML
For testing the esbuild we will create a dist folder, and put there manually created index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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"
/>
<title>React App</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
I created it based on html output of npm run script, and replace all dynamically created file references with static one that we will build in a moment.
Build script
To build the application, I'll leave the original npm scripts as they were & add temporarily esbuild script for testing. I recommend doing the same if you decide to migrate your app - it will allow for a smooth testing before replacing original builds. Plus you will want to replace dev script too - something that is not covered in this article, and you will need to figure it out on your onw.
To package.json, I add:
"scripts": {
....
"esbuild": "esbuild src/index.js --bundle --outfile=dist/main.js --loader:.html=text --loader:.js=jsx --loader:.svg=dataurl"
}
The build script parts means as follow:
-
src/index.js- the entry point of our build. From there all our files are found -
--bundle- the files are all bundled into one, output file -
--outfile=dist/main.js- the location where the output files should be saved -
--loader:.html=text- a loader that will read all HTML files are strings equal to the file content -
--loader:.js=jsx- the JSX load for JS files - as CRA uses this extension for JSX files -
--loader:.svg=dataurl- loader that includes SVG files as data url links (data:image/svg;base64....)
With this script in place we already can successfully run npm run esbuild:
$ npm run esbuild
> esbuild-cra@0.1.0 esbuild
> esbuild src/index.js --bundle --outfile=dist/main.js --loader:.html=text --loader:.js=jsx --loader:.svg=dataurl
dist/main.js 902.9kb
dist/main.css 1019b
⚡ Done in 61ms
Add explicit import
If you open the test page as it is now, you will see a white screen and the following error in console:
Uncaught ReferenceError: React is not defined
App http://localhost/github/tmp/esbuild-cra/dist/main.js:20611
renderWithHooks http://localhost/github/tmp/esbuild-cra/dist/main.js:12714
mountIndeterminateComponent http://localhost/github/tmp/esbuild-cra/dist/main.js:14834
...
luckily it's easy to fix, we just need to import React in all places that are referencing it. In our case, just add to src/App.js this line as the first line:
import React from "react";
Links
Summary
In this article, we have seen how to build esbuild an app generated with create-react-app. If you are interested in other articles on this topic, let me know in the comments.
You can see the application in action here, and the repository here
Top comments (0)