Ecommerce Shopify WordPress Discussion

Deploying minified React and CSS bundles with Webpack for embed in external website

I'm trying to deploy a Wordpress plugin (but could be anywhere really) that embeds a React component (think floating chatbot bubble). I enqueue the scripts in PHP: $js_bundle_url = 'https://www.example.com/static/webpack_bundles/main-bdb8c5b5cf9d1bf62j40.1e935af01431.js' $css_bundle_url = 'https://www.example.com/static/webpack_bundles/main-bdb8c5b5cf9d1bf62j40.1e935af01431.css' wp_enqueue_script('js-bundle', $js_bundle_url, array(), null, true); wp_enqueue_style( 'css-bundle', $css_bundle_url, [], null, 'all' ); This is my Webpack config: module.exports = (env, argv) => { const isDev = argv.mode === "development"; const nodeModulesDir = path.resolve(__dirname, "node_modules"); const localhostOutput = { path: path.resolve("./frontend/webpack_bundles/"), publicPath: "http://localhost:3000/frontend/webpack_bundles/", filename: "[name].js", }; const productionOutput = { path: path.resolve("./frontend/webpack_bundles/"), publicPath: "auto", filename: "[name].js", }; return { mode: isDev ? "development" : "production", devtool: "source-map", // ... skipped for brevity plugins: [ !isDev && new MiniCssExtractPlugin({ filename: "[name]-[chunkhash].css" }), isDev && new ReactRefreshWebpackPlugin(), new BundleTracker({ path: __dirname, filename: "webpack-stats.json", }), ].filter(Boolean), // ... } } Each time I deploy the React (and Django) app on Render.com (by pushing to main, and having it autodeploy - but could be any cloud deployment), I have to change the URLs for these bundles, based on inspecting the code source and getting them there (I made a Wordpress plugin setting so atleast I can change it there), as they get recompiled (and renamed, I assume for caching reasons). For local development it works perfectly fine with the url for the js bundle not containing the hash, only 'main.js'. Is there any way I could get these dynamically? So the Wordpress plugin updates automatically as soon as I deploy it on Render (or any other platform)? Could I have some kind of static url for these bundles that redirects to the chunkhash-named ones? Is there a better approach to this? Previously I had it implemented via an iFrame - but this was not as good, as it did not integrate with the site well (no clicking through, dynamic placements in the DOM, ...).
There are a couple things you can do to help: Remove the -[chunkhash] part of the file names so they always compile to the same name. Output a manifest.json file with the Webpack plugin webpack-manifest-plugin and then parse it for the updated filenames to enqueue.

February 13, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.