Cannot manage to make external CSS files to work

Forge Forge UI Kit and Custom UI
,
1

For some reason, I cannot manage to make my css to load correctly on my Forge app.

My manifest points to my entry point folder:

resources:
  - key: main
    path: static/configurator-app/build

Inside that folder I do have a valid index.html with a css reference:
<link rel="stylesheet" href="/index.de88c23a.css">

And in my test environment I can see it on the iframe:

image
image1272×223 17.8 KB

So I’m sure I’m deploying it correctly. But while checking the file by trying to access it directly I get this:

`SignatureDoesNotMatch` The request signature we calculated does not match the signature you provided. Check your key and signing method.AKIAI6KXVIDACYGABNBQAWS4-HMAC-SHA256 20210828T204529Z 20210828/us-west-2/s3/aws4_request 784e78859ca7ab78042b56f115d3b1bf264a6e850fc213c0a695f827fd6f40386666bde41133915a44e8c68e003e9df061c8f66025ca4d854f561c0a62a615e041 57 53 34 2d 48 4d 41 43 2d 53 48 41 32 35 36 0a 32 30 32 31 30 38 32 38 54 32 30 34 35 32 39 5a 0a 32 30 32 31 30 38 32 38 2f 75 73 2d 77 65 73 74 2d 32 2f 73 33 2f 61 77 73 34 5f 72 65 71 75 65 73 74 0a 37 38 34 65 37 38 38 35 39 63 61 37 61 62 37 38 30 34 32 62 35 36 66 31 31 35 64 33 62 31 62 66 32 36 34 61 36 65 38 35 30 66 63 32 31 33 63 30 61 36 39 35 66 38 32 37 66 64 36 66 34 30 33 38GET /index.ddf710ca.css host:3463bc0e-201d-4937-b3a6-803b3f6f37a3.cdn.prod.atlassian-dev.net x-amz-content-sha256:e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 x-amz-date:20210828T204529Z host;x-amz-content-sha256;x-amz-date e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b85547 45 54 0a 2f 69 6e 64 65 78 2e 64 64 66 37 31 30 63 61 2e 63 73 73 0a 0a 68 6f 73 74 3a 33 34 36 33 62 63 30 65 2d 32 30 31 64 2d 34 39 33 37 2d 62 33 61 36 2d 38 30 33 62 33 66 36 66 33 37 61 33 2e 63 64 6e 2e 70 72 6f 64 2e 61 74 6c 61 73 73 69 61 6e 2d 64 65 76 2e 6e 65 74 0a 78 2d 61 6d 7a 2d 63 6f 6e 74 65 6e 74 2d 73 68 61 32 35 36 3a 65 33 62 30 63 34 34 32 39 38 66 63 31 63 31 34 39 61 66 62 66 34 63 38 39 39 36 66 62 39 32 34 32 37 61 65 34 31 65 34 36 34 39 62 39 33 34 63 61 34 39 35 39 39 31 62 37 38 35 32 62 38 35 35 0a 78 2d 61 6d 7a 2d 64 61 74 65 3a 32 30 32 31 30 38 32 38 54 32 30 34 35 32 39 5a 0a 0a 68 6f 73 74 3b 78 2d 61 6d 7a 2d 63 6f 6e 74 65 6e 74 2d 73 68 61 32 35 36 3b 78 2d 61 6d 7a 2d 64 61 74 65 0a 65 33 62 30 63 34 34 32 39 38 66 63 31 63 31 34 39 61 66 62 66 34 63 38 39 39 36 66 62 39 32 34 32 37 61 65 34 31 65 34 36 34 39 62 39 33 34 63 61 34 39 35 39 39 31 62 37 38 35 32 62 38 35 3513811VPVCX5G3N43pinWuLfKYxSUAiGtZ4bUMoHkpd5b8mMYtlvq6s0tCGfF2Qtm8Wc7ckD7LanXtTFp2C4eYN2HT+U=

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>

<Code>SignatureDoesNotMatch</Code>

<Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message>

<AWSAccessKeyId>AKIAI6KXVIDACYGABNBQ</AWSAccessKeyId>

<StringToSign>AWS4-HMAC-SHA256 20210828T204529Z 20210828/us-west-2/s3/aws4_request 784e78859ca7ab78042b56f115d3b1bf264a6e850fc213c0a695f827fd6f4038</StringToSign>

<SignatureProvided>6666bde41133915a44e8c68e003e9df061c8f66025ca4d854f561c0a62a615e0</SignatureProvided>

<StringToSignBytes>41 57 53 34 2d 48 4d 41 43 2d 53 48 41 32 35 36 0a 32 30 32 31 30 38 32 38 54 32 30 34 35 32 39 5a 0a 32 30 32 31 30 38 32 38 2f 75 73 2d 77 65 73 74 2d 32 2f 73 33 2f 61 77 73 34 5f 72 65 71 75 65 73 74 0a 37 38 34 65 37 38 38 35 39 63 61 37 61 62 37 38 30 34 32 62 35 36 66 31 31 35 64 33 62 31 62 66 32 36 34 61 36 65 38 35 30 66 63 32 31 33 63 30 61 36 39 35 66 38 32 37 66 64 36 66 34 30 33 38</StringToSignBytes>

<CanonicalRequest>GET /index.ddf710ca.css host:3463bc0e-201d-4937-b3a6-803b3f6f37a3.cdn.prod.atlassian-dev.net x-amz-content-sha256:e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 x-amz-date:20210828T204529Z host;x-amz-content-sha256;x-amz-date e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855</CanonicalRequest>

<CanonicalRequestBytes>47 45 54 0a 2f 69 6e 64 65 78 2e 64 64 66 37 31 30 63 61 2e 63 73 73 0a 0a 68 6f 73 74 3a 33 34 36 33 62 63 30 65 2d 32 30 31 64 2d 34 39 33 37 2d 62 33 61 36 2d 38 30 33 62 33 66 36 66 33 37 61 33 2e 63 64 6e 2e 70 72 6f 64 2e 61 74 6c 61 73 73 69 61 6e 2d 64 65 76 2e 6e 65 74 0a 78 2d 61 6d 7a 2d 63 6f 6e 74 65 6e 74 2d 73 68 61 32 35 36 3a 65 33 62 30 63 34 34 32 39 38 66 63 31 63 31 34 39 61 66 62 66 34 63 38 39 39 36 66 62 39 32 34 32 37 61 65 34 31 65 34 36 34 39 62 39 33 34 63 61 34 39 35 39 39 31 62 37 38 35 32 62 38 35 35 0a 78 2d 61 6d 7a 2d 64 61 74 65 3a 32 30 32 31 30 38 32 38 54 32 30 34 35 32 39 5a 0a 0a 68 6f 73 74 3b 78 2d 61 6d 7a 2d 63 6f 6e 74 65 6e 74 2d 73 68 61 32 35 36 3b 78 2d 61 6d 7a 2d 64 61 74 65 0a 65 33 62 30 63 34 34 32 39 38 66 63 31 63 31 34 39 61 66 62 66 34 63 38 39 39 36 66 62 39 32 34 32 37 61 65 34 31 65 34 36 34 39 62 39 33 34 63 61 34 39 35 39 39 31 62 37 38 35 32 62 38 35 35</CanonicalRequestBytes>

<RequestId>13811VPVCX5G3N43</RequestId>

<HostId>pinWuLfKYxSUAiGtZ4bUMoHkpd5b8mMYtlvq6s0tCGfF2Qtm8Wc7ckD7LanXtTFp2C4eYN2HT+U=</HostId>

...

</Error>

What I’m missing here?

2

BTW, using the tunnel it works, it’s only by running the app with no tunnel after deploy that the CSS doesn’t load

3

This one answer helped me in similar case

1 Like
4

Hi @DomingoLupo, as @must-have-plugins has linked, Forge custom UI apps are not hosted at the root of a domain.

Since the static assets of a custom UI app are distributed via a URL with a particular path that identifies your app, you should use relative paths when accessing these assets from your custom UI app. For example, instead of including an image at "/assets/image.png" , you should use "./assets/image.png".

5

Thank you guys! that solved the issue I had

1 Like