• 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 1: Download API Server

In this step we’ll clone and run the API server that we'll need for the rest of this Quickstart.

Clone the Server

The server we'll need is in a repository on GitHub under lore/lore-tutorial-api. Run this command to clone the server into your local environment:

$ git clone git@github.com:lore/lore-tutorial-api.git

$ git clone https://github.com/lore/lore-tutorial-api.git

Install Dependencies

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

$ cd lore-tutorial-api
$ npm install

Stop the Mock API Server

Once the dependencies are installed, stop the mock server (Ctrl+C). We'll need the port it's currently running on (1337) to be free so that the Sails server can bind to it.

Start the Real API Server

Once the mock server is stopped, and port 1337 is free again, start the lore-tutorial-api server using npm start. A successful startup will produce console output similar to this:

$ npm start

info:
info:                .-..-.
info:
info:    Sails              <|    .-..-.
info:    v0.12.14            |\
info:                       /|.\
info:                      / || \
info:                    ,'  |'  \
info:                 .-'.-==|/_--'
info:                 `--'-------'
info:    __---___--___---___--___---___--___
info:  ____---___--___---___--___---___--___-__
info:
info: Server lifted in `/Users/jchansen/lore/lore-tutorial-api`
info: To see your app, visit http://localhost:1337
info: To shut down Sails, press CTRL + C at any time.

  debug: -------------------------------------------------------
  debug: :: Sun Mar 25 2018 21:21:26 GMT-0700 (MST)

  debug: Environment : development
  debug: Port        : 1337
  debug: -------------------------------------------------------

If you now navigate to http://localhost:1337 you will see a webpage showing the API routes:

{
  tweets: "http://localhost:1337/tweets",
  users: "http://localhost:1337/users",
  user: "http://localhost:1337/user"
}

Visual Check-in

At this point our application no longer works - this is epected. If you refresh your browser, you should see this error in the console:

Expected models to be an array but got [Object {data: Array[5], meta: Object}].
Did you forget to override parse to extract the models?

We'll resolve that issue in the next step and restore our application's functionality.

Next Steps

Next we're going to update our application to work with the new API.