Is it possible to place the build/dist of react mini-apps in a subfolder on Webflow so that they can be embedded using the same domain name as the rest of the Webflow app?
Yes, it is possible to place the build/dist of React mini-apps in a subfolder on Webflow so that they can be embedded using the same domain name as the rest of the Webflow app.
To achieve this, you can follow the steps below:
Create a new folder within your Webflow project for your React mini-app. You can do this by going to your project dashboard and clicking on the "Assets" tab. From there, click the "New Folder" button and give it a name, such as "react-app".
Build your React mini-app using tools like Create React App or any other build tool of your choice. Once the build process is complete, you should have a bundle of static files that you can deploy.
Upload the contents of the build/dist folder of your React mini-app to the newly created "react-app" folder in your Webflow project. You can do this by selecting the files and dragging them into the folder on the Webflow Assets panel.
Once the files are uploaded, you can embed your React mini-app within a Webflow page using an HTML Embed element. To add an HTML Embed element, you can click the plus sign (+) at the bottom of the page within the Webflow Designer and search for "HTML Embed" in the element list.
Customize the HTML Embed element by adding the necessary code to load your React mini-app. This can include linking to the JavaScript and CSS files generated during the build process, as well as creating a container element where your mini-app will be rendered.
Finally, position and style the HTML Embed element within your Webflow page to achieve the desired layout and appearance. You can use Webflow's visual designer to make any necessary adjustments.
By following these steps, you will be able to embed your React mini-app within a subfolder of your Webflow project while using the same domain name as the rest of your Webflow app.
Additional Questions:
- How do I create a new folder within a Webflow project for my mini-app?
- Can I use a different build tool for my React mini-app instead of Create React App?
- Are there any limitations on what can be placed in a subfolder in Webflow?
