How to deploy updated react-app code with SAM CLI

[tonybranfort]

Changes that I've made in the react-app (src\cfn-custom-resources\react-app\src) are not getting deployed after successful initial deployment.

Steps I've taken:

1. Deploy successfully for first time using using SAM CLI (Option 2 in README) straight from this git repo witout any changes (npm install, npm run build, sam build --use container, sam package..., sam deploy..). After this deploy, it's working as I'd expect - I can sign in & see the sample react app page.
2. Make minor change to src\cfn-custom-resources\react-app\src\App.js (just an update to explanation text to test code deploy)
3. Attempt to deploy update using same steps as 1 (npm install, npm run build, sam build --use container, sam package..., sam deploy..). All complete without errors.
4. Clear the CloudFront cache (just to make sure) : aws cloudfront create-invalidation --distribution-id E16D.. --paths "/*"

After the update is deployed with # 3 I can see:

• The only updated sam zip package in the s3 build bucket is the react-app handler (as I would expect) and I can see the change from # 2 in that zip file.
• Stack shows UPDATE_COMPLETE and stack events specifically shows ReactAppHandler UPDATE_COMPLETE with times matching update from # 3
• ReactAppHandler lambda fn has an updated time of when I executed # 3
• No log entries in CloudFront logs for ReactAppHandler when # 3 was executed. The only log entries are from when # 1 was executed (logs checked > 1 hour after # 3 completed)
• react-app s3 bucket has no new files including no new files in statics/js/ - all are from the # 1 deployment.

I'm guessing this is something obvious I'm missing - thanks for pointing me in the right direction.

[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.