Investigating Amplify

Here are my notes on creating a react app in amplify following the steps here:

To make this interesting I have started with an AWS user that has zero access rights. Rights will be added as needed. I am developing this on a mac.

Started with installing the amplify cli.

npm install -g @aws-amplify/cli

This starts with 5 warnings:

npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.

npm WARN deprecated kleur@2.0.2: Please upgrade to kleur@3 or migrate to ‘ansi-colors’ if you prefer the old syntax. Visit <\> for migration path(s).

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

node-pre-gyp WARN Using request for node-pre-gyp https download

npm WARN graphql-import@0.4.5 requires a peer of graphql@^0.11.0 || ^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.

I now have @aws-amplify/cli@1.1.7 installed.

Step 2 configure:

amplify configure

This fails with:

SyntaxError: Unexpected token ...
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)

nvm reveals that I am using node 8.0.0

Now move node up to the current lts version (10.15.3), repeat the cli install (same as before), now onto the configure:

This time it prompts me to login to aws and create a new user.

Apparently the minimum access rights are: AdministratorAccess

The user has been created and the access key stored in a profile.

Now I need to ensure that create-react-app is installed (javascript is very fashion conscious and all the cool kids now use yarn):

yarn global add create-react-app

Now working on the amplify init

Here I get prompted for a name (matching the app helps).


Environment (dev)

Preferred editor (VS Code)

Type of app (javascript).

Framework: (react).

There are several others here but the defaults work fine.

It then prompts you for a profile to use then starts doing the aws magic.

This creates all of the local config without yet pushing it to the cloud.

The next command is:

amplify add hosting

There are 2 options here: dev using http and prod using https.

For now I am going for dev and followed the defaults.

The following will deploy the app:

amplify publish

This will create the application in s3 and configure cloudformation infront of it.

My trivial app is now deployed.

Next step is to add authentication.

amplify add auth
amplify push
yarn add aws-amplify aws-amplify-react

I have added in the required boilerplate code then called: amplify publish

Testing creating an account hits one of my pet hates: invisible limits on password entry systems. The default cognito password rules require one Capital and one Symbol (already included lowercase and numbers).

The next trick will be to learn how to configure the join, login screens and verification codes – but this is outside the scope of this exercise.

To avoid leaving you with amazon bills there is the option of:

amplify delete

Mischief Managed.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s