Based off the official meteor scaffolding, with accounts and a demo collection that persists on signin/signout.
Current routes setup:
- landing (default logged out route)
- signin
- signup
- profile
- recover-password
- reset-password
- terms-of-use
- privacy-policy
- not-found
Clone repository:
[email protected]:johnwils/meteor-react-material-template.git (ssh)
https://github.com/johnwils/meteor-react-material-template.git (https)
Install packages:
meteor npm install
Start Meteor:
meteor npm run start
Navigate to http://localhost:3000 in any browser.
React Router 5 props are accessible in every top level 'page' component. This allows any page to access react router's 'redirect' functions and url params, etc. These values can be passed onto any further components or React Router hooks can be used.
The folder structure is modular, developer friendly, easy to navigate and follows the import structure of the official Meteor docs.
Each 'route' is represented by a folder in the 'pages' directory. Most data fetching is done at this top page level. These pages are the 'smart' or 'container' components. They fetch data and pass it as props to presentational components.
Reusable components in the 'components' directory are 'dumb' or ''presentational' components. These are mostly functional, stateless components. If a component requires data, it is passed as props from it's page component.
Note: The Meteor useTracker hook can also fetch data in any sub component (if needed).
Material UI is used to create a top level style theme.
The theme is accessible in each React component and used for consistent styling (colors, padding, border, etc.). The @material-ui package is used for CSS normalization, responsive grid and layout. Material UI components are used including navbars, forms, modals, inputs, buttons, etc.
The 'api' folder contains 1 folder per collection (all methods and publications for each endpoint are exclusive to each folder). This makes it easy to maintain each collection endpoint. All collections use aldeed:collection2 to enable schema validation on inserts. Both collections and methods use simpl-schema to validate parameters.
Methods use MDG's mdg:validated-method. The benefits of validated methods over regular Meteor methods are listed here: https://atmospherejs.com/mdg/validated-method#benefits-of-validatedmethod
The following mixins are used:
-
didericis:callpromise-mixin is used to return a promise to the client instead of a callback. Async/await code is used on the client for handling methods.
-
lacosta:method-hooks provides before and after hooks when methods are called.
-
tunifight:loggedin-mixin is used to only allow logged-in users to call methods and uses
alanning:rolesto check the user has the correct role privileges to call the method.
Basic roles are defined using alanning:roles.
The first user created is assigned the 'admin' role. Subsequent users are assigned the 'user' role. These roles can be used to give special access to server publications, render conditional UI and prevent unauthorized users from accessing server methods.
Jest and React Testing Library are used for unit testing React components.
To run unit tests:
npm run test:unit
Mocha and Chai are used to test Meteor server collections, methods and publications.
To run server tests:
npm run test:server
Cypress is used for end-to-end testing.
To run e2e tests:
npm run test:e2e
These tests appear live in-browser for debugging.
GitHub Actions are used for continuous integration testing. Modules are cached for faster CI builds.
Unit tests, server tests and headless E2E tests are run each time code is pushed or pull request is opened.
ESLint is used with plugin:prettier/recommended to enforce consistent styling.
To format files using prettier:
npm run prettier
This will update files in the 'imports', 'client', 'server' and 'tests' folders using prettier style presets.
A ddp connection can be made to an existing meteor server, following steps in Meteor's official docs
The ddp connection enables access to the existing server's methods, collections and publications.
Links:
Splitting into multiple Meteor apps
There is no state management such as Redux or MobX. This is partly because this template is so small and state is locally managed in components as needed. Also the Meteor collections reactively update the UI when changed. However, any state management tool can be easily added to the top level App component to provide a global store.