Skip to content

A Meteor 1.9, React 16, React Router 5, Bootstrap 4 Template

Notifications You must be signed in to change notification settings

johnwils/meteor-react-template

Repository files navigation

eslint: airbnb prettier

A Meteor 1.9, React 16, React Router 5, Bootstrap 4 template

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

Quick start

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.

Routing and redirects

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 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.

Folder structure

The folder structure is modular, developer friendly, easy to navigate and follows the import structure of the official Meteor docs.

Pages

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.

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).

API

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

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

Validated Method Mixins:

The following mixins are used with methods:

Roles

Basic roles are defined using alanning:roles.

The first user created is 'admin' and subsequent users are 'user'.

SCSS

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)

Global styles

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 4

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.

Autoprefixer

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.

Responsive layout

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.

Testing

Server tests

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/

Client tests (todo)

Jest is used on the client to test React components. Enzyme is used to help test, assert, manipulate, and traverse React components.

ESLint

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.

Connecting this template to an existing meteor backend

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

Meteor multi app accounts

What is not included?

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.

About

A Meteor 1.9, React 16, React Router 5, Bootstrap 4 Template

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published