03-fetch

Step 3 - Fetching from server

Setup

Add dependencies for API server:

npm install --save express body-parser lodash

Add start:api script to package.json to run API server:

{
  "scripts": {
    "build": "webpack --progress --colors --devtool source-map",
    "build:watch": "webpack --watch --progress --colors --devtool source-map",
    "eslint": "eslint .",
    "lint": "npm run eslint",
    "start:api": "node api-server.js",
    "test": "npm run lint"
  }
}

Run API server:

npm run start:api

Install whatwg-fetch & es6-promise libraries to polyfill Fetch API:

npm install --save whatwg-fetch es6-promise

Install imports-loader & exports-loader to shim whatwg-fetch:

npm install --save-dev imports-loader exports-loader

Update webpack.config.js to shim fetch with imports-loader & exports-loader:

var webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry: './src/index',
    output: {
        path: path.join(__dirname, 'src/dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loader: 'babel',
                include: path.join(__dirname, 'src')
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        })
    ]
};

Rerun build:watch task:

npm run build:watch

Tasks

• Remove emails constant in EmailApp, and replace with new emails property on state that is set from fetch call to the API inside componentDidMount

Next

Go to Step 4 - Long polling.

Resources

• Fetch API & Github's fetch polyfill
• Learning ES6: Promises
• Interactivity and Dynamic UIs
• Lifecycle Methods
• Using webpack with shims and polyfills
• Postman