Hybrid app does not work after bundling the extension

App Developers Designer Extensions
1

Hello, I have developed a Hybrid app built with react, vite and tailwind CSS. So everything works smoothly when using localhost, meaning while working locally. So I wanted to test whether this app would work in production or not. For that, I ran the command “webflow extension bundle && vite build” which would eventually give a .zip file. I uploaded this zip file to test “internally” (available only in my workspace). And when I tried to open the app nothing appeared. When I inspected I could see in the network tab that the app was returning 404, meaning the app is not found. This is a problem now. I contacted the support before but they shrugged off the issue by saying - “This type of question falls outside of our Customer Support Policy”. So kindly help me solve this. I have been working on this app for 3 months, don’t let my efforts down the drain. I am hoping I will receive a proper solution this time. Thank you.

2

Hey @Shubham_Jain, the main difference between the local vs. bundled experience is that each Webflow App bundle is hosted on the Webflow CDN under a unique version subdirectory.

Any references (for scripts/images/links/etc) need to be relative, otherwise you’ll get 404s (since they’re not served from the root).

I believe this is not the default for Vite and you’ll need to make some config changes to set this behavior. Here’s an example of a Vite config for a Webflow app that sets ./ as the prefix for path references: wf-vue-vite-app/vite.config.js at main · dpim/wf-vue-vite-app · GitHub

3

Yes, I have changed the absolute paths and now it works. Also I have noticed that BrowserRouter in React doesn’t seem to work in the bundled version. HashRouter must be used for routing the paths. I have only one more issue though i.e., I am using some fonts which I have placed in the assets folder, these fonts are not being loaded with the status of 403. What permissions should I need to give and where?

4

Assets folder in the bundle subdirectory or in the Webflow site’s assets?

5

It was assets in my app bundle but anyway I solved this issue too.