Forge Custom UI - Confluence - 403 when requesting static assets

Hi:
I have the following setup for my custom-ui forge macro for Confluence:

I also have the following in manifest file:

# manifest.yml
resources:
  - key: custUiApp
    path: static/custUiApp/build
permissions:
  content:
    styles:
      - unsafe-inline

Custom UI app in: Tailwind + React + TS + Storybook; hence the setup was a bit complicated.
Running python -m http.server from within static/custUiApp/build correctly renders the app on the browser.

However, after a successful forge deploy, the macro load fails on Confluence. Error on dev console:

GET https://4060645a-078e-4938-b32b-ed75787414c5.cdn.prod.atlassian-dev.net/static/css/main.89081bed.css net::ERR_ABORTED 403

https://4060645a-078e-4938-b32b-ed75787414c5.cdn.prod.atlassian-dev.net/1c75c073-533e-48f4-9394-b814b7a378e8/c5a72cdd-c031-4e8a-b138-758ac042402e/7656b2fc-2e52-4bac-8edf-cb65090c94b8/<myAppName>/

and

GET https://4060645a-078e-4938-b32b-ed75787414c5.cdn.prod.atlassian-dev.net/static/js/main.579a7a5a.js net::ERR_ABORTED 403

https://4060645a-078e-4938-b32b-ed75787414c5.cdn.prod.atlassian-dev.net/1c75c073-533e-48f4-9394-b814b7a378e8/c5a72cdd-c031-4e8a-b138-758ac042402e/7656b2fc-2e52-4bac-8edf-cb65090c94b8/<myAppName>/

Could you assist me in resolving this?

Thanks,
Biswa


Update:
The following edit to permissions didn’t resolve:

permissions:
  content:
    styles:
      - unsafe-inline # Needed to load inline css classes from atlas kit
    scripts:
      - unsafe-inline
      - unsafe-hashes
      - unsafe-eval
      - "blob:"

However, if I copied the build folder of a working basic app (without tailwind + storybook … etc), it worked. So my hypothesis is that there’s something within the generated css/js that might be causing this, but I am uncertain what that is.

File Contents

//tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

//index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//App.tsx

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

//package.json
{
  "name": "myApp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@atlaskit/button": "^16.3.5",
    "@atlaskit/css-reset": "^6.3.13",
    "@atlaskit/lozenge": "^11.1.11",
    "@atlaskit/theme": "^12.1.9",
    "@forge/bridge": "^2.4.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "tailwindcss": "^3.1.8",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-webpack5": "^6.5.10",
    "@storybook/manager-webpack5": "^6.5.10",
    "@storybook/node-logger": "^6.5.10",
    "@storybook/preset-create-react-app": "^4.1.2",
    "@storybook/react": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "babel-plugin-named-exports-order": "^0.0.2",
    "prop-types": "^15.8.1",
    "sass": "^1.54.4",
    "webpack": "^5.74.0"
  }
}

I ran into the same problem - worked fine with forge tunnel but got 403s after deploying. Turns out that static assets need to use a relative path and my bundler was using an absolute path by default.

I found a small section of the docs that explains how to access static assets.

Might be worth taking a look to see if this helps you also :slight_smile:

1 Like