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.
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
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
First, install the amplify CLI, per the Amplify Quick Start and configure Amplify:
Then make a basic folder structure - you can just ‘touch’ index.html and ‘package.json’.
1 2 3 4 5 6
And inside your app folder, initialize your amplify project with
Then, following the prompts as appropriate,
1 2 3 4 5 6 7 8 9 10 11 12 13
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 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
1 2 3 4
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
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
Once this is done, you can add hosting with
amplify add hosting, and then push any changes you’ve made to your app with
_Something wrong? Or was this helpful? Let me know - twitter @jamescgibson, Mastodon @firstname.lastname@example.org_