• 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: Create Production Config

In this step we'll learn how to customize our configuration for different environments, and fix our redirect issue in production.

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

Environment-Specific Configurations

Lore is designed to support multiple deploy environments.

If you look inside the /config folder, you'll see another folder named /env that contains files named development.js and production.js. These files allow you to customize your configuration for different deploy environments.

The files in /config are meant to be your defaults; the settings that make most sense in development. But other environments, like staging and production, will have different needs, like as a different API, or different feature flags, or different rules about error reporting.

The /env folder is where you specify these differences, and they will override the default settings specified in /config.

Create Production Config

To get our application working on Now, we need to change the Auth0 configuration so that instead of redirecting the user to http://localhost:3000/auth/callback after login, they are instead redirected to https://lore-quickstart.now.sh/auth/callback (or whatever your chosen alias is set to).

To do this, open config/env/production.js. If you ignore the comments, the file is empty, and looks like this:

export default {

}

Update that file to override the redirect URI for Auth0 by adding this code:

export default {
  auth0: {
    redirectUri: 'https://lore-quickstart.now.sh/auth/callback'
  }
}

How does that override the setting?

During the build process, the /config folder is compiled into a single object, and made available through lore.config. To illustrate, take this partial config folder:

config
  |-- auth0.js
  |-- actions.js
  |-- ...

To convert the folder into an object, each file becomes a key/value pair, where the name of the file is the key, and what the file exports becomes the value.

That means the folder structure above would be converted into an object that looks like this:

config: {
  auth0: {
   // ...auth0.js...
  },
  actions: {
    // ...actions.js..
  }
}

The environment file in the /env folder then overrides this object.

So if we want to override the redirectUri property in the auth0.js config, then we simply need to provide an auth0 key, and then specify the property we want to override, which generates the code we used above:

export default {
  auth0: {
    redirectUri: 'https://lore-quickstart.now.sh/auth/callback'
  }
}

Visual Check-in

If everything went well, your application should still look like this (exactly the same).

Code Changes

Below is a list of files modified during this step.

config/env/production.js

export default {
  auth0: {
    redirectUri: 'https://lore-quickstart.now.sh/auth/callback'
  }
}

Next Steps

In the next section we'll publish the application to the web.