\"We need to re-write EVERYTHING!\"... It's understandable that a huge technical debt is created during the first period of building a company app, a lot of business needs, a lot of deadlines and smaller teams. And for webapps where a proper frontend solution was not considered, most of this technical debt falls on frontend and by time it becomes harder and harder to refactor till it reaches a point where the right way to refactor it is to re-write it. But that's not an option sometimes, isn't it?
\nAs an alternative, This article will introduce two approaches to integrate lightweight react apps (we will call them widgets) that can be embedded in any project.
\nReact widgets implemented directly in your codebase.
\nCreate a similar folder structure to this:
\n.\n├── server\n └── ....\n├── frontend\n ├── widgets\n ├── login.js\n └── subscribe.js\n └── components\n ├── Login.js\n ├── Subscribe.js\n └── ....\n├── dist #ignored\n ├── widget_login_bundle.js\n └── widget_subscribe_bundle.js\n├── webpack.config.js\n└── package.json/frontend/widgets directory will contain entry points for all the widgets, each file inside should render a react app in a corresponding DOM element id
For example /frontend/widgets/login.js
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Login from '../components/Login';\n\nReactDOM.render(\n <Login />,\n document.getElementById('widget:login'), // <-- NOTE the element id\n);webpack.config.js will look like this
module.exports = {\n entry: [\n './frontend/widgets/login.js',\n './frontend/widgets/subscribe.js',\n ],\n output: {\n filename: 'widget_[name]_bundle.js',\n }\n ...\n}Now running webpack from the project folder will create two bundle files widget_login_bundle.js and widget_subscribe_bundle.js in the dist folder.
Now you can use a widget in one of your views like this
\n...\n<div id=\"widget:login\"></div>\n<script defer src=\"/dist/widget_login_bundle.js\" />\n...In this approach we will keep all frontend in a separate repository and have an npm script to generate an html and bundle js file for each widget and upload them to a CMS.
\nBut first, A new database model need to be introduced that will hold the widget data (name and html) and there should be a way to upload assets to a content server.
\nFor example you may expose two web service APIs similar to this:
\nexample.com/api/widget/save-or-update (Save or upload a widget entry in the database)example.com/api/content-server/upload (Upload an asset file to content server)The folder structure will be similar to the previous approach but this time in a separate repository:
\n.\n├── frontend # Same as before\n├── dist # Same as before\n└── scripts\n ├── deployWidget.js\n └── ....\n├── webpack.config.js\n└── package.json/scripts/deployWidget.js is a nodejs script that expects a --widget argument and will do the following:
const path = require('path');\nconst argv = require('yargs').argv;\nconst uploadAssetToContentServer = require('./uploadAssetToContentServer');\nconst createOrUpdateWidgetEntry = require('./createOrUpdateWidgetEntry');\n\nconst deployWidget = async ({ widget }) => {\n const bundleFile = path.join(\n process.cwd(),\n 'dist',\n `widget_${widget}_bundle.js`\n );\n const uploadedUrl = await uploadAssetToContentServer(bundleFile);\n const html = `\n <div id=\"widget:${widget}\"></div>\n <script defer src=\"${uploadedUrl}\"></script>\n `;\n await createOrUpdateWidgetEntry({\n name: widget,\n html,\n });\n console.log(`widget ${widget} deployed successfully`);\n};\n\ndeployWidget({\n widget: argv.widget,\n}).catch(console.error);NOTE: I encapsulated the logic to upload the bundle file and save widget entry in uploadAssetToContentServer.js and createOrUpdateWidgetEntry.js respectively, which you will need to implement.
In package.json
...\n\"scripts\": {\n ....\n \"deploy-widget\": \"webpack && ./scripts/deployWidget\"\n}And now to deploy the login widget:
\nnpm run deploy-widget -- --widget loginGoing back to the backend repository, You can render a specific widget using the html value saved in DB, for example
\n...\n{{ getWidgetHtmlFromDB('login') | raw }}\n...For Standalone Approach
deployWidget.js script.deployWidget.js to deploy widgets to QA env. and create the scary-red \"Move to production\" button in QA CMS to just copy the entry from QA DB to Production DB.