proxy client side urls

[halmos]

When rendering site permalinks on the client side, the absolute urls are not mapped back to the wpack.io proxy server.

For example, using the REST api to retrieve post data, peramlinks are returned relative to the local wp dev server. When these links are rendered on the client, the do not get proxied to the wpack.io server and so following the url will ink out of the wpack.io server proxy.

To be clear: if my dev server is hosted at http://wp-dev.test and is being proxied by wpack io to something likehttp://192.168.2.1, my rest api is returning data with permalinks like http://wp-dev.test/permalink-post.

I've tried configureing webpack proxy setting inside of wpackio.project.js like so:

newConfig.devServer = {
          proxy: {
            "/*": {
              host: "wp-dev.test",
              target: "http://192.168.2.1"
            }
          }
        }

but have not had any luck with that approach. Is there a way to configure webpack to catch these client-rendered urls and proxy them back to the wpack.io proxy server ? eg: http://192.168.2.1/permalink-post ?

many thanks.

[swashata]

Hello,

Have you tried this https://wpack.io/tutorials/customizer-and-rest/

[halmos]

Hi,
Yes, I've tried that without luck. But just to be clear - The REST API is not actually the problem and is functioning properly (the rest API dev server requests are correctly proxied to the wpack.io server), however the static URLs i'm loading via the REST API and returning to the client for rendering in react are absolute urls with the wp-dev server domain (e.g http://wp-dev.test).
When these links are rendered in the client, they retain the original dev server domain and clicking on one of them will direct the browser back to that server address.

What i need to find is a way to proxy client requests for the source wp dev server to the wpack.io server. (e.g request made by clicking links like <a href="http://wp-dev.test/permalink"> should be proxied to http://192.168.2.1/permalink)

It seems that it might be possible to use the rest_pre_serve_request approach to regex the resulting server response for instances of the url and replace the domain with the wpack.io server address, but the response data structures are fairly deep and I would prefer to find a simpler approach.

In looking at browserync i see a couple possibilities: the middleware option (https://www.browsersync.io/docs/options#option-middleware) and the rewriteRules option (https://www.browsersync.io/docs/options#option-rewriteRules).

However, i don't think that the wpack.server.js config file provides access to these options.

Also, I don't have a clear understanding of if/how the browsersync server interacts with webpack and if configuring the webpack proxy option settings in wpackio.project.js will have any effect (in initial tests, they do not seem to).

any thoughts or advice are appreciated.

[swashata]

Maybe what you need is the snippetOptions directly under browsersync.

BrowserSync/browser-sync#373 (comment)

So in your wpackio.server.js file, edit and add this bsOverride config.

module.exports = {
  // ...
  bsOverride: {
    snippetOptions: {
      whitelist: ["/wp-json/**"]
    }
  }

Do play with it. I have knowingly kept bsOverride under undocumented config variable, because it could possibly break the browser sync server. Do note, it needs to go inside wpackio.server.js file, and NOT the project.js file.

[swashata]

Also let me know if you have any success. I am thinking this is essential for any API driven APP development and it should be processed correctly. If the above works, then I will make it default in coming version.

[halmos]

Hi, this worked great once I updated wpack.io to the latest version. Thank you very much for your help.

As a side note, and this may be a separate issue to file, but is there a best approach to updating the wpack.io tooling? I wasn't able to find any docs on doing so. My first attempt to just update npm update @wpackio/scripts resulted in a broken wpack.project.js config. I then tried running the npm run bootstrap but this also did not update my existing config with the latest options. Finally i had to remove the existing wpack.project.js and re-run npm run bootstrap and reconfigure my custom webpack options, etc.

wpack.io is an excellent tool, and it would be great to have a way to keep it up to date without breaking previous customizations.

thanks again for your help.

[swashata]

Hello,

I am glad that the solution worked. I will have it as default for development server and will also perhaps whitelist admin-ajax.php for the old schools.

About update, yes doing npm i @wpackio/scripts or if using yarn yarn upgrade-interactive --latest is the best way. You need to update both @wpackio/scripts (devDependency) and @wpackio/entrypoint (dependency).

When you run wpackio-scripts serve it should tell you about any missing config in your file. Could you please open an issue if this is not the case with error message you found?