Serverless Stack Update to AWS Amplify

[jayair]

Updated: The update is live. You can view the PR for the update here. Here are the changes to the tutorial and the frontend. If you are looking for the older version of the tutorial, you can find it here.

---

What is going on

The frontend portion of the demo app covered in this guide is going to be updated to use AWS Amplify.

What is going to happen

The change is going to take place over the next few weeks. The basic logic of the notes app is going to remain the same but all the parts that interface with AWS are going to change. Also, some minor configuration changes to the backend (S3 bucket for file uploads) are going to be made. As a result the tutorial and the frontend repo will be updated. We will tag the older version, post a changeset, and host the older version for reference.

For folks that are eager to get started with Amplify, we have a working version of the demo app in a branch.

What should I do

If you are working through the tutorial there will be a changeset and a hosted version of the current tutorial to refer to. And use this comment thread for help if you have any questions.

Why the change

The current frontend of the tutorial needs three different libraries (AWS JS SDK, Cognito JS SDK, and sigv4Client) to talk to the backend. AWS Amplify wraps that all up and gives you a simple way to build a single-page app without having to deal with the added complexity. And you still have the option of using the AWS JS SDK in cases where you need to make calls to services not covered in this tutorial.

We had a chance to talk to the team behind Amplify and their goals align with the goals of Serverless Stack. We think this is going to simplify the tutorial without restricting what you can build once you complete it.

---

As always, feel free to let us know if you have any questions or concerns.

[jeff-kilbride]

@jayair Great to see Serverless Stack continuing to evolve! While looking for React / Serverless examples, I also came across an AWS post detailing their Mobile Hub which also uses Amplify:

https://aws.amazon.com/blogs/mobile/deploy-a-react-app-to-s3-and-cloudfront-with-aws-mobile-hub/

Will the new tutorial and docs be using Mobile Hub, too? Just wondering...

[jayair]

@jeff-kilbride The backend portion of the guide will pretty much remain the same (aside from some minor changes). The set up that we walk through is very similar to what MobileHub sets up for you. The main difference being that we try and explain the different services you are setting up while MobileHub does it for you. Our goal is to make sure that we explain our steps as well go along. So you have a good starting point if you decide to add or change the services you are using.

[bharloe]

Hey @jayair I can't make a PR right now but just thought I'd let you know there's a typo on the home page currently:

[pmahmud]

@jayair PR for ^ : #196

[walshe]

will it be hard to merge this in to my current mid flight serverless stack ?

[jayair]

@pmahmud @bharloe Thanks guys.

@walshe No it shouldn't be too hard. There isn't much of a structural change.

[tommedema]

This is a great change. One of the most difficult to understand issues for me when starting with serverless is the authentication part with Cognito. Reason is that in traditional applications we are used to communicating with our own backend to deal with authentication; whereas now the frontend and backend are communicating directly with cognito. Especially the frontend libraries that were added in the "old" guide were somewhat confusing, such as sigV4Client.js.

[jayair]

The update is live!

[jayair]

You can view the PR for the update here. Here are the changes to the tutorial and the frontend. If you are looking for the older version of the tutorial, you can find it here.

[tommedema]

@jayair very nice Jay; what surprised me is that Amplify only seems to have a single bucket configuration under Storage. Does that mean that an app can only ever have a single bucket?

[jayair]

@tommedema Yeah I think so. That's what I gathered from the docs (hopefully, the Amplify guys can confirm).

The bigger picture thing here is that Amplify is tied to the Mobile Hub setup. Hence the limited types of services you can configure with it. It just so happened that what we do in the tutorial is similar to what Mobile Hub does for you. So it's a good fit.

That said, I think a neat part of Amplify (and the reason why I think it's better than using the AWS JS SDK directly) is that you can still use the AWS JS SDK through it. I'll probably add a chapter on this but here is a sample from their docs https://aws.github.io/aws-amplify/media/quick_start.html#aws-services

Auth.currentCredentials()
  .then(credentials => {
    const route53 = new Route53({
      apiVersion: '2013-04-01',
      credentials: Auth.essentialCredentials(credentials)
    });

    // more code working with route53 object
    // route53.changeResourceRecordSets();
  })

Hope that makes sense.

[mjbf0748]

Hi,

I am developing a web application using this tutorial. I was wondering if anyone could help/give advice on how to approach this issue. I am trying to use 2 different dynamodb tables. So I want the users to access things from both. Is there anyway to set up the apis to make calls to both tables?

Thank you

[jayair]

@mjbf0748 It's pretty straight forward. Just make two dynamoDB calls instead of the one. As we do in this chapter - https://serverless-stack.com/chapters/add-a-create-note-api.html.

[mjbf0748]

Should I create two different functions? For example create.js and create2.js.

…

On Mon, Mar 26, 2018 at 3:16 PM Jay V ***@***.***> wrote: @mjbf0748 <https://github.com/mjbf0748> It's pretty straight forward. Just make two dynamoDB calls instead of the one. As we do in this chapter - https://serverless-stack.com/chapters/add-a-create-note-api.html. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#193 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AX2oR5gf-ZFpeNisAbjv9mm65VnRRZ8Nks5tiT6ggaJpZM4STtYm> .

[jayair]

@mjbf0748 If it's one API then you'll only need one function.

[mjbf0748]

@jayair To clarify, what I understand is that it when considering the create.js in https://serverless-stack.com/chapters/add-a-create-note-api.html, another const should be added referring to a different table and then make another call to dynamoDB using the new params.

[jayair]

@mjbf0748 Yup and because the two calls are asynchronous you might want to wait for them to finish.

[mjbf0748]

@jayair HTTP401: DENIED - The requested resource requires user authentication. I am getting this error in the console, does this strictly have to do with the cognito identity chapter. Do you have any suggestions? I believe the changes you told me to make will be successful once I resolve this. Thank you for your help!

[jayair]

@mjbf0748 Can you post this in the comments for the chapter you are having issues with?

[Tee88]

Thank you for making this tutorial.
Amplify's current version is 0.2.11 , is it safe to use it at this stage in production?

[jayair]

@Tee88 Good question. I haven't seen anything from their Amplify site that says that it isn't for production. We aren't using it for anything crazy complicated but we could double-check with them.