Issue with React Admin Application

[aquibchiniwala]

After deployment if the saas boost through install.ps the link to admin app returns error “You need to enable JavaScript to run this app”.

Please can someone help me with this?

[PoeppingT]

Hi @aquibchiniwala , thanks for opening this bug report! There is a similar issue called out in #83 which mentions that sometimes due to the inconsistent nature of SaaS Boost provisioning the admin email will come through before the admin UI is ready. If you wait five minutes or so and refresh, does that solve the issue?

If not, here's a few things you can try to troubleshoot your issue:

1. Which web browser are you using? Do you have Javascript enabled for your web browser? You can see instructions for how to do so here: https://www.enable-javascript.com/
2. When on that page, try opening the Web Developer Console and seeing if there are any errors you can investigate in the console log.
3. The Admin UI is hosted by AWS CloudFront and backed by an S3 bucket. Try inspecting the resources in the AWS console: CloudFront hosts the distribution, and you can inspect that distribution to see which S3 bucket backing that distribution. Do you see any obvious errors with the CloudFront distribution? Does it exist? Take a look at the S3 bucket, it should have resources closely mirroring what you can see in client/web in the repository. In particular, you should see (when to navigate to static/js/ in your S3 bucket) many ***.chunk.js files, comprising the Admin UI application itself.

Good luck with your investigation! If you solve the issue yourself it would be greatly appreciated if you came back and commented on this issue with your findings.

[acorreab]

I have the same problem, I received this on the email on Monday:

You can login to your AWS SaaS Boost environment at https://d375r3egehc3dk.cloudfront.net

But this link have no error only show me a blank page. I tried the three points that you described and everything seems to be right

[PoeppingT]

Hey @acorreab, thanks for the extra info.

Taking a look at your link it looks like requests for the static javascript and css files expected to be served from your S3 bucket by CloudFront are instead being responded to with the default HTML. This likely means that either your S3 bucket doesn't have the proper files or that your CloudFront distribution is hitting errors attempting to read from the S3 bucket.

Here's a few things you can try:

1. Do the files being requested by the application exist in your S3 bucket? The S3 bucket should be named something of the form sb-<env>-webs3bucket-eegh6hookm6r where <env> is your environment name, and you can inspect the contents of that bucket through the AWS console. If they don't, try updating the web application using the installer, paying special attention to make sure there are no errors during that process.
2. Another option is that there was some problem creating the bucket policy for that S3 bucket, leading to CloudFront getting AccessDenied errors while attempting to read those objects. Looking at the same S3 bucket in the AWS Console, you can look at the "Permissions" tab and scroll down to "Bucket Policy" to view the access policy. Does it allow your CloudFront distribution to access it? Mine looks like this, and yours should be similar (but for resource names):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E3M90CP0D5IG7B"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::sb-test-webs3bucket-eegh6hookm6r/*"
        },
        {
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::sb-test-webs3bucket-eegh6hookm6r/*",
                "arn:aws:s3:::sb-test-webs3bucket-eegh6hookm6r"
            ],
            "Condition": {
                "Bool": {
                    "aws:SecureTransport": "false"
                }
            }
        }
    ]
}

If you've tried both of the above (including using the installer to update the web application) and found no issues, please comment on this issue with a description of what changes you've made to your local SaaS Boost repository so that we can try to reproduce this issue ourselves.

[acorreab]

thanks for your help. I tried both points:

1. I have this bucket sb-dev-webs3bucket-1w911d1z46gt1 with 653 objets
2. I have the same policy:
   {
   "Version": "2012-10-17",
   "Statement": [
   {
   "Effect": "Allow",
   "Principal": {
   "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E93JVGWGLT3CP"
   },
   "Action": "s3:GetObject",
   "Resource": "arn:aws:s3:::sb-dev-webs3bucket-1w911d1z46gt1/"
   },
   {
   "Effect": "Deny",
   "Principal": "",
   "Action": "s3:",
   "Resource": [
   "arn:aws:s3:::sb-dev-webs3bucket-1w911d1z46gt1/",
   "arn:aws:s3:::sb-dev-webs3bucket-1w911d1z46gt1"
   ],
   "Condition": {
   "Bool": {
   "aws:SecureTransport": "false"
   }
   }
   }
   ]
   }

For this buckt in the access column I have: Bucket and non-public objects
In the bucket policy have this message: Public access is not allowed because the block public access setting is enabled for the bucket

I use the installer to update the web application 2 times there was no error and I got he same result. I have not made any changes to my local SaaS Boost repository

[aquibchiniwala]

The issue is with the build files of the react app generated in s3 bucket. The files stored in the S3 are separated using wrong slash as folder separator when building and deploying with windows machine. No issue occurs when deployment is done through linux machine

[acorreab]

this is an example of a file path in the bucket sb-dev-webs3bucket-1w911d1z46gt1

static\css\main.2002f951.chunk.css

this is wrong?

[brtrvn]

See #189
We just dealt with this for the other files the installer uploads to S3 when on WIndows. Missed the web bucket uploads.

[PoeppingT]

#189 has been merged. @acorreab try git fetch and git pull for the latest version of main and rerunning the installer for the "Update Web Application" step. This should clear your S3 bucket, rebuild the web application, and re-upload those files to your S3 bucket with the corrected path separators.

[PoeppingT]

Hey @aquibchiniwala , did #189 fix the issue you were seeing?

[aquibchiniwala]

Yes the issue is solved thank you @PoeppingT