Preact-cli: Dev Server Proxy

Created on 30 May 2017  路  3Comments  路  Source: preactjs/preact-cli

Hello,

First off, I just want to say thank you for creating and maintaining this amazing tool, it's an absolute delight to work with and makes it just so easy and quick to get a Preact PWA up and running.

This may be more of a feature request, but is there any way to specify a proxy for the development server to intercept/redirect calls in either the package.json or another configuration file?

Thank you for any help you can provide.

has-fix

Most helpful comment

Thank you! 鉂わ笍

Merging #56 makes this possible:

// preact.config.js

module.exports = function(config) {
  config.devServer.proxy = [
    {
      // proxy requests matching a pattern:
      path: '/api/**',

      // where to proxy to:
      target: 'http://api.example.com',

      // optionally change Origin: and Host: headers to match target:
      changeOrigin: true,
      changeHost: true,

      // optionally mutate request before proxying:
      pathRewrite: function(path, request) {
        // you can modify the outbound proxy request here:
        delete req.headers.referer;

        // common: remove first path segment: (/api/**)
        return '/' + path.replace(/^\/[^\/]+\//, '');
      },

      // optionally mutate proxy response:
      onProxyRes: function(proxyRes, req, res) {
        // you can modify the response here:
        proxyRes.headers.connection = 'keep-alive';
        proxyRes.headers['cache-control'] = 'no-cache';
      }
    }
  ];
};

That said, I'd love to support parsing a static-app.json file (in Firebase/Superstatic format) like preact-cli produces for setting headers. The above example would then be as simple as dropping this file into your repo root:

// static-app.json

{
  "redirects": [
    {
      "source": "/api/(.*)",
      "destination": "http://api.example.com/$1",
      "type": "proxy"
    }
  ]
}

Nice and clean, and it'd then also be available if your hosting provider supports the format.

All 3 comments

Thanks for the kind words! A lot of guys spend a lot of time making this great. 馃槃

This will be doable once #56 lands 馃憤

Thank you! 鉂わ笍

Merging #56 makes this possible:

// preact.config.js

module.exports = function(config) {
  config.devServer.proxy = [
    {
      // proxy requests matching a pattern:
      path: '/api/**',

      // where to proxy to:
      target: 'http://api.example.com',

      // optionally change Origin: and Host: headers to match target:
      changeOrigin: true,
      changeHost: true,

      // optionally mutate request before proxying:
      pathRewrite: function(path, request) {
        // you can modify the outbound proxy request here:
        delete req.headers.referer;

        // common: remove first path segment: (/api/**)
        return '/' + path.replace(/^\/[^\/]+\//, '');
      },

      // optionally mutate proxy response:
      onProxyRes: function(proxyRes, req, res) {
        // you can modify the response here:
        proxyRes.headers.connection = 'keep-alive';
        proxyRes.headers['cache-control'] = 'no-cache';
      }
    }
  ];
};

That said, I'd love to support parsing a static-app.json file (in Firebase/Superstatic format) like preact-cli produces for setting headers. The above example would then be as simple as dropping this file into your repo root:

// static-app.json

{
  "redirects": [
    {
      "source": "/api/(.*)",
      "destination": "http://api.example.com/$1",
      "type": "proxy"
    }
  ]
}

Nice and clean, and it'd then also be available if your hosting provider supports the format.

56 landed closing this

Was this page helpful?
0 / 5 - 0 ratings

Related issues

haggen picture haggen  路  3Comments

andybons picture andybons  路  3Comments

zwrawr picture zwrawr  路  3Comments

smjnab picture smjnab  路  3Comments

c0debreaker picture c0debreaker  路  4Comments