5/17/2023 0 Comments Iframe react![]() To override this, specify the homepage in your package.json, for example: "homepage": "", Let’s take a closer look at the index.html file:īy default, Create React App produces a build assuming your app is hosted at the server root. ![]() This will create an optimized production build which will produce an index.html file (the main entry point to the React app) and a minified React javascript file, inside the /build and /build/static folders respectively. But first, let’s build our React project: $ npm run build Let’s do a quick refresher on how React renders its parent component. One reason to use this method is if you want your users to have complete control on how your widget blends on their website (such as CSS, dimensions, etc).Īlthough this method might be confusing at first, in reality, we will be mimicking the way React renders its components on its main entry point. This is slightly more complicated than the previous iFrame method. The other method, which I refer to as the Google Way of embedding widgets, is known as using Javascript tags. As an example, let’s say we want to render a Clock component which is located deep inside our React app through this path: then we simply refer the iFrame to this: ReactJS Widgets the Javascript Way Now if you want to render a specific component as a widget, simply replace the iFrame source to the correct path. At the end of the article I will share some guidelines to help you decide which solution would be best for you. Which one to choose depends if you want to go for the iFrame solution or the Javascript solution. Therefore, this article is my own attempt to show you two of the easiest ways to make your ReactJS project, or specific components of it, available as Widgets so that other users can use on their website. Additionally, if you are like me and run your ReactJS project in a Docker environment, these type of solutions might not be trivial to integrate. Unfortunately most of the available information is targeted towards developers who are either comfortable with hacking Webpack or else require a number of third party libraries. The Two Easiest Ways To Share Your ReactJS Project As a WidgetĪlthough developers have been successfully building React applications for years now, I have noticed many of them who struggle to share their application as a Widget that can be embedded by other users on their websites.
0 Comments
Leave a Reply. |