How do I create an embeddable component for third-party websites?

[mattjis]

I'm attempting to create widgets for our customers to paste (embed) within their own site.

Ideally to be used by a third-party like so:

example.html

<div id="example"></div>
<script src="https://example.com/widgets/example.bundle.js"></script>
<script>
Example.init({
	selector: "#example",
	name: "example"
});
</script>

I just can't figure out how to "bundle" specific entry points down to a single file with next.js.

I'm using Vercel which builds from GitHub, so ideally I want these bundles to be generated on build, without breaking the existing next.js site.

What I've tried:

next.config.js

module.exports = {
	entry: {
		example: './pages/example.js'
	},
	output: {
		path: "./public/widgets",
		filename: '[name].bundle.js'
	}
}

Result:

This achieves nothing, and I don't understand why! :(

Useful Sources:
Github (Next.js Discussions): Adding a Webpack entry to load separately from main.js

Next.js: Custom Webpack Config

Next.js: Setting a custom build directory

Next.js: exportPathMap

Stackoverflow: Writing embeddable Javascript plugin with React & Webpack

Webpack: Configuration Documentation

[LeMisterV]

Hi,

I'm working on a similar subject. My goal is to build widgets at the same time I build my nextJS website.
Those widgets would use some components also used in the website.

I think this feature is a step to get something like micro-frontend using nextJS....

I saw another question on the same topic here but I thing your question is expressed more clearly so I suggest to continue here for this subject.

On my side, I managed to trigger a second webpack build during nextJS build with a config modified so the entry point is the script for my widget, and chunk splitting is done a different way to be compatible with a widget usage (webpack runtime included).
This solution is very hacky and the new 9.5 version of nextJS breaks everything, so I'm trying to figure out a better solution, and maybe end-up with a pull-request to nextJS to add this feature.

If you have made some progress on this subject since you posted your message, please share any idea ;)

I think the best solution to get this done would be to add some entries in the webpack config. But these entries should not be built exactly the same as others: webpack runtime should be included, chunks splitting should probably be a little different...
And for the moment I don't know how to have entries in a webpack config with such different behaviors.
If you have an idea about how to do this, we could be on a good way.

I hope we can manage to get a solution soon

[mattjis]

I ended up creating a separate server and doing it all in plain React unfortunately. I just had to install and configure all of the next.js features I loved the most, which was a bit of a pain.

[LeMisterV]

I hope I'll find a way to do it. I'll be working on this for a few days and see what I get.
I think it would be a great improve on NextJS to be able to provide this Micro-frontend like ability...
I'll post news about my experiments here 😉

[valjusha]

I hope I'll find a way to do it. I'll be working on this for a few days and see what I get.
I think it would be a great improve on NextJS to be able to provide this Micro-frontend like ability...
I'll post news about my experiments here 😉

did you manage to do it?

[LeMisterV]

Sadly I had some important other subjects to deal with.
I spent a few hours on this, but not enough to get something working.
As I can't find time to get deeper on this, I think I will use a custom webpack config and build widgets with this, but this means keeping this webpack config compatible with the NextJS configuration, and it will probably give me some hard times later...

I still hope I can find some time for this one day

[mattjis]

This answer was provided by Jesper We on StackOverflow:

The loaded script would have to create the Example global object, on which we can then invoke .init(), which renders the widget html into the tag specified in selector.

Next creates a full page, not an object that can be called as described above.

To change this we'd need to override the Next server to bypass the whole app.render() process for specific urls, and instead create the Example object, which does its own call to ReactDOM.render() on .init().

[Pfurr]

@mattjis hi, i have a similar subject! :) I want to do a Next js “Widget” that can be embedded on any website (similar React js implementation, for example --> hooking a file js and css by script in a static html page of third parts). Can you have any idea how to do it? How did you solve? cc @LeMisterV

[kasztof]

Hi @Pherm, did you manage to achieve that with next.js?

[founderpad]

Any update guys? Also need something similar and I'm using Nextjs.

I read that CRA is recommended though :s surely we don't need to create an entirely separate React project to create a widget if the code is already a component in the Nextjs project? Can't Webpack build this component as a separate bundle and then we can reference it in the index.html?

[frietkip]

I am also very curious whether @Pherm managed to achieve this with Next.js. Otherwise I am going to create a separate react project within NextJs to generate the widget :)

[LeMisterV]

Hi there,

I finally found some time to build something.
I made a small proof of concept project : https://github.com/LeMisterV/Next-widget

The idea : Add a webpack plugin that will catch "beforeRun" hook in the NextJS build process and start a second webpack build that will build widgets into the /_next/static/widgets/.... folder

The second webpack build is created using the initial webpack config, so we inherit all NextJS webpack config. Just a few changes and we have a full webpack config to build widgets.

I'm sure this will not match everyone's cases.... but for me it works really well. With the same codebase, one build process and I get both a working NextJS website AND ready to load widgets.

For the widget code I used custom-elements so they are really easy to use: just load a JS file and add custom HTML tags wherever you like.

I'd love to have feedback on that, good or bad I don't care, as long as it can help find improvements ;)

[luis-studioG]

Hi @LeMisterV. I'm getting this error in the console when run the app in the browser.
Refused to execute script from 'http://127.0.0.1:5500/_next/static/widgets/hello/index.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Do you know what can cause this?

[Micxxo]

Hi there,

I finally found some time to build something. I made a small proof of concept project : https://github.com/LeMisterV/Next-widget

The idea : Add a webpack plugin that will catch "beforeRun" hook in the NextJS build process and start a second webpack build that will build widgets into the /_next/static/widgets/.... folder

The second webpack build is created using the initial webpack config, so we inherit all NextJS webpack config. Just a few changes and we have a full webpack config to build widgets.

I'm sure this will not match everyone's cases.... but for me it works really well. With the same codebase, one build process and I get both a working NextJS website AND ready to load widgets.

For the widget code I used custom-elements so they are really easy to use: just load a JS file and add custom HTML tags wherever you like.

I'd love to have feedback on that, good or bad I don't care, as long as it can help find improvements ;)

How to implement it ?