Omit publicPath and update publicPath on the fly

This commit is contained in:
Aurelsicoko 2018-01-15 14:31:04 +01:00
parent 16c253a846
commit 247caae4b4
4 changed files with 27 additions and 13 deletions

View File

@ -165,14 +165,14 @@ It's very common to deploy the front-end and the back-end on different servers.
"host": "/", // Note: The administration will be accessible from the root of the domain (ex: https//yourfrontend.com/)
"backend": "http://yourbackend.com",
"plugins": {
"source": "backend" // What does it means? The script tags in the index.html will use the backend value to load the plugins (ex: https://yourbackend.com/admin/content-manager/main.js).
"source": "backend" // What does it means? The script tags in the index.html will use the backend value to load the plugins (ex: https://yourbackend.com/dashboard/content-manager/main.js).
}
}
}
}
```
The administration URL will be https://yourfrontend.com and every request from the panel will hit the backend at https://yourbackend.com. The plugins will be injected through the `origin` (means the API itself). In other words, the plugins URLs will be `https://yourbackend.com/admin/content-manager/main.js`.
The administration URL will be https://yourfrontend.com and every request from the panel will hit the backend at https://yourbackend.com. The plugins will be injected through the `origin` (means the API itself). In other words, the plugins URLs will be `https://yourbackend.com/dashboard/content-manager/main.js`.
> Note: How it is possible? The API (the Strapi server) owns the plugin and these plugins are exposed through `https://yourbackend.com/admin/**/main.js`
@ -185,11 +185,11 @@ The DOM should look like this:
<head></head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/dashboard/vendor.dll.js"></script>
<script type="text/javascript" src="/dashboard/main.js"></script>
<script src="https://yourbackend.com/admin/content-manager/main.js"></script>
<script src="https://yourbackend.com/admin/settings-manager/main.js"></script>
<script src="https://yourbackend.com/admin/content-type-builder/main.js"></script>
<script type="text/javascript" src="/vendor.dll.js"></script>
<script type="text/javascript" src="/main.js"></script>
<script src="https://yourbackend.com/dashboard/content-manager/main.js"></script>
<script src="https://yourbackend.com/dashboard/settings-manager/main.js"></script>
<script src="https://yourbackend.com/dashboard/content-type-builder/main.js"></script>
</body>
</html>
```

View File

@ -1,5 +1,19 @@
// Retrieve URLs.
const remoteURL = window.location.port === '4000' ? 'http://localhost:4000/admin' : process.env.REMOTE_URL || 'http://localhost:1337/admin';
const devURL = document.getElementsByTagName('body')[0].getAttribute('front');
const remoteURL = (() => {
if (window.location.port === '4000') {
return 'http://localhost:4000/admin';
}
__webpack_public_path__ = window.location.port === '4000' ? `${window.location.origin}/` : `${(devURL || remoteURL).replace(window.location.origin, '')}/`;
// Relative URL (ex: /dashboard)
if (process.env.REMOTE_URL[0] === '/') {
return (window.location.origin + process.env.REMOTE_URL).replace(/\/$/, '');
}
return process.env.REMOTE_URL.replace(/\/$/, '');
})();
// Retrieve development URL to avoid to re-build.
const $body = document.getElementsByTagName('body')[0];
const devFrontURL = $body.getAttribute('front') ? window.location.origin + $body.getAttribute('front').replace(/\/$/, '') : null;
__webpack_public_path__ = window.location.port === '4000' ? `${window.location.origin}/` : `${(devFrontURL || remoteURL).replace(window.location.origin, '')}/`;

View File

@ -40,7 +40,7 @@ if (isDevelopmentMode) {
shell.echo('🏗 Building...');
const build = shell.exec(`cd ${path.resolve(appPath, 'admin')} && APP_PATH=${appPath} npm run build`, {
silent: true
silent: false
});
if (build.stderr && build.code !== 0) {

View File

@ -131,11 +131,11 @@ module.exports = base({
},
// Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
output: {
output: _.omitBy({
filename: '[name].js',
chunkFilename: '[name].[chunkhash].chunk.js',
publicPath,
},
}, _.isUndefined),
// In production, we minify our CSS with cssnano
postcssPlugins: [