Mental model for the forms implementation
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.
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@github.com:lore/lore-forms-pattern-tutorial.git
$ git clone https://github.com/lore/lore-forms-pattern-tutorial.git
Once the repo is cloned, navigate into the directory and install the dependencies:
$ cd lore-forms-pattern-tutorial
$ npm install
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 we're going to start the mock API server.