Introduction to ESBuild tutorial for React / JavaScript and Typescript bundling. Bye bye Webpack

Introduction to esbuild. This video is a getting started guided to esbuild, which is a super fast bundler written in Go and is a potential replacement for WebPack. In this video Chris shows you how to get started with esbuild and how to use it to transpile your Typescript code into Javascript and bundle it for the browser. Chris looks at how to configure the bundler to deploy your React application for production and debugging looking at source maps, minification etc.

In addition Chris looks at how esbuild is a credible alternative to WebPack through it's plugin model and it's ability to not only produce bundles at speed but also it can be used to power React Server-Side rendering.

Finally Chris shows you how to use ESBuild in your developer workflow for hot reloading of your typescript web applications, improving your developer experience

Source Code available at

Chapters

00:00 - Introduction
01:34 - Installing esbuild
02:40 - Transpiling typescript using esbuild
07:50 - Comparing esbuild to TSC
12:00 - Creating our React Application
15:57 - Transpiling React Applications with esbuild
18:24 - Bundling our React Application with esbuild via Command Line
22:20 - Browser bundling with esbuild in Node.JS
26:21 - Serving bundles with http-server
27:44 - Sourcemaps
28:23 - Minify
29:20 - Bundling in browsers with ESBuild WebAssembly
31:11 - ESBuild Plugins
33:18 - ESBuild-Register
35:00 - Hot reloading with Express, esbuild Register and Nodemon
40:20 - Conclusion

[jimsteffes]

Wow! Great video. I love your succint style covering a complex tool. I'll be looking out for more of your vids.

[victmo]

Great video! You covered a lot of ground but managed to keep it short.
At ~40:29 you mention a better alternative to nodemon, what is it?

[Panda-ernd]

Good content, well explained. BGM is a bit distracting.

[idynxcode]

The server is not rendering from static public folder when you run script like 'npm start' for hot reloading. Not found 404 shows up? Why is this? But if you run the same script in terminal it works fine but not for npm script, it just gives not found in browser?

[sigurdwatt]

Sorry to be a noob but what does the node -r command do?!
In the context 'node -r esbuild-register index.ts'

[romanmed]

how delete import react from react as react 18 work?

[rutvikshah]

Css files are not getting into bundler, do you know how can i do that ???

[Neolisk]

What about content hashing of assets including JS?