How to Embed a React Application in Any Website

Use create-react-app and then embed it into an existing project

Photo by Hal Gatewood.

Let’s say you have a static website — be that on WordPress, Wix, Squarespace, or HTML from a server — and you want to add some dazzling functionality to it.

“If only I could use React!” you say to yourself, but time and budget constraints prevent a total overhaul of your website.

The good news is that you are not alone, and the great news is that this guide will show you how to create and embed a React widget within your website! We just have to learn to think about React a little differently…

“React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React.” — React’s official documentation

Getting Started

This guide assumes some working knowledge of React and general web development. If you have never spun up a React application before, there is a great tutorial on the React website!

We will also be using yarn and lite-server.

Let’s start, as many developers do today, by running:

yarn create react-app example-widget

This boilerplate holds a functional React application where you can develop whatever you like. For the sake of this example, I created a simple component that uses the excellent react-live library.

This component renders a web IDE where you can write code and instantly see the outcome — something that would be painfully hard to achieve on a WordPress site yet only takes 28 lines of code in React.

The 4-Step Process — Without Ejecting!

1. We want our application to mount onto a unique <div></div> that we have control over. Let’s change the application’s target div to something unique:

Line 11: Changing the target div ID to “javascriptExample”

2. We need to update the application’s homepage to serve the build from wherever your website lives. This is done by adding "homepage": “.” to the package.json file:

Line 5

Note: Things work differently if you have front-end routing on your application. See these docs for more information.

3. Now we need to build the application and extract the Webpack bundle to be used as static assets on our other website.

First, run yarn build to produce a minified build.

Second, create a folder to hold the three files your application needs to run. I named mine dist. You will need these three files:

• The file holding roughly a minified version of the libraries you are using.

./build/static/js/2.<someUniqueNumbers>.chunk.js

• The file holding a minified version of your code.

./build/static/js/main.<someUniqueNumbers>.chunk.js

• The file holding the code to launch your application.

./build/static/js/runtime-main.<someUniqueNumbers>.js

When you have the files, your dist directory should look like this:

4. Lastly, we can call our new static assets as JS files and point our React widget to mount a <div></div> on our website!

Here is my example HTML page that has two React applications mounted as React widgets:

Note that the order of these files does matter!

Now, if I serve the HTML page using lite-server…

Ta-da! An extremely interactive website featuring two React applications among other static content!

Conclusion

I hope this tutorial reveals the power of React as a flexible JavaScript library. If you are interested in why all of this works, I would encourage you to check out these docs.

You can browse my example repository on GitHub!

Have any other tips for using React among external libraries/content? Drop a reply and let me know!

Stay safe and healthy, and as always, happy coding.