• 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 4: Redeploy to Production

In this step we'll publish our production build to the web.

There is no branch for this step because it does not modify any code.

Redeploy to Now

With that change in place, redeploy the application to Now, but this time using the deploy:production script, which will also build the application before deploying it:

npm run deploy:production

Once the application is deployed, you'll get another random URL like lore-quickstart-jxuyvmeneg.now.sh. Copy that URL, and alias it to the domain you chose previously:

now alias lore-quickstart-jxuyvmeneg.now.sh lore-quickstart.now.sh

We just performed a zero-downtime deploy.

With the aliasing complete, navigate to that URL. This time, after you log in, you'll be redirected back to the production website, and the application will work like expect, only now it's hosted on a publicly accessible domain.

Modifying the Production Config API Server

It's important to highlight that if you look at the network requests for the application running on surge, you'll notice it's still making API calls to localhost:1337. This is important to callout because it means the application will only work for YOU, and only while the lore-tutorial-api server is running.

If you're deploying the application to production for real, it's likely using a different API server, and you'll want the production version of the application to behave different that when running on localhost for development.

To do that, open up config/env/production.js and set the production server for the default connection. For example, let's say the production API server is located at https://api.example.com. To set that for the production build, edit your production.js config to look like this:

export default {

  connections: {
    default: {
      apiRoot: 'https://api.example.com'
    }
  }

};

export default {

  connections: {
    default: {
      apiRoot: 'https://api.example.com'
    }
  }

}

export default {

  connections: {
    default: {
      apiRoot: 'https://api.example.com'
    }
  }

}

With that change in place, if you run npm run build:prod to rebuild the application, and then redeploy it to surge using the shortcut command (like surge dist lore-quickstart.surge.sh), you'll see the application will automatically change with API server it tries to communicate with, but only in production. When running on localhost for development the API server used will still be localhost:1337.

Visual Check-in

If everything went well, your application should still look like this (exactly the same) but will now be hosted on Now and built for production!

Code Changes

There are no code changes required for this step.

Next Steps

In the next section we'll talk about next steps.