Merge pull request #10237 from strapi/core/webpack-env

Add .env support in admin

.eslintrc.front.js

@@ -32,10 +32,9 @@ module.exports = {
     chai: false,
     ENABLED_EE_FEATURES: false,
     // TODO: put all this in process.env in webpack to avoid having to set them here
-    REMOTE_URL: true,
+    ADMIN_PATH: true,
     BACKEND_URL: true,
     PUBLIC_PATH: true,
-    MODE: true,
     NODE_ENV: true,
   },
   settings: {

jest.config.front.js

@@ -40,9 +40,7 @@ module.exports = {
       backendURL: 'http://localhost:1337',
     },
     BACKEND_URL: 'http://localhost:1337',
-    MODE: 'host',
+    ADMIN_PATH: '/admin',
-    PUBLIC_PATH: '/admin',
-    REMOTE_URL: '/',
     NODE_ENV: 'test',
     ENABLED_EE_FEATURES: [],
   },

packages/core/admin/.gitignore

@@ -8,3 +8,4 @@ yarn-error.log
 .DS_Store
 npm-debug.log
 .idea
+.env

packages/core/admin/admin/src/app.js

@@ -126,16 +126,6 @@ pluginsToLoad.forEach(plugin => {
   dispatch(pluginLoaded(plugin));
 });
 
-// TODO
-const remoteURL = (() => {
-  // Relative URL (ex: /dashboard)
-  if (REMOTE_URL[0] === '/') {
-    return (window.location.origin + REMOTE_URL).replace(/\/$/, '');
-  }
-
-  return REMOTE_URL.replace(/\/$/, '');
-})();
-
 const displayNotification = (message, status) => {
   console.warn(
     // Validate the text
@@ -163,9 +153,6 @@ const lockAppWithOverlay = () => {
 };
 
 window.strapi = Object.assign(window.strapi || {}, {
-  node: MODE || 'host',
-  env: NODE_ENV,
-  remoteURL,
   backendURL: BACKEND_URL === '/' ? window.location.origin : BACKEND_URL,
   notification: {
     // New notification api

packages/core/admin/admin/src/plugins.js

@@ -7,8 +7,6 @@ const useInjectSaga = require('./utils/injectSaga').useInjectSaga;
 const { languages } = require('./i18n');
 
 window.strapi = Object.assign(window.strapi || {}, {
-  node: MODE || 'host',
-  env: NODE_ENV,
   backendURL: BACKEND_URL === '/' ? window.location.origin : BACKEND_URL,
   languages,
   currentLanguage:
@@ -25,12 +23,12 @@ window.strapi = Object.assign(window.strapi || {}, {
 module.exports = {
   // FIXME:
   'strapi-plugin-documentation': require('../../../../plugins/documentation/admin/src').default,
-  // 'strapi-plugin-users-permissions': require('../../../../plugins/users-permissions/admin/src')
+  'strapi-plugin-users-permissions': require('../../../../plugins/users-permissions/admin/src')
-  //   .default,
+    .default,
-  // 'strapi-plugin-content-manager': require('../../../content-manager/admin/src').default,
+  'strapi-plugin-content-manager': require('../../../content-manager/admin/src').default,
-  // 'strapi-plugin-content-type-builder': require('../../../content-type-builder/admin/src').default,
+  'strapi-plugin-content-type-builder': require('../../../content-type-builder/admin/src').default,
-  // 'strapi-plugin-email': require('../../../email/admin/src').default,
+  'strapi-plugin-email': require('../../../email/admin/src').default,
-  // 'strapi-plugin-upload': require('../../../upload/admin/src').default,
+  'strapi-plugin-upload': require('../../../upload/admin/src').default,
-  // 'strapi-plugin-graphql': require('../../../../plugins/graphql/admin/src').default,
+  'strapi-plugin-graphql': require('../../../../plugins/graphql/admin/src').default,
-  // 'strapi-plugin-i18n': require('../../../../plugins/i18n/admin/src').default,
+  'strapi-plugin-i18n': require('../../../../plugins/i18n/admin/src').default,
 };

packages/core/admin/admin/src/utils/basename.js

@@ -1,3 +1,3 @@
-const basename = PUBLIC_PATH.replace(window.location.origin, '');
+const basename = ADMIN_PATH.replace(window.location.origin, '');
 
 export default basename;

packages/core/admin/env.js

@@ -0,0 +1,44 @@
+'use strict';
+
+const path = require('path');
+const dotenv = require('dotenv');
+const fs = require('fs-extra');
+
+const dotenvFilePath = path.resolve(process.cwd(), '.env');
+
+if (fs.existsSync(dotenvFilePath)) {
+  dotenv.config({ path: dotenvFilePath });
+}
+
+const STRAPI_ADMIN = /^STRAPI_ADMIN_/i;
+
+const getClientEnvironment = (useEE, options) => {
+  const raw = Object.keys(process.env)
+    .filter(key => STRAPI_ADMIN.test(key))
+    .reduce(
+      (acc, current) => {
+        acc[current] = process.env[current];
+
+        return acc;
+      },
+      {
+        ADMIN_PATH: options.adminPath,
+        BACKEND_URL: options.backend,
+        ENABLED_EE_FEATURES: options.features,
+        PROJECT_TYPE: useEE ? 'Enterprise' : 'Community',
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // REQUIRED STRAPI_ADMIN variables
+        // TODO
+        // STRAPI_ADMIN_SHOW_TUTORIALS: 'true',
+      }
+    );
+
+  const stringified = Object.keys(raw).reduce((env, key) => {
+    env[key] = JSON.stringify(raw[key]);
+    return env;
+  }, {});
+
+  return stringified;
+};
+
+module.exports = getClientEnvironment;

packages/core/admin/index.js

@@ -88,7 +88,6 @@ const useInjectSaga = require('./utils/injectSaga').useInjectSaga;
 const { languages } = require('./i18n');
 
 window.strapi = Object.assign(window.strapi || {}, {
-  node: MODE || 'host',
   backendURL: BACKEND_URL === '/' ? window.location.origin : BACKEND_URL,
   languages,
   currentLanguage:

packages/core/admin/package.json

@@ -50,6 +50,7 @@
     "classnames": "^2.3.1",
     "cross-env": "^7.0.3",
     "css-loader": "5.2.4",
+    "dotenv": "8.5.1",
     "execa": "^1.0.0",
     "file-loader": "6.2.0",
     "font-awesome": "^4.7.0",

packages/core/admin/webpack.config.dev.js

@@ -17,7 +17,7 @@ module.exports = () => {
   const env = analyzeBundle ? 'production' : 'development';
   const options = {
     backend: 'http://localhost:1337',
-    publicPath: '/admin/',
+    adminPath: '/admin/',
     features: process.env.ENABLED_EE_FEATURES || ['sso'],
   };
 

packages/core/admin/webpack.config.js

@@ -9,11 +9,7 @@ const WebpackBar = require('webpackbar');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 const isWsl = require('is-wsl');
 const alias = require('./webpack.alias.js');
-
+const getClientEnvironment = require('./env');
-// TODO: remove
-const URLs = {
-  mode: 'host',
-};
 
 module.exports = ({
   useEE,
@@ -23,11 +19,12 @@ module.exports = ({
   optimize,
   options = {
     backend: 'http://localhost:1337',
-    publicPath: '/admin/',
+    adminPath: '/admin/',
     features: [],
   },
 }) => {
   const isProduction = env === 'production';
+  const envVariables = getClientEnvironment(useEE, options);
 
   const webpackPlugins = isProduction
     ? [
@@ -51,7 +48,7 @@ module.exports = ({
     entry,
     output: {
       path: dest,
-      publicPath: options.publicPath,
+      publicPath: options.adminPath,
       // Utilize long-term caching by adding content hashes (not compilation hashes)
       // to compiled assets for production
       filename: isProduction ? '[name].[contenthash:8].js' : '[name].bundle.js',
@@ -163,17 +160,7 @@ module.exports = ({
         // FIXME
         // favicon: path.resolve(__dirname, 'admin/src/favicon.ico'),
       }),
-      // FIXME: some variables are not needed anymore
+      new webpack.DefinePlugin(envVariables),
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development'),
-        NODE_ENV: JSON.stringify(isProduction ? 'production' : 'development'),
-        REMOTE_URL: JSON.stringify(options.publicPath),
-        BACKEND_URL: JSON.stringify(options.backend),
-        MODE: JSON.stringify(URLs.mode), // Allow us to define the public path for the plugins assets.
-        PUBLIC_PATH: JSON.stringify(options.publicPath),
-        PROJECT_TYPE: JSON.stringify(useEE ? 'Enterprise' : 'Community'),
-        ENABLED_EE_FEATURES: JSON.stringify(options.features),
-      }),
       new webpack.NormalModuleReplacementPlugin(/ee_else_ce(\.*)/, function(resource) {
         let wantedPath = path.join(
           resource.context.substr(0, resource.context.lastIndexOf(`${path.sep}src${path.sep}`)),

packages/core/strapi/lib/commands/build.js

@@ -33,7 +33,7 @@ module.exports = async ({ clean, optimization }) => {
       optimize: optimization,
       options: {
         backend: serverUrl,
-        publicPath: addSlash(adminPath),
+        adminPath: addSlash(adminPath),
         features: ee.isEE ? ee.features.getEnabled() : [],
       },
     })

yarn.lock

@@ -7754,6 +7754,11 @@ dotenv@8.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
 
+dotenv@8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.5.1.tgz#e3a4c7862daba51b92bce0da5c349f11faa28663"
+  integrity sha512-qC1FbhCH7UH7B+BcRNUDhAk04d/n+tnGGB1ctwndZkVFeehYJOn39pRWWzmdzpFqImyX1KB8tO0DCHLf8yRaYQ==
+
 dotnet-deps-parser@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/dotnet-deps-parser/-/dotnet-deps-parser-5.0.0.tgz#5115c442cbefea59e4fb9f9ed8fa4863a0f3186d"