Meteor/React Starter Project
A starter platform for Meteor projects.
DEMO WEBSITE: https://kickstart2018.eyeofthetiger.asia/
This project builds on my previous project Meteor/React Kickstart 2018.
New features:
Fill in settings/private/adminEmail to grant top level permissions to the user who registers with that email address.
All code is in Typescript. The front-end is React.
The project contains a complete user registration process using custom templates including email verification and (optionally) 2 factor authentication.
The project uses both Bootstrap 4 and Material UI design elements.
There are 3 pages in the default site, with a built-in rich text editor (Quill):
The Home page contains an implementation of the simple todos example from the Meteor Guide.
More info: https://www.meteor.com/tutorials/react/creating-an-app
The About page features the Quill rich text editor.
The Profile page features a form for uploading personal data as well as an image.
The project has session timeout features, with some settings which are configurable in the settings file.
This is not a complete list - it includes only the major packages used.
The approach I’ve followed is that which is recommended by the ReactJS guidelines. Composition is preferred over inheritance and dynamic features are controlled using props, state and lifecycle methods.
Official React docs: https://reactjs.org/docs/hello-world.html
I have converted all code to Typescript. This is made possible using the barbatus/typescript package.
Github: https://github.com/barbatus/typescript
The project uses Meteor’s “validated methods” package for managing data - providing a robust and flexible framework for building database apis. More info: https://guide.meteor.com/methods.html#validated-method
I personally use Microsoft VS Code with a number of extensions as noted below.
All project code resides in the imports folder, which contains separate folders as follows:
I have divided components into different groups in a way that seems intuitive to me:
There is a separate ‘modules’ folder which contains a number of function libraries. These are imported into the project components as needed:
Currently there is only one admin function provided. If logged in as an “admin” user (see settings), you will see an option to delete all non-admin users on the Profile page.
Meteor settings files should be stored in the .deploy folder. A template file is provided. You should have as a minimum a production and a staging version. These files should be excluded from git.
The following file names have been added to the included .gitignore file:
private/adminEmail - use this setting to specify the email address of 1 administrator
public/enhancedAuth - use these settings to enable/disable 2 factor authentication & change settings
active - Determines whether the app runs with 2FAmaxAttempts - Maximum number of failed attempts alloweddisplayCode - For development, display the auth code on screenprivate/enhancedAuth - These settings are used to store users’ 2FA private keys securely. More info: https://nodejs.org/api/crypto.html
iv - Initialisation vector (16 character random string in UTF-8 encoding)algorithm - Algorithm used to encrypt the private keypublic/session - use these settings to control session features
heartbeatInterval (integer) - interval between activity detection messages sent to server (ms - default: 300000)inactivityTimeout (integer) - length of time before inactive users are logged out (ms - default: 3600000)timeOutOn (boolean) - turn on or off the timeout feature (default: true)allowMultiSession - allow multiple client sessions for the same user. sessionTokenName - name of token for sessions (HTML localStorage)userDataKey - name of key for caching user data (HTML localStorage)private/smtp - populate these settings with your SMTP server configuration
2 Factor authentication is becoming increasingly necessary in apps and websites these days. This project uses the Speakeasy package and is configured to work with Google 2FA.
Github: https://github.com/speakeasyjs/speakeasy
By default Meteor sessions stay active indefinitely, as the user session data is stored in server side login tokens. There is an Accounts.config setting (loginExpirationInDays), however this creates bad UX since users could be logged out while interacting with the app. This project uses a combination of client side activity monitoring and server method calls to ensure that users are logged out after being inactive for a configurable period of time.
Settings for these features can be set in Meteor Settings.
You need to specify a settings file when you run Meteor otherwise there will be runtime errors.
Using NPM preconfigured script: npm start (See NPM Function Calls section)
A sample configuration for the Meteor Up package is provided. The config files are stored in .deploy in the project root.
Using NPM preconfigured script: npm run deploy (See NPM Function Calls section)
More info on MUP: http://meteor-up.com/
In the package.json file you will find 3 NPM function names:
I have been using both the ESLint and TSLint packages. The project contains a .eslintrc file which contains config settings that I found useful.
I’m also using the Prettier code formatter.
I have also experimented with the Flow package.
Planned additions to this project include:
The Speakeasy functions will fail if your system clock is not accurate to within a few seconds. Use an internet time checker (eg. https://time.is/) to calibrate your system clock.
Developing in Typescript can be tricky due to missing type definitions and also bugs in the IDE.
In addition to the npm types packages, the project includes a custom type definition file (index.d.ts) where I have added random type declaratios in order to silence the Typescript compiler. If you find you are missing type declarations you can add them here.
Hereward: https://github.com/hereward
MIT © 2018 Hereward Fenton