Update path generation for admin and plugins

docs/3.x.x/en/advanced/customize-admin.md

@@ -160,11 +160,12 @@ It's very common to deploy the front-end and the back-end on different servers.
     "enabled": false
   },
   "admin": {
-    "path": "/", // Note: The administration will be accessible from the root of the domain (ex: https//yourfrontend.com)
+    "path": "/dashboard",
     "build": {
+      "host": "https//yourfrontend.com",  // Note: The administration will be accessible from the root of the domain (ex: https//yourfrontend.com)
       "backend": "https://yourbackend.com",
       "plugins": {
-        "source":  "origin" // 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/admin/content-manager/main.js).
       }
     }
   }
@@ -211,11 +212,11 @@ In this case, we suppose that you decided to put your administration and the plu
     "enabled": false
   },
   "admin": {
-    "path": "/"
     "build": {
+      "host": "https://yourfrontend.com/dashboard", // Note: The custom path has moved directly in the host URL.
       "backend": "https://yourbackend.com",
       "plugins": {
-        "source":  "host", // What does it mean? The script tags in the index.html will use the host value to load the plugins (ex: https://yourfrontend.com/dashboard/plugins/content-manager/main.js).
+        "source":  "host", // What does it means? The script tags in the index.html will use the host value to load the plugins (ex: https://yourfrontend.com/dashboard/plugins/content-manager/main.js).
         "folder": "/plugins"
       }
     }
@@ -223,7 +224,7 @@ In this case, we suppose that you decided to put your administration and the plu
 }
 ```
 
-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 `host`. It means that the plugins URLs will use the host URL as the origin. So the plugins URLs will be `https://yourfrontend.com/dashboard/plugins/content-manager/main.js`.
+The administration URL will be https://yourfrontend.com/dashboard and every request from the panel will hit the backend at https://yourbackend.com. The plugins will be injected through the `host`. It means that the plugins URLs will use the host URL as the origin. So the plugins URLs will be `https://yourfrontend.com/dashboard/plugins/content-manager/main.js`.
 
 We also added a `folder` setting to separate the plugins from the administration build. In your server, the files structure should look like this:
 ```

packages/strapi-helper-plugin/lib/internals/webpack/webpack.base.babel.js

@@ -49,7 +49,8 @@ if (!isSetup) {
 // Define remote and backend URLs.
 const URLs = {
   host: '/admin',
-  backend: '/'
+  backend: '/',
+  publicPath: null
 };
 
 if (isAdmin && !isSetup) {
@@ -58,11 +59,15 @@ if (isAdmin && !isSetup) {
 
   try {
     const server = require(serverConfig);
-    const path = _.get(server, 'admin.path', '/admin');
 
     if (process.env.PWD.indexOf('/admin') !== -1) {
-      URLs.host = _.get(server, 'admin.path', '/admin');
+      if (_.get(server, 'admin.build.host')) {
+        URLs.host = _.get(server, 'admin.build.host', '/admin').replace(/\/$/, '') || '/';
+      } else {
+        URLs.host = _.get(server, 'admin.path', '/admin');
+      }
 
+      URLs.publicPath = URLs.host;
       URLs.backend = _.get(server, 'admin.build.backend', `/`);
     }
   } catch (e) {

packages/strapi-helper-plugin/lib/internals/webpack/webpack.prod.babel.js

@@ -67,8 +67,27 @@ const plugins = [
   // new BundleAnalyzerPlugin(),
 ];
 
+let publicPath;
+
 // Build the `index.html file`
 if (isAdmin) {
+  // Load server configuration.
+  const serverConfig = path.resolve(appPath, 'config', 'environments', _.lowerCase(process.env.NODE_ENV), 'server.json');
+
+  try {
+    const server = require(serverConfig);
+
+    if (process.env.PWD.indexOf('/admin') !== -1) {
+      if (_.get(server, 'admin.build.host')) {
+        publicPath = _.get(server, 'admin.build.host', '/admin').replace(/\/$/, '') || '/';
+      } else {
+        publicPath = _.get(server, 'admin.path', '/admin');
+      }
+    }
+  } catch (e) {
+    throw new Error(`Impossible to access to ${serverConfig}`);
+  }
+
   plugins.push(new HtmlWebpackPlugin({
     template: 'admin/src/index.html',
     minify: {
@@ -118,7 +137,8 @@ module.exports = require('./webpack.base.babel')({
   // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
   output: {
     filename: '[name].js',
-    chunkFilename: '[name].[chunkhash].chunk.js'
+    chunkFilename: '[name].[chunkhash].chunk.js',
+    publicPath,
   },
 
   // In production, we minify our CSS with cssnano

packages/strapi/lib/core/admin.js

@@ -42,7 +42,7 @@ module.exports = function() {
             $('script').each(function(i, elem) {
               if ($(this).attr('src')) {
                 const parse = path.parse($(this).attr('src'));
-                const url = URL.parse(_.get(strapi.config.currentEnvironment.server, 'admin.path', '/admin'));
+                const url = URL.parse(_.get(strapi.config.currentEnvironment.server, 'admin.build.host', _.get(strapi.config.currentEnvironment.server, 'admin.path', '/admin')));
 
                 $(this).attr('src', `${url.pathname.replace(/\/$/, '')}/${parse.base}`);
               }

packages/strapi/lib/core/plugins.js

@@ -9,24 +9,26 @@ module.exports = function() {
   return new Promise((resolve, reject) => {
     const folder = ((url = _.get(strapi.config.currentEnvironment.server, 'admin.path', 'admin')) =>
       url[0] === '/' ? url.substring(1) : url
-    )();
+    )().replace(/\/$/, '') ;
 
     const configuratePlugin = (acc, current, source, name) => {
       switch (source) {
         case 'host': {
-          // if (!_.get(this.config.environments[current].server, 'admin.build.host')) {
-          //   throw new Error(`You can't use \`remote\` as a source without set the \`host\` configuration.`);
-          // }
+          const host = _.get(this.config.environments[current].server, 'admin.build.host').replace(/\/$/, '') || '/';
+
+          if (!host) {
+            throw new Error(`You can't use \`remote\` as a source without set the \`host\` configuration.`);
+          }
 
           const folder = _.get(this.config.environments[current].server, 'admin.build.plugins.folder', null);
 
           if (_.isString(folder)) {
             const cleanFolder = folder[0] === '/' ? folder.substring(1) : folder;
 
-            return `/${cleanFolder}/${name}/main.js`;
+            return `/${host}/${cleanFolder}/${name}/main.js`.replace('//', '/');
           }
 
-          return `/${name}/main.js`;
+          return `/${host}/${name}/main.js`.replace('//', '/');
         }
         case 'custom':
           if (!_.isEmpty(_.get(this.plugins[name].config, `sources.${current}`, {}))) {
@@ -34,7 +36,7 @@ module.exports = function() {
           }
 
           throw new Error(`You have to define the source URL for each environment in \`./plugins/**/config/sources.json\``);
-        case 'origin':
+        case 'backend':
           const backend = _.get(this.config.environments[current], 'server.admin.build.backend', `http://${this.config.environments[current].server.host}:${this.config.environments[current].server.port}`).replace(/\/$/, '');
 
           return `${backend}/${folder.replace(/\/$/, '')}/${name}/main.js`;