Let me give you a quick explaination about the concept of this article have you heard/thought of embedding a react application as CDN in a wordpress or in an angular or in a vue application ?
is it possible ? if yes is it something about a micro-frontend application ?
yeah it's possible to embeed a react application like a CDN with out the complexity of a micro-frontend architecture. Wait what ? how it is possible ? will be the next questions will explain clearly .
Micro-frontend is a concept of integrating two or more large applications like each will application will have its own route , states etc .
What we're going to do is not a large application but a small one. For example think of a chat bot that will have its own independent usage right ? can you write a single chat bot logic and use it in two different applications ? This way can really help you for this . If not clear i'll give you a another example think of a financial tech site that has each one or two calculators in its pages. The text,route pictures and others can be in a wordpress(or any) and embeed the calculator using this approach.
So like these smaller concepts can be done using this and can result in a minature of micro-frontend concepts like
- resuablity across different application
- work can be splited and different domain team can work on the same application without any clash or dependency.
Things used in this process
- Preact
- Preact-habitat
- webpack
- babel
Preact what the heck is that do I need to learn that too ? come one preact is just react nothing else the bundle size of react is reduced by 3x times and created as preact . Check out about preact here you'll find preact as a twin brother of react .
Why & what is Preact🧐 ?
But why we need to do this using preact ? why not react ? to address this point I'll ask a silly question your website needs to load fast to slow ? obviously faster ! so that is the point i've choosen preact the resultant build of plain react application is over to 30-40kb where preact is 3kb . I think these number are enough to choose preact but don't worry preact is just react and it can still do most of the things what react can .
Preact-habitat
This is the library that will make plugging in Preact components and widgets in any CMS or website. So this is the big and only thing you need to learn of use as a new but cool this is even simpler . It's a HOC and what you need to do is just pass your main component inside this HOC and all your things will be done out the box . Check this out here
webpack
We need to make a minor change in the output of the bundle this need to be done in the webpack file . The libraryTarget in the output must be of type umd
UMD - This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD and as global variable.
babel
Babel is just to use jsx react elements this is realated with preact you can just copy paste .
that's it about the setup you just need to create the logic and pass the component via habitat HOC and your requirement will be done !
Habitat usage
I've imported the habitat and render is the component I've created . Inside the init function i've sent my Render component inside the habitat HOC and stored the value in a variable habitatApp. Now using the value i've received I can modify the type of render using the render function provided.
inline -> if this is true this will be rendered inside the particular div that you're mentioning else if it is given as false it will be rendered globally.
clientSpecified -> this can be used to specify the identification for the div where the app needs to be rendered. Will explain this more clear later.
Now we're all set to launch , npm run build comment will give you the production build that contains assests (if any) , a index.html,bundle.js,bundle.map.js file . We need to move the bundle folder to any of the cloud like netlify , vercel or any other.
All done we need to embeed our current application to any of the other html,wordpress page or application.
How to embeed in other application?
This one is even more simpler !
tada🎉 that's it you've sucessfully embeeded your preact application inside of a plain html page ! let me decode things
- async --> is used to avoid blocking of other scripts
- src --> is the cloud link of my build folder 🔴 note: you should point /bundle.js file not your bundle folder as a whole
- data-mount-in=".mine" is the things i've mentioned earlier as inline in the preact-habitat . It is the place you can mention the identification of a div where it needs to render . Here I've given .mine ie render the application inside a html element that has a classname of mine so it will render inside
div class="mine"/>Here I've used class as a identifier you can use id as well.
so that's it we've rendered our application using the CDN in the plain html page.
Have you noticed a thing without any express or react environment the application is running how ? just think! will reveal this later here 😉
Limitations of this approach
- Will only recommend this for smaller applications .
- Routes are not provied . It can be used but there needs to be a react enivronment to run the application where without route it's not needed.
- assets needs to be used inline or as a cloud url since we don't map it bundle folder we only point to bundle.js file .
Thats it ! let me know your thoughts about this !!
Check the complete project here
Manage the Work From Home 🏡 using this kit
check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen
Thanks for your time
Happy coding ! Keep Sharing
Stay Safe
Top comments (0)