Comment activer le proxy dans react-slingshot (par coryhouse) pour pouvoir appeler mes API REST Django?

Question

J'ai un serveur de développement Django fonctionnant sur le port 8050 avec plusieurs API REST que je souhaite utiliser dans mon application React, qui est composée de react-slingshot et s'exécute sur localhost: 3002.

Ce que je veux, c'est pour mon code Javascript, comme fetch('api/v1/employees'), pour appeler réellement localhost: 8050 au lieu de localhost: 3002.

Je vois raythree in a github discussion a été en mesure de trouver une solution à ma question, cependant, je suis incapable de faire fonctionner sa solution. J'ai mis en application son conseil exactement comme il l'a fait, mais le code agit comme si je n'avais fait aucun changement du tout.

Voici ce que mon code dans les outils/srcServer.js ressemble en ce moment:

// This file configures the development web server 
// which supports hot reloading and synchronized testing. 

// Require Browsersync along with webpack and middleware for it 
import browserSync from 'browser-sync'; 
// Required for react-router browserHistory 
// see https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643 
import historyApiFallback from 'connect-history-api-fallback'; 
import webpack from 'webpack'; 
import webpackDevMiddleware from 'webpack-dev-middleware'; 
import webpackHotMiddleware from 'webpack-hot-middleware'; 
import config from '../webpack.config.dev'; 
import proxy from 'http-proxy-middleware'; 

const bundler = webpack(config); 

const serverProxy = proxy('/api', { 
    target: "http://0.0.0.0:8050", 
    changeOrigin: true, // set true for hosted sites 
    logLevel: 'debug' 
}); 

// Run Browsersync and use middleware for Hot Module Replacement 
browserSync({ 
    port: 3000, 
    ui: { 
    port: 3001 
    }, 

    server: { 
    baseDir: 'src', 

    middleware: [ 
     historyApiFallback(), 

     webpackDevMiddleware(bundler, { 
     // Dev middleware can't access config, so we provide publicPath 
     publicPath: config.output.publicPath, 

     // These settings suppress noisy webpack output so only errors are displayed to the console. 
     noInfo: true, 
     quiet: false, 
     stats: { 
      assets: false, 
      colors: true, 
      version: false, 
      hash: false, 
      timings: false, 
      chunks: false, 
      chunkModules: false 
     } 

     // for other settings see 
     // https://webpack.js.org/guides/development/#using-webpack-dev-middleware 
     }), 

     // bundler should be the same as above 
     webpackHotMiddleware(bundler), 

     serverProxy, 
    ] 
    }, 

    // no need to watch '*.js' here, webpack will take care of it for us, 
    // including full page reloads if HMR won't work 
    files: [ 
    'src/*.html' 
    ] 
}); 

Answer 1

I figured it out! Apparemment serverProxy doit être indexé avantwebpackDevMiddleware et webpackHotMiddleware dans le tableau middleware!

// This file configures the development web server 
// which supports hot reloading and synchronized testing. 

// Require Browsersync along with webpack and middleware for it 
import browserSync from 'browser-sync'; 
// Required for react-router browserHistory 
// see https://github.com/BrowserSync/browser-sync/issues/204#issuecomment-102623643 
import historyApiFallback from 'connect-history-api-fallback'; 
import webpack from 'webpack'; 
import webpackDevMiddleware from 'webpack-dev-middleware'; 
import webpackHotMiddleware from 'webpack-hot-middleware'; 
import config from '../webpack.config.dev'; 
import proxy from 'http-proxy-middleware'; 

const bundler = webpack(config); 

const serverProxy = proxy('/api', { 
    target: "http://0.0.0.0:8050", 
    changeOrigin: true, // set true for hosted sites 
    logLevel: 'debug' 
}); 

// Run Browsersync and use middleware for Hot Module Replacement 
browserSync({ 
    port: 3000, 
    ui: { 
    port: 3001 
    }, 

    server: { 
    baseDir: 'src', 

    middleware: [ 
     historyApiFallback(), 

     // The order of serverProxy is important. It will not work if it is indexed 
     // after the webpackDevMiddleware in this array. 
     serverProxy, 

     webpackDevMiddleware(bundler, { 
     // Dev middleware can't access config, so we provide publicPath 
     publicPath: config.output.publicPath, 

     // These settings suppress noisy webpack output so only errors are displayed to the console. 
     noInfo: true, 
     quiet: false, 
     stats: { 
      assets: false, 
      colors: true, 
      version: false, 
      hash: false, 
      timings: false, 
      chunks: false, 
      chunkModules: false 
     } 

     // for other settings see 
     // https://webpack.js.org/guides/development/#using-webpack-dev-middleware 
     }), 

     // bundler should be the same as above 
     webpackHotMiddleware(bundler), 
    ] 
    }, 

    // no need to watch '*.js' here, webpack will take care of it for us, 
    // including full page reloads if HMR won't work 
    files: [ 
    'src/*.html' 
    ] 
});