Maders / reason-react-test

Simple data fetching app based on ReasonReact.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sample spa with ReasonReact

This repo is my first test project with Reasonml and ReasonReact.

  • Using ReasonReact and ReasonReactRouter.
  • Using bs-fetch for data fetching.
  • Using bs-json to serialization nested API response.

Run

npm install
npm run server
# in a new tab
npm start

Open a new web page to http://localhost:8000/. Change any .re file in src to see the page auto-reload. You don't need any bundler when you're developing!

How come we don't need any bundler during development? We highly encourage you to open up index.html to check for yourself!

Bundle for Production

We've included a convenience UNUSED_webpack.config.js, in case you want to ship your project to production. You can rename and/or remove that in favor of other bundlers, e.g. Rollup.

We've also provided a barebone indexProduction.html, to serve your bundle.

npm install webpack webpack-cli
# rename file
mv UNUSED_webpack.config.js webpack.config.js
# call webpack to bundle for production
./node_modules/.bin/webpack
open indexProduction.html

Handle Routing Yourself

To serve the files, this template uses a minimal dependency called moduleserve. A URL such as localhost:8000/scores/john resolves to the file scores/john.html. If you'd like to override this and handle URL resolution yourself, change the server command in package.json from moduleserve ./ --port 8000 to moduleserve ./ --port 8000 --spa (for "single page application"). This will make moduleserve serve the default index.html for any URL. Since index.html loads Index.bs.js, you can grab hold of the URL in the corresponding Index.re and do whatever you want.

By the way, ReasonReact comes with a small router you might be interested in.

About

Simple data fetching app based on ReasonReact.


Languages

Language:Reason 83.5%Language:JavaScript 10.6%Language:HTML 5.9%