A Pokedex built with ReasonReact, GraphQL, and PokeQL!
- PokeQL: https://pokeql.com/graphiql
- graphql_ppx: https://github.com/mhallin/graphql_ppx
- get_in: https://github.com/jaredly/get_in_ppx (Click here for more background on this)
Starts with:
- List first 50 Pokemon
- Show single Pokemon
- Load more Pokemon
- Show Pokemon sprite images!
- Search Pokemon by English name
- Link to evolutions on each Poekemon page
- Whatever else you can think of with the data from the API!
- Make it look good lol
npm install
npm start
# in another tab
npm run webpack
After you see the webpack compilation succeed (the npm run webpack
step), open
up build/index.html
(no server needed!). 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
To run with the webpack development server run npm run server
and view in the
browser at http://localhost:8000. Running in this environment provides hot
reloading and support for routing; just edit and save the file and the browser
will automatically refresh.
Note that any hot reload on a route will fall back to the root (/
), so
ReasonReact.Router.dangerouslyGetInitialUrl
will likely be needed alongside
the ReasonReact.Router.watchUrl
logic to handle routing correctly on hot
reload refreshes or simply opening the app at a URL that is not the root.
To use a port other than 8000 set the PORT
environment variable
(PORT=8080 npm run server
).
npm run build
npm run webpack:production
This will replace the development artifact build/Index.js
for an optimized
version as well as copy src/index.html
into build/
. You can then deploy the
contents of the build
directory (index.html
and Index.js
).
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.