如何在React项目的localhost:3000/dashapp路径下访问部署于Flask服务器的Plotly Dash应用

Got it, let's figure out how to get your Dash app accessible at localhost:3000/dashapp alongside your React pages. The core issue here is that your Dash/Flask app is running on port 5000 while React is on 3000—we need to bridge these two so requests to the React server's /dashapp path get routed to Flask. Here are a few solid approaches:

Approach 1: Configure Proxy in React (Recommended for Development) #

If you're using Create React App, setting up a proxy to forward /dashapp requests to your Flask server keeps your development workflow smooth without dealing with CORS or iframes.

Step 1: Set Up Fine-Grained Proxy (For Specific Paths) #

Create a setupProxy.js file in your React project's src directory (Create React App automatically picks this up):

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/dashapp',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: {
        '^/dashapp': '/dashapp' // Ensures the path is forwarded correctly to Flask
      }
    })
  );
};

Note: Install http-proxy-middleware first with npm install http-proxy-middleware --save-dev.

Step 2: Update Dash App's Path Prefix #

Ensure your Dash app uses the /dashapp prefix so all internal resources (JS, CSS, callbacks) point to the right location. Update your Flask/Dash code:

import dash
from flask import Flask

server = Flask(__name__)
# Configure Dash to use the /dashapp prefix
app = dash.Dash(
    __name__,
    server=server,
    requests_pathname_prefix='/dashapp/'
)

# Your Dash layout and callback code goes here...

if __name__ == '__main__':
    server.run(debug=True, port=5000)

Now run both your React dev server (npm start) and Flask server—visiting localhost:3000/dashapp will route directly to your Dash app, just like any other React page.

Approach 2: Embed Dash in React via Iframe #

If you want a quick workaround without proxy configuration, embed your Dash app in a React page using an iframe. This is straightforward but has tradeoffs like less seamless navigation and potential CORS issues.

Step 1: Create a React Component for Dash #

Make a new component (e.g., DashDashboard.js) that renders the iframe:

import React from 'react';

const DashDashboard = () => {
  return (
    <div style={{ width: '100%', minHeight: '100vh' }}>
      <iframe
        src="http://localhost:5000/dashapp"
        style={{ border: 'none', width: '100%', height: '100%' }}
        title="Dash Analytics Dashboard"
      />
    </div>
  );
};

export default DashDashboard;

Step 2: Add Route to React Router #

Update your React routing to map /dashapp to this component:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import DashDashboard from './DashDashboard';
// Import your other React components here...

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashapp" element={<DashDashboard />} />
        {/* Add your other routes here */}
      </Routes>
    </Router>
  );
}

export default App;

Step 3: Fix CORS Issues #

To avoid browser cross-origin errors, enable CORS in your Flask app:

1. Install flask-cors: pip install flask-cors
2. Update your Flask code:

from flask import Flask
from flask_cors import CORS
import dash

server = Flask(__name__)
CORS(server)  # Allows cross-origin requests (restrict to your React domain in production)

app = dash.Dash(
    __name__,
    server=server,
    requests_pathname_prefix='/dashapp/'
)

# Rest of your code...

Approach 3: Reverse Proxy with Nginx (For Production) #

When deploying to production, use Nginx to serve your React static files and forward /dashapp requests to your Flask/Dash server. This is the most robust solution for production environments.

Here's a sample Nginx configuration:

server {
    listen 80;
    server_name your-domain.com;

    # Serve React static files
    location / {
        root /path/to/your/react/build/folder;
        try_files $uri $uri/ /index.html;
    }

    # Forward Dash requests to Flask server
    location /dashapp {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

After setting this up, visitors to your-domain.com/dashapp will see your Dash app, while the rest of the domain serves your React pages.

内容的提问来源于stack exchange，提问作者Anil Dharni