React inside EmberJS: Extend your legacy Front End using React-based Web Components

A couple of months ago my company decided to get rid of their legacy Ember frontend in favor of React.

With limited team capacity, we wouldn't have been able to keep on implementing new customer features in Ember and in parallel rebuild the whole frontend in React. That’s why we decided to take a gradual approach: We’re implementing new features in React, before actually replacing our whole Ember app. By exporting these React widgets as Web Components, we can easily integrate and use them in our existing Ember frontend.

This approach allows our team to already gain experience in our future stack (React) and produce code that later can be used in the new codebase. We’re in a comfortable position to be able to act on new customer demands without rewriting the whole app to start our React journey.

But enough of my team’s situation for now.

In this article, I’m going to show you how to create and use React-based Web Component inside Ember. We will in particular discuss:

• Direflow, a React Wrapper for creating React-based Web Components
• How to establish communication between React and Ember Context via Events and Props?
• How to integrate the new Web Component into your existing Ember build scripts?

Feel free to have a look at the example codebase/demo:

Github Repo: https://github.com/jhinter/react-inside-ember
Working Demo: https://jhinter.github.io/react-inside-ember/

Check out the working demo: React inside Ember

1. Preparation

First, you have to decide where to put your new React project’s files. In my case, I decided to set up a mono repo using yarn workspaces. The repo consists of a root package.json and two child packages, namely @example/ember and @example/react.

project-root/
├── packages/
    └── ember
        └── ...
        └── package.json (@example/ember)
    └── react
        └── ...
        └── package.json (@example/react)
├── ...
├── package.json (root)