Create a React 18 / TypeScript bundle using esbuild
Tags: esbuild, javascript, react, typescript
Published: 2022-07-02 16:04:39

---
title: Create a React 18 / TypeScript bundle using esbuild
published: true
description: How to use esbuild to create a bundle for your React 18 / TypeScript projects
tags: esbuild, javascript, react, typescript
cover_image: https://res.cloudinary.com/my-notes-demo/image/upload/v1656776414/tutorial-content/dev.to/esbuild-tutorial-1/devto-cover.png
# Use a ratio of 100:42 for best results.
---

[esbuild](https://esbuild.github.io/) is a fast javascript bundler that is 10-100x faster than webpack, rollup or parcel and it is used by tool like [ViteJS](https://vitejs.dev/).

It supports features such as:
* ES6 and CommonJS modules
* Tree shaking of ES6 modules
* An API for JavaScript and Go
* TypeScript and JSX syntax
* Source maps
* Minification
* Plugins
* and more....

In this post I share a quick (and simplified) summary to create a bundle for a React 18 / TypeScript project.

## Install `esbuild` in your project

```bash
mkdir esbuild-demo
cd esbuild-demo
npm init -y
npm install esbuild
```

This generates the following `package.json`:

```json
{
  "name": "esbuild-demo-story",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "esbuild": "^0.14.48"
  }
}
```

## Create a React 18 / TypeScript project

Now create a simple React script:

1. First, install `react` and `react-dom` as project dependencies
2. Create the `src/App.tsx` file
3. Add `App` and `Panel` components in the same file
4. Mount `App` component in a `div` element with `root` id

```ts
// src/App.tsx
import * as React from 'react'
import ReactDOM from 'react-dom/client';

// App Component
const App = () => (<div>
  <h1>Hello, ESBUILD!</h1>
  <Panel />
  <Panel />
</div>)

// Panel Component
const Panel = () => <h2>I'm a Panel</h2>

// Mount component 
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<App />);

```

## `esbuild` configuration

Create an `esbuild` configuration file to compile the project.
It will generate a (minified) bundle in the `dist` folder that also includes React and ReactDom libraries (you can exclude them by using the `external` property:

```json
// esbuild.config.js
const res = require('esbuild').buildSync({
  entryPoints: ['src/app.tsx'],
  bundle: true,
  minify: true,
  format: 'cjs',
  sourcemap: true,
  outfile: 'dist/output.js',
  // external: ['react', 'react-dom'], 
})
```


Run the configuration file by using Node:

```bash
node esbuild.config.js
```

Project Folder:

![alt text for accessibility](https://res.cloudinary.com/my-notes-demo/image/upload/v1656775504/tutorial-content/dev.to/esbuild-tutorial-1/image.png
)

## Index.html

Create an `index.html` in the project root folder and import your bundle:

```html
<html>
  <body>
  <script type="module" src="./dist/output.js"></script>
  <h1>React</h1>

  <div id="root"></div>
  </body>
</html>
```

Run a webserver:

```
npx lite-server
```

![liteserver preview](https://res.cloudinary.com/my-notes-demo/image/upload/v1656775504/tutorial-content/dev.to/esbuild-tutorial-1/image_1.png)


And you'll get the following output:


![Final preview](https://res.cloudinary.com/my-notes-demo/image/upload/v1656775504/tutorial-content/dev.to/esbuild-tutorial-1/image_2.png)


Your simple React 18 / TypeScript project should works :)

---

#### [SlideShare Presentation](https://www.slideshare.net/fabio_biondi/create-your-react-18-ts-bundle-using-esbuild)

{% embed https://www.slideshare.net/slideshow/embed_code/key/M9zv2yng7BHfJm %}