• 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: Set the API Location

In this step we're going to set the location of the API server.

You can view the finished code for this step by checking out the fetching.1 branch of the completed project.

The Config Folder

At the root of your project is a folder called /config. This folder contains files that expose all the configuration settings for Lore, so that you can tailor the framework's behavior to meet the specific needs of your application.

Navigate into this folder and open a file called connections.js. Toward the top of the connections file you'll see a commented out line that looks like this:

// config/connections.js
...
  default: {

    // apiRoot: 'https://api.example.com',

    ...
  }
...

Commented out lines like this exist across all of the config files, and they reflect the built-in defaults that Lore uses. In this case, this comment tells us that Lore assumes the API is located at https://api.example.com.

Lore is designed to interact with multiple API endpoints. The config settings for each API is called a connection. New projects begin configured for a single API, and this connection is named default.

You can learn more about the connections file here.

Since this is not where our API is located, uncomment that line and change it to http://localhost:1337, so that Lore knows where the API can be found:

// config/connections.js
...
  apiRoot: 'http://localhost:1337',
...

With this change in place, we're almost ready to fetch data.

Visual Check-in

If everything went well, your application should now look like this. Exactly the same as before :)

Code Changes

Below is a list of files modified during this step.

config/connections.js

export default {
  default: {
    apiRoot: 'http://localhost:1337'
  }
};

export default {
  default: {
    apiRoot: 'http://localhost:1337'
  }
}

export default {
  default: {
    apiRoot: 'http://localhost:1337'
  }
}

Next Steps

Next we're going to create our tweet model.