feat: Added recommended solution for Webpack publicPath handling for isomorphic apps

README.md

@@ -93,6 +93,7 @@ And don't miss the **[Step-By-Step lessons about apps development with ILC](./do
 * [Global API](https://namecheap.github.io/ilc-sdk/pages/Pages/global_api.html)
 * [ILC transition hooks](./docs/transition_hooks.md)
 * [Multi-domains](./docs/multi-domains.md)
+* [Public Path Problem](https://namecheap.github.io/ilc-sdk/pages/Pages/public_path.html)
 
 ## 🔌 Adapters
 To conveniently connect various frameworks to ILC we rely on the [ecosystem of the single-spa](https://single-spa.js.org/docs/ecosystem)

docker-compose.yml

@@ -41,6 +41,8 @@ services:
   demo-apps:
     image: namecheap/ilc-demo-apps:latest
     network_mode: "service:ilc" # We need this to make apps accessible at 127.0.0.1 inside "ilc" container
+    env_file:
+      - ./demo-apps.env  # Used by the demo site to override PUBLIC_HOST var
   mysql:
     image: mysql:5.7
     volumes:

docs/umd_bundles_compatibility.md

@@ -15,7 +15,7 @@ This will remove `window.define` variable so all your libs should instead use `w
 When using webpack - here is how you can force usage of `window.ILC.define` while building the apps for ILC:
 
 ```javascript
-const WrapperPlugin = require('wrapper-webpack-plugin');
+const ilcWebpackPluginsFactory = require('ilc-sdk').WebpackPluginsFactory;
 
 module.exports = {
     entry: 'src/app.js',
@@ -24,13 +24,7 @@ module.exports = {
         libraryTarget: 'amd',
     },
     module: { /* ... */ },
-    plugins: [
-        new WrapperPlugin({
-            test: /\.js$/, // only wrap output of bundle files with '.js' extension
-            header: '(function(define){\n',
-            footer: '\n})((window.ILC && window.ILC.define) || window.define);'
-        }),
-    ],
+    plugins: ilcWebpackPluginsFactory().client,
 };
 
 

registry/server/seeds/01_apps.ts

@@ -15,9 +15,7 @@ export async function seed(knex: Knex): Promise<any> {
                 src: 'http://localhost:8235/',
                 timeout: 1000,
             }),
-            props: JSON.stringify({
-                publicPath: `http://${publicHost}:8235/`
-            }),
+            props: '{}',
             kind: 'essential',
         }, {
             name: '@portal/people',
@@ -28,9 +26,7 @@ export async function seed(knex: Knex): Promise<any> {
                 rxjs: 'https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.js',
                 '@portal/fetchWithCache': `http://${publicHost}:8238/fetchWithCache.js`,
             }),
-            props: JSON.stringify({
-                publicPath: `http://${publicHost}:8236/`
-            }),
+            props: '{}',
             kind: 'primary',
         }, {
             name: '@portal/planets',
@@ -50,9 +46,7 @@ export async function seed(knex: Knex): Promise<any> {
             }),
             assetsDiscoveryUrl: 'http://127.0.0.1:8239/_spa/dev/assets-discovery',
             dependencies: '{}',
-            props: JSON.stringify({
-                publicPath: `http://${publicHost}:8239/dist/`
-            }),
+            props: '{}',
             kind: 'primary',
         }, {
             name: '@portal/system',