Quickstart
A quick dive into getting started with Lore
- 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: Create Production Build
In this step we'll learn how to build the application for production.
There is no branch for this step because it does not modify any code.
Build the Project
If you open up the package.json file you'll see two scripts related to building the project:
"scripts": {
"build:development": "npm run clean && webpack --env.webpack=production --env.lore=development",
"build:production": "npm run clean && webpack --env.webpack=production --env.lore=production -p",
...
},
Build the application for production by running this command:
npm run build:production
You should see output similar to this once it completes, which took 49 seconds in this example:
Build completed in 49.237s
Hash: e26aa54c61ee42b36fef
Version: webpack 2.4.1
Time: 49241ms
Asset Size Chunks Chunk Names
bundle.vendor.760c1aca95f06ca49cc5.js 197 kB 1 [emitted] vendor
favicons-226798db74552f749c8ab26e8bfae037/favicon-16x16.png 644 bytes [emitted]
favicons-226798db74552f749c8ab26e8bfae037/favicon-230x230.png 17 kB [emitted]
favicons-226798db74552f749c8ab26e8bfae037/favicon-96x96.png 5.87 kB [emitted]
favicons-226798db74552f749c8ab26e8bfae037/favicon.ico 33.3 kB [emitted]
favicons-226798db74552f749c8ab26e8bfae037/.cache 996 bytes [emitted]
favicon-manifest.json 877 bytes [emitted]
bundle.main.11e83aeeb2a9a9714d66.js 1.41 MB 0 [emitted] [big] main
favicons-226798db74552f749c8ab26e8bfae037/favicon-32x32.png 1.58 kB [emitted]
styles.main.11e83aeeb2a9a9714d66.css 1.15 kB 0 [emitted] main
bundle.main.11e83aeeb2a9a9714d66.js.map 12.4 MB 0 [emitted] main
styles.main.11e83aeeb2a9a9714d66.css.map 113 bytes 0 [emitted] main
bundle.vendor.760c1aca95f06ca49cc5.js.map 2.1 MB 1 [emitted] vendor
asset-manifest.json 472 bytes [emitted]
assets/images/favicon.png 266 kB [emitted] [big]
assets/images/logo.png 27.7 kB [emitted]
index.html 5.27 kB [emitted]
This build process will compile and minify all your assets and place them in a new folder called /dist at the root of your project.
Visual Check-in
If everything went well, your application should still look like this (exactly the same).
Code Changes
There are no code changes required for this step.
Next Steps
In the next section we'll publish the application to the web.