How to deploy updated react-app code with SAM CLI about cloudfront-authorization-at-edge

[ottokruse]

Deploy successfully for first time using using SAM CLI (Option 2 in README) straight from this git repo witout any changes

Always great to hear that all works straight out of the box!

About your issue. I had to peak at the SAM template and I think I can explain what is going on and what you can do.

Looking at the ReactApp in the template, none of it's properties will change, if you update the React app code. Therefore, CloudFormation will not update this resource.

A trick to force update, is to add a dummy parameter, eg "Version". Even though that parameter is not used by the handler, CloudFormation does not know that, and will issue the update because it sees an input property has changed:

ReactApp:
  Type: Custom::ReactApp
  Condition: CreateCloudFrontDistributionSpaMode
  Properties:
    ServiceToken: !GetAtt ReactAppHandler.Arn
    BucketName: !Ref S3Bucket
    UserPoolArn: !If
      - CreateUserPoolAndClient
      - !GetAtt UserPool.Arn
      - !Ref UserPoolArn
    ClientId: !If
      - CreateUserPoolAndClient
      - !Ref UserPoolClient
      - !Ref UserPoolClientId
    CognitoAuthDomain: !Ref UserPoolDomainLookup
    RedirectPathSignIn: !Ref RedirectPathSignIn
    RedirectPathSignOut: !Ref RedirectPathSignOut
    OAuthScopes: !Join
      - ","
      - !Ref OAuthScopes
    SignOutUrl: !Ref SignOutUrl
    Version: 1  # Dummy field, change this to force CloudFormation to deploy this resource if none of the other properties change

(There is a similar field for the Lambda functions already, where this same issue occurs during development.)

Let me know if that works for you.

Now to the question, how is this supposed to work? Well I guess we did not suppose people would use the provided React app deployment mechanism to deploy updates too. Instead we figured they would just upload to the S3 bucket directly (using a utility such as s3-spa-upload).

This could use some better instructions in the docs! (For which PR's are appreciated by the way)

[tonybranfort]

Both of those options definitely work for me. That was really my question - how should this work? I suspected that the change wasn't getting triggered in the CloudFormation template but wanted to make sure I wasn't missing something.

Thanks for the full working example here and fast response to my question. I submitted a PR to update the README.

[tonybranfort]

And just to confirm that it worked - adding the dummy parameter Version to template.yaml ReactApp resource works. Running build and deploy steps after updating the react-app code and updating the value of the Version (subsequent deploys) did deploy the react-app code fully (to the s3 bucket).

Thanks again for your work and help.