Embed Dash in a React App, proof-of-concept

README.md

@@ -20,26 +20,28 @@ Built on top of Plotly.js, React and Flask, Dash ties modern UI elements like dr
 - [Dash Docs on Heroku](http://dash-docs.herokuapp.com/) (for corporate network that cannot access plot.ly)
 
 
-### App Samples
+### Embed dash applications in react
 
-| App | Description |
-|--- | :---: |
-| ![Sample Dash App](https://user-images.githubusercontent.com/1280389/30086128-9bb4a28e-9267-11e7-8fe4-bbac7d53f2b0.gif) | Here’s a simple example of a Dash App that ties a Dropdown to a D3.js Plotly Graph. As the user selects a value in the Dropdown, the application code dynamically exports data from Google Finance into a Pandas DataFrame. This app was written in just **43** lines of code ([view the source](https://gist.github.com/chriddyp/3d2454905d8f01886d651f207e2419f0)). |
-|![Crossfiltering Dash App](https://user-images.githubusercontent.com/1280389/30086123-97c58bde-9267-11e7-98a0-7f626de5199a.gif)|Dash app code is declarative and reactive, which makes it easy to build complex apps that contain many interactive elements. Here’s an example with 5 inputs, 3 outputs, and cross filtering. This app was composed in just 160 lines of code, all of which were Python.|
-|  ![Dash App with Mapbox map showing walmart store openings](https://user-images.githubusercontent.com/1280389/30086299-768509d0-9268-11e7-8e6b-626ac9ca512c.gif)| Dash uses [Plotly.js](https://github.com/plotly/plotly.js) for charting. Over 35 chart types are supported, including maps. |
-|![Financial report](https://github.com/plotly/dash-docs/blob/516f80c417051406210b94ea23a6d3b6cd84d146/assets/images/gallery/dash-financial-report.gif)| Dash isn't just for dashboards. You have full control over the look and feel of your applications. Here's a Dash App that's styled to look like a PDF report. |
+It's possible to embed a dash app in a react app. We need a few tweaks
 
-To learn more about Dash, read the [extensive announcement letter](https://medium.com/@plotlygraphs/introducing-dash-5ecf7191b503) or [jump in with the user guide](https://plot.ly/dash).
+- Manually add dash dependencies: Dash Python server generates an index.html that loads all its depndencies.
+(React, DashRenderer, Dash component suites). The  python backend app introspect the code and knows which components suite to load. For embedding dash in a react app,
+we need to build ourselves the index.html
+- Add the dash configuration. Dash backend insert a `<script>` tag with the dash configuration. We pass the config as a JSON object directly to the React components ( `AppProvider` `AppContainer`)
+- Use the reset flag for initializing the redux store. We need a new store when we switch app
+- Either proxy the calls to the correct dash backend, or mount the dash apps in a flask server on
+different endpoints
 
-### Contact and Support
 
-For companies with software budgets, Plotly offers
+### How to make this work
 
-- [**Dash Deployment Server**](https://plot.ly/products/dash/) speeds your time-to-delivery while providing the right resources, security, and scalability you need to deliver production-quality apps
-- [**Dash Design Kit**](https://plot.ly/products/dash/) makes your internal dashboard awesome without expertise in JavaScript & CSS.
-- [**Snapshot Engine**](https://plot.ly/products/dash/) seamlessly links your analytics and reporting workflows together, giving you a fast way to generate interactive reports of just the data you need
+To make this example work, you'll need to have two dash apps running and served on the 
+ports that are used in the proxy configuration.
 
-See [https://plot.ly/dash/support](https://plot.ly/dash/support) for ways to get in touch.
+Clicking on the switch button on the bottom of the screen will switch the dash applications
 
-![image](https://user-images.githubusercontent.com/1280389/30084008-9fbc68fc-925e-11e7-891c-18a9b8f6ac6b.png)
+To start the app, from the project folder :
 
+```cd dash-renderer```
+
+`npm run start`

dash-renderer/dash_renderer/__init__.py

@@ -0,0 +1,55 @@
+import sys
+
+__file__
+__version__ = "1.2.3"
+
+_js_dist_dependencies = [
+    {
+        "external_url": {
+            "prod": [
+                "https://unpkg.com/@babel/polyfill@7.7.0/dist/polyfill.min.js",
+                "https://unpkg.com/react@16.8.6/umd/react.production.min.js",
+                "https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js",
+                "https://unpkg.com/prop-types@15.7.2/prop-types.min.js",
+            ],
+            "dev": [
+                "https://unpkg.com/@babel/polyfill@7.7.0/dist/polyfill.min.js",
+                "https://unpkg.com/react@16.8.6/umd/react.development.js",
+                "https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js",
+                "https://unpkg.com/prop-types@15.7.2/prop-types.js",
+            ],
+        },
+        "relative_package_path": {
+            "prod": [
+                "polyfill@7.7.0.min.js",
+                "react@16.8.6.min.js",
+                "react-dom@16.8.6.min.js",
+                "prop-types@15.7.2.min.js",
+            ],
+            "dev": [
+                "polyfill@7.7.0.min.js",
+                "react@16.8.6.js",
+                "react-dom@16.8.6.js",
+                "prop-types@15.7.2.js",
+            ],
+        },
+        "namespace": "dash_renderer",
+    }
+]
+
+
+_js_dist = [
+    {
+        "relative_package_path": "{}.min.js".format(__name__),
+        "dev_package_path": "{}.dev.js".format(__name__),
+        "external_url": "https://unpkg.com/dash-renderer@1.2.3"
+        "/dash_renderer/dash_renderer.min.js",
+        "namespace": "dash_renderer",
+    },
+    {
+        "relative_package_path": "{}.min.js.map".format(__name__),
+        "dev_package_path": "{}.dev.js.map".format(__name__),
+        "namespace": "dash_renderer",
+        "dynamic": True,
+    },
+]