strapi/packages/strapi-admin/index.js

const path = require('path');
const fs = require('fs-extra');
const webpack = require('webpack');
const getWebpackConfig = require('./webpack.config.js');
const WebpackDevServer = require('webpack-dev-server');

const getPkgPath = name =>
  path.dirname(require.resolve(`${name}/package.json`));

async function createPluginsJs(plugins, dest) {
  const content = `
    const injectReducer = require('./utils/injectReducer').default;
    const injectSaga = require('./utils/injectSaga').default;
    const useInjectReducer = require('./utils/injectReducer').useInjectReducer;
    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:
      window.localStorage.getItem('strapi-admin-language') ||
      window.navigator.language ||
      window.navigator.userLanguage ||
      'en',
      injectReducer,
      injectSaga,
      useInjectReducer,
      useInjectSaga,
    });

    module.exports = {
      ${plugins
        .map(name => {
          const shortName = name.replace(/^strapi-plugin-/i, '');
          const req = `require('../../plugins/${name}/admin/src').default`;
          return `'${shortName}': ${req}`;
        })
        .join(',\n')}
    }
  `;

  return fs.writeFile(
    path.resolve(dest, 'admin', 'src', 'plugins.js'),
    content
  );
}

async function copyPlugin(name, dest) {
  const pkgFilePath = getPkgPath(name);

  const resolveDepPath = (...args) => path.resolve(pkgFilePath, ...args);
  const resolveDest = (...args) => path.resolve(dest, 'plugins', name, ...args);

  const copy = (...args) => {
    return fs.copy(resolveDepPath(...args), resolveDest(...args));
  };

  // Copy the entire admin folder
  await copy('admin');

  // Copy the layout.js if it exists
  if (await fs.exists(path.resolve(pkgFilePath, 'config', 'layout.js'))) {
    await fs.ensureDir(resolveDest('config'));
    await copy('config', 'layout.js');
  }

  await copy('package.json');
}

async function copyAdmin(dest) {
  const adminPath = getPkgPath('strapi-admin');

  await fs.ensureDir(path.resolve(dest, 'config'));
  await fs.copy(path.resolve(adminPath, 'admin'), path.resolve(dest, 'admin'));
  await fs.copy(
    path.resolve(adminPath, 'config', 'layout.js'),
    path.resolve(dest, 'config', 'layout.js')
  );
}

async function copyCustomAdmin(src, dest) {
  await fs.copy(src, path.resolve(dest, 'admin'));
}

async function createCacheDir(dir) {
  const cacheDir = path.resolve(dir, '.cache');

  const pkgJSON = require(path.join(dir, 'package.json'));

  const pluginsToCopy = Object.keys(pkgJSON.dependencies).filter(
    dep =>
      dep.startsWith('strapi-plugin') &&
      fs.existsSync(path.resolve(getPkgPath(dep), 'admin', 'src', 'index.js'))
  );

  // TODO: add logic to avoid copying files if not necessary

  // create .cache dir
  await fs.emptyDir(cacheDir);

  // copy admin core code
  await copyAdmin(cacheDir);

  // copy plugins code
  await Promise.all(pluginsToCopy.map(name => copyPlugin(name, cacheDir)));

  // create plugins.js with plugins requires
  await createPluginsJs(pluginsToCopy, cacheDir);

  // override admin code with user customizations
  if (fs.pathExistsSync(path.join(dir, 'admin'))) {
    await copyCustomAdmin(path.join(dir, 'admin'), cacheDir);
  }

  // override plugins' admin code with user customizations
  const pluginsToOverride = pluginsToCopy.reduce((acc, current) => {
    const pluginName = current.replace(/^strapi-plugin-/i, '');

    if (fs.pathExistsSync(path.join(dir, 'extensions', pluginName, 'admin'))) {
      acc.push(pluginName);
    }

    return acc;
  }, []);

  await Promise.all(
    pluginsToOverride.map(plugin =>
      copyCustomAdmin(
        path.join(dir, 'extensions', plugin, 'admin'),
        path.join(cacheDir, 'plugins', `strapi-plugin-${plugin}`)
      )
    )
  );
}

async function build({ dir, env, options }) {
  const cacheDir = path.resolve(dir, '.cache');

  const entry = path.resolve(cacheDir, 'admin', 'src', 'app.js');
  const dest = path.resolve(dir, 'build');

  const config = getWebpackConfig({ entry, dest, env, options });

  const compiler = webpack(config);

  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      let messages;
      if (err) {
        if (!err.message) {
          return reject(err);
        }
        messages = {
          errors: [err.message],
          warnings: [],
        };
      } else {
        messages = stats.toJson({ all: false, warnings: true, errors: true });
      }

      if (messages.errors.length) {
        // Only keep the first error. Others are often indicative
        // of the same problem, but confuse the reader with noise.
        if (messages.errors.length > 1) {
          messages.errors.length = 1;
        }
        return reject(new Error(messages.errors.join('\n\n')));
      }

      return resolve({
        stats,
        warnings: messages.warnings,
      });
    });
  });
}

async function watch(dir) {
  console.log('Starting the dev web server...');
  const port = 8000;
  const entry = path.join(dir, '.cache', 'admin', 'src', 'app.js');
  const dest = path.join(dir, 'build');
  const env = 'development';
  const options = {
    backend: 'http://localhost:1337',
    publicPath: '/admin/',
  };

  const args = {
    entry,
    dest,
    env,
    options,
  };

  const opts = {
    // clientLogLevel: 'none',
    hot: true,
    quiet: true,
    publicPath: '/admin/',
    historyApiFallback: {
      index: '/admin/',
    },
  };

  const server = new WebpackDevServer(webpack(getWebpackConfig(args)), opts);

  server.listen(port, 'localhost', function(err) {
    if (err) {
      console.log(err);
    }
    console.log('WebpackDevServer listening at localhost:', port);
  });
}

module.exports = {
  build,
  createPluginsJs,
  createCacheDir,
  watch,
  copyCustomAdmin,
};