Stencil: [Feature Request] Dev Server Proxy / Middleware Options

[bassettsj]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Unable to find a workable solution to still use the stencil dev server integrated here and be able to proxy requests to the API for local development. HMR will break if I use something like micro-proxy or other easy proxy options. Is there a way to allow some extension of the dev server? Could the proxy config even be built in?

Other information:

• posted in [Stencil slack]
  (https://stencil-worldwide.slack.com/archives/C789G3X1R/p1543343994437400)

[kevel]

There is solution when HMR works.
1) Install https://github.com/nodejitsu/node-http-proxy.
2) Run script in parallel with stencil

    const http = require('http');
    const httpProxy = require('http-proxy');

    const proxyApi = new httpProxy.createProxyServer({
      target: {
        host: '127.0.0.1',
        port: 8000
      },
    });

    const proxyStencil = new httpProxy.createProxyServer({
      target: {
        host: '127.0.0.1',
        port: 3333
      }
    });
    const proxyServer = http.createServer(function (req, res) {
      if (req.url.match(/\/api/)) {
        proxyApi.web(req, res);
      } else {
        proxyStencil.web(req, res);
      }
    });

    //
    // Listen to the `upgrade` event and proxy the
    // WebSocket requests as well.
    //
    proxyServer.on('upgrade', function (req, socket, head) {
      proxyStencil.ws(req, socket, head);
    });

    console.log('Listen: http://127.0.0.1:5000');
    proxyServer.listen(5000);

3) Open http://127.0.0.1:5000

[prodrammer]

Using:

 @stencil/[email protected]

The idea from the OP (as I understand it) is to run your stencil project and your other project (vue, react, etc.) in dev mode. As you update your stencil components, you save and watch both projects refresh via HMR support.

I can get this to work in a project created with vue-cli by updating the proxy settings in vue.config.js to:

module.exports = {
  devServer: {
    proxy: {
      '^/stencil/': {
        target: 'http://localhost:3333',
        changeOrigin: true,
        pathRewrite: {
          '^/stencil/': ''
        }
      },
      '^/stencil-hmr': {
        target: 'ws://localhost:3333',
        changeOrigin: true,
        ws: true
      }
    }
  }
}

But this only works if I change the getSocketUrl function in node_modules/@stencil/core/dist/dev-server/static/dev-server-client.html in my stencil project to:

function getSocketUrl(location) {
    return (location.protocol === 'https:' ? "wss:" : "ws:") + "//" + location.hostname + ":" + location.port + "/stencil-hmr";
}

By default, "/stencil-hmr" is just "/".

Can we get support to change the result of getSocketUrl via stencil config?

EDIT:
In the main html page of the vue project, I also added the following which was stolen from the main stencil dev page and slightly modified:

<script type="module" src="/stencil/build/test.esm.js"></script>
<script nomodule="" src="/stencil/build/test.esm.js"></script>

<script>
    if ('serviceWorker' in navigator && location.protocol !== 'file:') {
      // auto-unregister service worker during dev mode
      navigator.serviceWorker.getRegistration().then(function(registration) {
        if (registration) {
          registration.unregister().then(function() { location.reload(true) });
        }
      });
    }
</script>

<iframe title="Stencil dev client" src="/stencil/~dev-server" style="display:block;width:0;height:0;border:0"></iframe>

[nbgmtin]

Any updates on this?

You should be able to specify a proxy in the stencil config. Doing local development with an API on a different port is very common. Right now I've resolved to be using Axios since it includes some sort of proxy solution. But since the fetch API is polyfilled by StencilJs - it [axios] is just another unnecessary dependency :/

[sunbot]

Any updates on this?

You should be able to specify a proxy in the stencil config. Doing local development with an API on a different port is very common. Right now I've resolved to be using Axios since it includes some sort of proxy solution. But since the fetch API is polyfilled by StencilJs - it [axios] is just another unnecessary dependency :/

You did this with Axios? I keep running into CORS issues when doing a POST to a cookie login. What was your setup?

[nbgmtin]

Any updates on this?
You should be able to specify a proxy in the stencil config. Doing local development with an API on a different port is very common. Right now I've resolved to be using Axios since it includes some sort of proxy solution. But since the fetch API is polyfilled by StencilJs - it [axios] is just another unnecessary dependency :/

You did this with Axios? I keep running into CORS issues when doing a POST to a cookie login. What was your setup?

I remember I used a built in function with axios. Go here and CTRL+F search for "proxy" https://github.com/axios/axios. But it's better you use something like this https://gist.github.com/peterreisz/96593915c407de2d139120ade96c9be0

[markcellus]

@manucorporat instead of just closing issues, can you please provide an explanation for closing? Thanks. If this isn't something the team wants to move forward with, that's fine. But can we at least say that?