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"
}
}
