Silind-Software / direflow

🧩 Use the best of two worlds. Create fast, performant, native Web Components using React.
https://direflow.io
MIT License
501 stars 78 forks source link

feat: add devServer config entry for users #263

Open FrankKai opened 2 years ago

FrankKai commented 2 years ago

What does this pull request introduce? Please describe
feat: add devServer config entry for users

How did you verify that your changes work as expected? Please describe
Make local dev happy.

Solve this problem https://github.com/Silind-Software/direflow/issues/218

Example

const { webpackConfig } = require('direflow-scripts');
const devServerProxy = require("./config/devServerProxy");

/**
 * Webpack configuration for Direflow Component
 * Additional webpack plugins / overrides can be provided here
 */
module.exports = {
  webpack: (config, env) => {
    return {
      ...webpackConfig(config, env),
      // Add your own webpack config here (optional)
    };
  },
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      // Config your own devServer proxy in ./config/devServerProxy.js
      proxy = devServerProxy();

      const config = configFunction(proxy, allowedHost);
      return config;
    };
  },
};
/**
 * Use the mock proxy 
 * 
 * If isMock is true, mockTarget is valid, target is invalid.
 */
 const isMock = false;

/**
 * Change the proxy env 
 * 'test', 'dev', etc. target is valid, mockTarget is invalid.
 */

const env = "dev"; 

/**
 * This is the default devServer proxy config, you can use it in proxyCustomConfig or not.
 */
const DEFAULT_PROXY_CONFIG = {
  secure: false,
  changeOrigin: true,
};

/**
 * Config your proxy api here.
 */
const config = {
  "/api": {
    target: {
      dev: "https://api.dev.com/",
      test: "https://api.test.com/",
    },
    mockTarget: "https://api.mock.com/",
    proxyCustomConfig: { ...DEFAULT_PROXY_CONFIG },
  },
  "/apiAnother": {
    target: {
      dev: "https://api.another.dev.com/",
      test: "https://api.another.test.com/",
    },
    mockTarget: "https://api.another.mock.com/",
    proxyCustomConfig: { ...DEFAULT_PROXY_CONFIG },
  },
};

Screenshots
If applicable, add screenshots to demonstrate your changes.

Version
3.5.4

Did you remember to update the version of Direflow as explained here:
https://github.com/Silind-Software/direflow/blob/master/CONTRIBUTING.md#version