• Introduction
• Setup
• Overview
• 1. Install the CLI
• 2. Create the App
• 3. Run the App
• 4. Setup the API
• Layout
• Overview
• 1. Install Bootstrap
• 2. Add Custom Styles
• 3. Add the Header
• Routing
• Overview
• 1. Convert Title to a Link
• 2. Add Feed to Routes
• Data Structure
• Overview
• 1. Add Mock Data to Feed
• 2. Create Tweet Component
• 3. Add Mock User Data
• Fetching Data
• Overview
• 1. Set API Location
• 2. Create Tweet Model
• Convention over Configuration
• 3. Connect Feed Component
• 4. Display Loading Message
• 5. Fetch User for Tweet
• Authentication
• Overview
• 1. Add Profile to Layout
• 2. Add Auth0 Config
• 3. Add Login Page
• 4. Redirect to Login
• 5. Add Callback Route
• 6. Add Logout Page
• 7. Fetch Current User
• 8. Save User to Context
• Server
• Overview
• 1. Clone the API Server
• 2. Parse the Collection
• 3. Parse the Model
• 4. Add Unauthorized Experience
• 5. Add Authorization Header
• Pagination
• Overview
• 1. Add Pagination Metadata
• 2. Paginate the Tweets
• 3. Add Pagination Links
• 4. Improve User Experience
• Infinite Scrolling
• Overview
• 1. Create Load More Button
• 2. Create Infinite Scrolling List
• 3. Convert the Feed
• Cleanup
• Overview
• 1. Remove Unnecessary Code
• Dialogs
• Overview
• 1. Add Create Button
• 2. Mounting Dialogs
• 3. Add Create Dialog
• 4. Simplify the Dialog
• 5. Generate Dialog via Hook
• 6. Add Edit Dialog
• 7. Add Delete Dialog
• Authorization
• Overview
• 1. Hide Edit Link
• 2. Hide Delete Link
• 3. Alternative Approach
• Optimistic Updates
• Overview
• 1. Freeze Pagination Data
• 2. Display New Tweets
• 3. Display Optimistic Tweets
• 4. Add Optimistic Values
• 5. Show Optimistic Visual Cues
• 6. Hide Deleted Tweets
• Normalization
• Overview
• 1. Normalize Tweet Response
• Filtering
• Overview
• 1. Add Filter
• 2. Display User Tweets
• WebSockets
• Overview
• 1. Add WebSocket Support
• 2. Send Client ID to API
• Publishing
• Overview
• 1. Create Production Build
• 2. Deploy to Production
• 3. Create Production Config
• 2. Redeploy to Production
• Next Steps
• Overview
• Misc
• Installing Node
• Completed Project

Step 3: Run the Application

With the dependencies 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.

You can learn more about Lore's webpack config here.

View the Application

Once the application is built, you can view it by navigating to http://localhost:3000. Once you do, you should see this:

If you want to change the port the webpack dev server runs on, you can learn how to do that here.

However, if you plan on following along with this Quickstart, it is strongly recommended that you do not change the port.

Later in the Quickstart we'll be integrating with a real authentication server, and the application will need to be running on port 3000 to do so.

Next Steps

Next we're going to setup the mock API server we'll be using for this Quickstart.