diff --git a/pages/docs/manual/latest/installation.mdx b/pages/docs/manual/latest/installation.mdx index 2a360486f..dbb018f60 100644 --- a/pages/docs/manual/latest/installation.mdx +++ b/pages/docs/manual/latest/installation.mdx @@ -34,12 +34,78 @@ Alternatively, **to start a [ReasonReact](https://reasonml.github.io/reason-reac ## Integrate Into Existing JS Project -You can install the toolchain locally to an existing JS project, through the familiar command: +You can install ReScript locally into an existing JavaScript project using the following steps. + +### Install ReScript ```sh npm install --save-dev bs-platform ``` -The rest is the same as above. Since we output clean `.bs.js` files, the rest of your existing toolchain (e.g. Babel and Webpack) should mostly just work. Nothing to learn on the bundling side! +### Create config file + +Create a `bsconfig.json` file in the root of your project with the following content. + +```json +{ + "name": "your-project-name", + "bsc-flags": ["-bs-super-errors"], + "sources": [ + { + "dir": "src", + "subdirs": true + } + ], + "package-specs": [ + { + "module": "es6", + "in-source": true + } + ], + "suffix": ".bs.js", + "namespace": true, + "bs-dependencies": [], + "ppx-flags": [], + "refmt": 3 +} +``` + +> Update `sources` to indicate where your ReScript source files will be located. + +See [Build Configuration](build-configuration) for more details on `bsconfig.json`. + +### Add scripts to package.json + +You may also like to add two scripts to your `package.json` to help with compiling ReScript. + +```json +"scripts": { + "re:build": "bsb -make-world -clean-world", + "re:watch": "bsb -make-world -clean-world -w" +} +``` + +### Enabling React JS + +If you would like to enable React in your ReScript code, use the following additional steps: + +Install [Reason React](https://reasonml.github.io/reason-react/en/). + +```sh +npm install reason-react +``` + +Make the following changes to your `bsconfig.json` file: + +```json +"reason": { "react-jsx": 3 }, +"bs-dependencies": ["reason-react"], +``` + +### Using the compiled code + +Since ReScript compiles to clean readable JS files the rest of your existing toolchain (e.g. Babel and Webpack) should just work. + +See the [Export to JS guide](import-from-export-to-js#export-to-javascript) to learn how to import ReScript compiled modules into your existing project. -See also our highly recommended guide to [convert from JavaScript](converting-from-js). +See the [Converting from JS guide](converting-from-js) to learn how to convert existing JS code to ReScript.