This will proxy a request from a Vue page, via a php handler, to a 'legacy service'.
The php will load the html response from the legacy service, and look for script and link tags of type stylesheet.
scripts
- For inline script tags, it will load the contents to include directly.
- For relative script tags, it will load the contents to include directly.
- For absolute script tags, it will pass to vue to include.
styles
- For relative link tags, it will load the contents to include directly.
- For absolute link tags, it will pass to vue to include.
It will then return the html <body>...</body> for vue to render.
It is extremely limited in how it handles the operation. It was designed as a way to think about, and tackle, some of the challenges of this approach, but is in no way complete, or intended as a recommended solution. See Limitations.
It may be that a PHP middleware proxy is too heavy for the approach, and an alternative used. Perhaps an iframe, and an nginx auth module, though there would be different considerations for this.
- Open Vue
cd vue && php -S localhost:9000
- Open PHP
cd php && composer install && cd src && php -S localhost:8000
- Open Legacy Service
cd legacy && php -S localhost:7000
There is a lot this either doesn't do, or doesn't do well.
It won't escape data well, load other resources (img), deal with cookies/sessions, or maintain the css or style ordering. The CORS handling is equally basic.
It won't deal with any subsequent requests made by the loaded content.
Rather than loading into the page, separate relative resource files should be proxied via the php. A cache could be generated by php of the files to load more efficiently.
The body tag should be cast to a div and any classes, or js that refers to it updated.