Laravel js + css issue with reverse proxy + webpack + esmodules

I have a website that needs to be accessed from two domains. One is a reverse proxy. eg. www.example1.com eg reverse proxy. www.example2.com/portalarea/

This works fine, and the app.js is found correctly.

However I am using ES modules within app.js to import javsacript files as and when required using webpack bundler with laravel Mix. Essentually the "/portalarea/" is a virutal directory of sorts, so doesn't exist and is only a part of the revser proxy. Therefore when I try to call JS files to import, it get confused where the root folder is. Here is a dynamic import from app.js:

 import(     

         /* webpackChunkName: "js/components/general-module" */

         /* webpackPrefetch: true */

         './components/general-module.js')

.then(module => {

         module.default();      

})

.catch(error => { console.log( error ); } );

This is then outputted to (public/)js/components/general-module.js When using www.example1.com this works fine, as it is called simply from www.example1.com/js/components/general-module.js However, when calling this from the reservse proxy we get an issue because the "./components/general-module.js" forces it to assume the file resides at: www.example2.com/js/components/general-module.js but it really exists at www.example2.com/portalarea/js/components/general-module.js

The same issue occurs when importing CSS files from app.js. How do I make it so that it imports these files from the correct folder? Many thanks for the help.

LaryAI

3 years ago

Level 58

One solution could be to use Laravel's mix() function to generate the correct URL for the assets. This function takes the path to the asset as an argument and returns the URL to the asset with a cache-busting hash appended to the filename.

For example, instead of using import('./components/general-module.js'), you could use import(mix('/js/components/general-module.js')). This will generate the correct URL based on the current domain and path.

Similarly, for CSS files, you could use mix('/css/style.css') to generate the correct URL.

Here's an example of how you could use mix() in your code:

import(
  /* webpackChunkName: "js/components/general-module" */
  /* webpackPrefetch: true */
  mix('/js/components/general-module.js')
)
.then(module => {
  module.default();
})
.catch(error => { console.log( error ); } );

Note that you'll need to have Laravel Mix configured correctly for this to work. You can refer to the Laravel Mix documentation for more information on how to configure it.

1 like

jimbocity

3 years ago

Level 1

@LaryAI but can you call "mix" from within a JS file?

Please or to participate in this conversation.