SecondForge

This post will likely become out of date very shortly as Amplify Improves. If it has been more than 2 months since this post, please consider this “reader beware”.

A few months ago, I noted how wonderful I found AWS Amplify. Since then, Amplify has only improved.

Amplify is a JavaScript library and CLI toolkit that (1) brings together several existing AWS serverless products into one easy-to-use package in your front end, and (2) provides an easy way to set up and manage the backend infrastructure those front end features would rely on.

With Amplify, you can get an almost Rails + Heroku like experience, e.g. using amplify add auth to add authentication to your application from front end through AWS Identity pool, amplify add hosting to set up S3 or S3 + CloudFront based hosting for the static assets of the site, and “amplify publish” to both deploy Amplify-generated CloudFront setups and simultaneously push static code to S3, much like heroku push.

Amplify additionally has some associated libraries to better integrate Amplify with popular front end JavaScript frameworks like React and Angular.

However, I had some trouble getting Amplify set up with React, ES6, and Webpack. I believe that at this time there are several library versions that are in flux, meaning that many existing tutorials are out of date.

At the time of writing, this should give you a functional setup. First, set up a new project with NPM. Note that this does not include the aws-amplify-react package.

First, install the amplify CLI, per the Amplify Quick Start and configure Amplify:

1
2

npm install -g @aws-amplify/cli
amplify configure

Then make a basic folder structure - you can just ‘touch’ index.html and ‘package.json’.

1
2
3
4
5
6

- amplify-js-app
    - index.html
    - package.json
    - webpack.config.js
    - /src
        |- app.js

And inside your app folder, initialize your amplify project with amplify init.

Then, following the prompts as appropriate,

1
2
3
4
5
6
7
8
9
10
11
12
13

npm init
npm install aws-amplify --save
npm install webpack --save-dev

npm install react --save
npm install react-dom --save

npm install babel-core@6 --save-dev
npm install babel-loader@7 --save-dev
npm install babel-preset-env --save-dev
npm install babel-preset-react --save-dev
npm install babel-polyfill --save
npm-install babel-runtime --save

Note that we’re using Babel 6 here. At the time of writing, Babel 7 had been released. Babel 7 renames several of the babel packages - for example, babel-runtime becomes @babel/runtime see package. However, at least to the best of my knowledge, there is some dependency in the React and / or aws-amplify packages that prevents using webpack + babel 7 + react + amplify together.

Once this is in, add the following scripts to your package.json:

1
2
3
4

"scripts": {
  "start": "webpack-dev-server --port 8080",
  "build": "webpack"
}

And setup your webpack.config.js as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react']
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new CopyWebpackPlugin(['index.html'])
  ]
};

Note that the key aspects here are: adding ‘.js’ and ‘.jsx’ to your resolve: extensions section, and adding the ‘CopyWebpackPlugin’ to your ‘plugins’ section.

To use this setup, you need an index.html in your project root that references ‘bundle.js’. You’ll need a file entrypoint in ‘src/app.js’ that will be compiled to ‘bundle.js’. In ‘src/app.js’, you can use the following imports:

1
2
3
4

import React from 'react';
import ReactDom from 'react-dom';
import Amplify from 'aws-amplify';
import awsmobile from './aws-exports';

Once this is done, you can add hosting with amplify add hosting, and then push any changes you’ve made to your app with amplify publish.

_Something wrong? Or was this helpful? Let me know - twitter @jamescgibson, Mastodon @jamescgibson@refactorcamp.org_