automerge/javascript/examples/create-react-app/README.md
Alex Good 8e131922e7
Move wrappers/javascript -> javascript
Continuing our theme of treating all languages equally, move
wrappers/javascript to javascrpit. Automerge libraries for new languages
should be built at this top level if possible.
2022-10-16 19:55:54 +01:00

59 lines
1.5 KiB
Markdown

# Automerge + `create-react-app`
This is a little fiddly to get working. The problem is that `create-react-app`
hard codes a webpack configuration which does not support WASM modules, which we
require in order to bundle the WASM implementation of automerge. To get around
this we use [`craco`](https://github.com/dilanx/craco) which does some monkey
patching to allow us to modify the webpack config that `create-react-app`
bundles. Then we use a craco plugin called
[`craco-wasm`](https://www.npmjs.com/package/craco-wasm) to perform the
necessary modifications to the webpack config. It should be noted that this is
all quite fragile and ideally you probably don't want to use `create-react-app`
to do this in production.
## Setup
Assuming you have already run `create-react-app` and your working directory is
the project.
### Install craco and craco-wasm
```bash
yarn add craco craco-wasm
```
### Modify `package.json` to use `craco` for scripts
In `package.json` the `scripts` section will look like this:
```json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
```
Replace that section with:
```json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
```
### Create `craco.config.js`
In the root of the project add the following contents to `craco.config.js`
```javascript
const cracoWasm = require("craco-wasm")
module.exports = {
plugins: [cracoWasm()]
}
```