Gatsby + MobX (mobx-state-tree) + TypeScript starter + (React Context & Hooks).
Why? Because Gatsby is excellent also for React apps (not just static sites).
MobX (mobx-state-tree) & React Context with a single Root model to attach every other model onto it, so we have multiple global models in order to better separate our different concerns (or you can have multiple contexts, each for own segment of the app).
See: src/models/Root.ts
With the use of React Context and Hooks, this is simple and scalable. (e.g Made a custom hook called useMst that you can use to destructure the store or stores that you need within a given application components) - See Mobx React's recipes context and Impulse's react-hooks-mobx-state-tree.
- Uses mobx-react-lite and mobx-state-tree
- MST setup based on @impulse/react-hooks-mobx-state-tree for CRA
- Gatsby v2 + TypeScript + MobX setup forked from @borekb/gatsby-starter-mobx
- Search example based on mselee's post
- Two examples based on @mweststrate's Egghead course:
- "Counter" and "Temperature" as a basic store and an observer
- Responsive Layout using Theme UI, with useColorMode hook for easy dark mode toggle
.editorconfig& Prettier- TSLint
- Jest setup (temporarily removed tests when adding mobx-state-tree todo: add test back)
This starter was inspired by ueno-gatsby-starter and luke-gatsby-starter with the initial Gatsby v2 + TypeScript + MobX setup from @borekb/gatsby-starter-mobx
- Make sure you're in a Linux-y shell (on Windows, use e.g. Git Bash or MSYS2;
rm -rfand similar might be called from npm scripts). yarnyarn start
Other notable scripts (see package.json):
yarn build- (You can verify the statically generated site with e.g.
npx local-web-server -d public.)
- (You can verify the statically generated site with e.g.
yarn tscyarn lintyarn prettieryarn testoryarn test --watch