Based off the official meteor scaffolding, with accounts, login and a demo collection that persists on login/logout.
Current routes setup:
- landing (index route)
- login
- signup
- profile
- recover-password
- reset-password
- not-found
Clone repository:
git clone https://github.com/johnwils/meteor-react-template.git
Install packages:
meteor npm install
Start Meteor:
meteor
Navigate to http://localhost:3000 in any browser.
React Router 4 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 can be passed onto any further components.
Also React Router's withProps HOC provides the same functionality to any component.
When logged in, users are redirected to the '/profile' route.
When logged out, users are redirect to the '/login' route.
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: Meteor's reactive withTracker can also fetch data in any sub component (if really needed).
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 methods are listed here: https://atmospherejs.com/mdg/validated-method#benefits-of-validatedmethod
The following mixins are used with methods:
-
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 'admin' and subsequent users are 'user'.
SCSS is also locally scoped to each page/component folder. This makes managing styles easy, as .scss files are in the same folder as the component file.
Note: most styling can be done via 'classes' using the Bootstrap API (see below)
There is 1 main.scss file that imports Bootstrap and 1 custom.scss to override default styles. An app-wide custom theme can be setup easily in custom.scss.
Bootstrap is being used directly on elements (adding to the 'class' or 'className') using the v4 api. This includes (so far) navbar, collapsed navbar, login/signup cards, search bar, dropdown menu and a modal. The api is well documented and easy to use. This approach limits the dependency on common external bootstrap packages.
Meteor's built-in css minify tool is replaced with juliancwirko:postcss (mentioned in the meteor docs). This package minifies CSS plus it makes use of a postcss entry in package.json to apply autoprefixer for wider browser support.
The grid from Bootstrap 4 ensures the layout is responsive on desktop and mobile. The navbar, modal and login/signup cards are good examples to check out on mobile.
Mocha is used to run tests and log test results on the server. Chai is used as an expectation / assertion library.
To run server tests on the example Counters methods and publications run:
npm run test-server
The server tests are in imports/api/counters/
Jest is used on the client to test React components. Enzyme is used to help test, assert, manipulate, and traverse React components.
ESLint is used to enforce consistent styling.
Airbnb and Prettier style presets are used.
To clean the app run:
npm run prettier
This will conform files in the 'imports', 'client' and 'server' folders to the 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.