meteor-example-form-react is a sample Meteor 1.8 application that illustrates how to use Uniforms for form development.

Some of the features of this example:

Installation

First, install Meteor.

Second, download this repository to your computer. You can download it as a zip file, or you can click the “Use as template” button to create your own copy of the system, then clone it to your local computer.

Third, cd into the app/ directory of your local copy of the repo, and install third party libraries with:

$ meteor npm install

Running the system

Once the libraries are installed, you can run the application by invoking the “start” script in the package.json file:

meteor npm run start

> meteor-example-form-react@ start /Users/philipjohnson/github/ics-software-engineering/meteor-example-form-react/app
> meteor --no-release-check --settings ../config/settings.development.json

[[[[[ ~/github/ics-software-engineering/meteor-example-form-react/app ]]]]]

=> Started proxy.                             
=> Started MongoDB.                           
W20190718-11:08:30.749(-10)? (STDERR) Note: you are using a pure-JavaScript implementation of bcrypt.
W20190718-11:08:30.770(-10)? (STDERR) While this implementation will work correctly, it is known to be
W20190718-11:08:30.771(-10)? (STDERR) approximately three times slower than the native implementation.
W20190718-11:08:30.771(-10)? (STDERR) In order to use the native implementation instead, run
W20190718-11:08:30.771(-10)? (STDERR) 
W20190718-11:08:30.771(-10)? (STDERR)   meteor npm install --save bcrypt
W20190718-11:08:30.771(-10)? (STDERR) 
W20190718-11:08:30.771(-10)? (STDERR) in the root directory of your application.
=> Started your app.

=> App running at: http://localhost:3000/

Note regarding “bcrypt warning”:

You will get the following message when you run this application:

Note: you are using a pure-JavaScript implementation of bcrypt.
While this implementation will work correctly, it is known to be
approximately three times slower than the native implementation.
In order to use the native implementation instead, run

  meteor npm install --save bcrypt

in the root directory of your application.

On some operating systems (particularly Windows), installing bcrypt is much more difficult than implied by the above message. Bcrypt is only used in Meteor for password checking, so the performance implications are negligible until your site has very high traffic. You can safely ignore this warning without any problems during initial stages of development.

Viewing the running app

If all goes well, the application will appear at http://localhost:3000.

ESLint

You can verify that the code obeys our coding standards by running ESLint over the code in the imports/ directory with:

meteor npm run lint

Prerequisites

To best understand this application, it is useful to familiarize yourself with:

Walkthrough

The landing page for this application provides the Create Student form:

This form has the following input controls:

A filled out but not yet submitted Create Student form looks like this:

After submission, the page pops up an alert showing the submission was successful:

Also note that after dismissing the alert, there is a link of the Create Student page to a page where you can edit the document. Here is this page:

You can edit the fields, then click ‘Update’ to save the changes.

Screencast

Watch a 35 minute screencast explaining this system at https://www.youtube.com/watch?v=ZCHf_rNbDaM.

About the uncaught Invariant Violation

When trying to adapt this code to your own system, you may run into an “Uncaught Invariant Violation” error such as the following:

Uncaught Invariant Violation: Unrecognised schema: [object Object]
    at invariant (http://localhost:3000/packages/modules.js?hash=47f8337f349efabcae6273a0f71bd738a87021b9:30144:15)
    at createSchemaBridge (http://localhost:3000/packages/modules.js?hash=47f8337f349efabcae6273a0f71bd738a87021b9:106086:29)
    at _class.BaseForm (http://localhost:3000/packages/modules.js?hash=47f8337f349efabcae6273a0f71bd738a87021b9:105699:50)

The reason for this error is that your code has not imported the Uniforms Simple Schema Bridge. You should include the following import statement in all files containing Uniforms-based forms:

import 'uniforms-bridge-simple-schema-2';

Including this import statement will fix the error.