Embed Dash in a React App, proof-of-concept #1246
Conversation
# Conflicts: # dash-renderer/package-lock.json
# Conflicts: # dash-renderer/package-lock.json
# Conflicts: # dash-renderer/package-lock.json
- update build artifacts
- update renderer artifacts - stricten dash dependencies versions
…o iframe-sandbox-support - Update build artifacts # Conflicts: # dash-renderer/src/AccessDenied.react.js # dash-renderer/src/actions/index.js # tests/integration/renderer/test_iframe.py
See README.md for details
|
Hey @chabb -- What you’re trying to do is something that can be accomplished in Dash Enterprise today with the embedding middleware (or, on a more basic level, with iframes). Licensing Dash Enterprise funds the development of Dash OSS & our graphing libraries work, which is why we can’t open source this feature, or others that differentiate Dash Enterprise from Dash Open Source. Open sourcing (or accepting contributions that effectively open source those features) is something that erodes our ability to financially support these projects in the long term. As a result, we can’t take this PR any further right now or contribute to a free version of these capabilities in a fork or plugin. Thanks for your understanding! From an implementation perspective, we maintain these additional closed source capabilities as separate forks, plugins, or integrations. Dash’s MIT license allows the community to do the same. |
Hello!
I've opened this PR to start a conversation on embedding a dash app in an existing React application. This gives a lot of advantages ( you can use the React Router to have some routes that target standard react components and/or other routes that target multiple dash applications; you can integrate the dash app as part of a React app shell, and so on... ).
I do not intend it to merge it, it just a Proof-of-concept to discuss
This change exposes the
<AppProvider>component and adds a prop that lets the user passes the dash config. Instead of letting dash generates the index.html and serving the frontend, we build our own frontend app with React and serves it with webpack. The calls to the real dash are proxied to a dash backend. This works seamlessly. In theindex.jswe create a small react app that allows the user to switch between two dash apps.This would really unlock a lot of developers who are trying to integrate dash in a front-end app. Currently, you cannot do that, because using dash is an all-or-nothing decision ( once you use it, everything has to be dash components ). Allowing people to embed dash in a react-app would open a lot of opportunities/possibilities for developing web apps.
What would be interesting is to expose
AppProvidercomponent with an additional prop that allows to pass the dash configuration, and pass a--frontendflag to thedashcommand. This would look at a JS entry point, generates the bundle and the index.html file, and starts a server. In the same way, it would help if it would be possible to just start a dash backend.That would allow people to easily embed dash in a react app.