Forms: Pattern Construction

WARNING! v0.13 was just released, and the tutorial is currently undergoing final testing. It's recommended that you DO NOT follow along until this message is removed (please check back tomorrow).

Mental model for the forms implementation

Clone the Starter App

In this step we'll checkout the starter project and get it running.

We'll be using a starter project so that we can focus on creating and refactoring the dialogs, and see them in a realistic context.

Clone the Project

To explain how the forms work, we're going to check out a project from GitHub that we'll build the forms into. The code we'll need is in a repository on GitHub under lore/lore-forms-pattern-tutorial.

Run this command to clone the server into your local environment:

$ git clone
$ git clone

Install Dependencies

Once the repo is cloned, navigate into the directory and install the dependencies:

$ cd lore-forms-pattern-tutorial
$ npm install

Start the Webpack Development Server

With the dependencies are installed, run the application by typing npm start.

$ npm start

A successful execution will produce output similar to this:

webpack-dev-server --hot --env.webpack=development --env.lore=development

build [==                  ] 10%
Project is running at http://localhost:3000/

webpack output is served from /
404s will fallback to /index.html

Build completed in 6.541s

Hash: 199de1b7032b223700a9
Version: webpack 3.12.0
Time: 6712ms

                 Asset   Size       Chunks                    Chunk Names
  favicons/favicon.ico   33.3 kB            [emitted]
 favicon-manifest.json   613 bytes          [emitted]
assets/images/logo.png   27.7 kB            [emitted]
        bundle.main.js   3.16 MB         0  [emitted]  [big]  main
      bundle.vendor.js   1.27 MB         1  [emitted]  [big]  vendor
            index.html   4.41 kB            [emitted]


webpack: Compiled successfully.

This step invokes Webpack to build the application and starts a development server so you can view it in the browser. But don't view it just yet - the application won't work until we start the mock API server.

Next Steps

Next we're going to start the mock API server.