/bsb-theme-react-parcel

The BuckleScript React theme generated content, modified to work with parcel instead of webpack.

Primary LanguageOCaml

bsb-theme-react-parcel

This is the files generated by the $ bsb -init my-react-app -theme react command as explained in the ReasonReact documentation, modified to work with parcel instead of webpack.

Run Project

  • With yarn:
yarn
yarn start:bs
# in another tab
yarn start
  • with npm:
npm install
npm run start:bs
# in another tab
npm start

After you see the parcel compilation succeed (the yarn start step), open up http://localhost:1234. Then modify whichever .re file in src and refresh the page to see the changes.

For more elaborate ReasonReact examples, please see https://github.com/reasonml-community/reason-react-example

Build for Production

  • With yarn:
yarn build
  • With npm:
npm run build

You should see an output like this:

$ yarn build                                                                                                                                             
yarn run v1.13.0
$ bsb -make-world && parcel build src/index.html
ninja: no work to do.
ninja: no work to do.
✨  Built in 10.39s.

dist/Index.bs.cdb1320f.map    338.08 KB     73ms
dist/Index.bs.cdb1320f.js     135.29 KB    4.75s
dist/index.html                   244 B    5.49s
✨  Done in 16.18s.

This bundles src/index.html, all src/*.bs.js files and all required node modules in the dist directory. Parcel makes sure that the reference to Index.bs.js in src/index.html points to the bundled files in dist/index.html.
Now you just have to push those static files (for example with surge).

If you make use of routing (via ReasonReact.Router or similar logic) ensure that server-side routing handles your routes or that 404's are directed back to index.html (which is how the dev server is set up).

To enable dead code elimination, change bsconfig.json's package-specs module from "commonjs" to "es6". Then re-run the above 2 commands. This will allow Webpack to remove unused code.