Fix build command

Signed-off-by: soupette <cyril@strapi.io>

examples/kitchensink-ts/package.json

@@ -7,7 +7,7 @@
     "develop": "strapi develop",
     "develop:ce": "STRAPI_DISABLE_EE=true strapi develop",
     "start": "strapi start",
-    "build": "strapi build",
+    "build": "strapi build --no-optimization",
     "build:ce": "STRAPI_DISABLE_EE=true strapi build",
     "strapi": "strapi"
   },

examples/kitchensink-ts/tsconfig-admin.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "lib": ["es2019", "es2020.promise", "es2020.bigint", "es2020.string", "DOM"],
     "noImplicitAny": false,
     "module": "es2020",
     "target": "es5",

examples/kitchensink-ts/tsconfig-server.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["es2019", "es2020.promise", "es2020.bigint", "es2020.string"],
+    "lib": ["es2019", "es2020.promise", "es2020.bigint", "es2020.string", "DOM"],
     "module": "commonjs",
     "target": "es2019",
     "strict": false,
+    "jsx": "react",
     "noImplicitAny": false,
     "esModuleInterop": true,
     "skipLibCheck": true,
@@ -14,7 +15,7 @@
     "noEmitOnError": true,
     "resolveJsonModule": true
   },
-  "include": ["src/plugins/**/*.json"],
+  "include": ["src/plugins/**/*.json", "./"],
 
-  "exclude": ["node_modules/", "dist/", "src/admin", "src/plugins/**/admin"]
+  "exclude": ["node_modules/", "dist/", "src/admin", ".cache/", ".tmp/"]
 }

packages/core/admin/index.js

@@ -12,19 +12,28 @@ const {
   watchAdminFiles,
 } = require('./utils');
 
-async function build({ plugins, dir, env, options, optimize, forceBuild, useTypeScript }) {
-  const buildAdmin = await shouldBuildAdmin({ dir, plugins, useTypeScript });
+async function build({
+  appDir,
+  buildDestDir,
+  env,
+  forceBuild,
+  optimize,
+  options,
+  plugins,
+  useTypeScript,
+}) {
+  const buildAdmin = await shouldBuildAdmin({ appDir, plugins, useTypeScript });
 
   if (!buildAdmin && !forceBuild) {
     return;
   }
 
   // Create the cache dir containing the front-end files.
-  await createCacheDir({ dir, plugins, useTypeScript });
+  await createCacheDir({ appDir, plugins, useTypeScript });
 
-  const cacheDir = path.resolve(dir, '.cache');
+  const cacheDir = path.resolve(appDir, '.cache');
   const entry = path.resolve(cacheDir, 'admin', 'src');
-  const dest = path.resolve(dir, 'build');
+  const dest = path.resolve(buildDestDir, 'build');
 
   // Roots for the @strapi/babel-plugin-switch-ee-ce
   const roots = {
@@ -34,14 +43,15 @@ async function build({ plugins, dir, env, options, optimize, forceBuild, useType
 
   const pluginsPath = Object.keys(plugins).map(pluginName => plugins[pluginName].pathToPlugin);
 
-  const config = getCustomWebpackConfig(dir, {
-    entry,
-    pluginsPath,
+  const config = getCustomWebpackConfig(appDir, {
+    appDir,
     cacheDir,
     dest,
+    entry,
     env,
-    options,
     optimize,
+    options,
+    pluginsPath,
     roots,
     useTypeScript,
   });
@@ -74,18 +84,23 @@ async function build({ plugins, dir, env, options, optimize, forceBuild, useType
   });
 }
 
-async function clean({ dir }) {
-  const buildDir = path.join(dir, 'build');
-  const cacheDir = path.join(dir, '.cache');
+async function clean({ appDir, buildDestDir }) {
+  // FIXME rename admin build dir and path to build dir
+  const buildDir = path.join(buildDestDir, 'build');
+  // .cache dir is always located at the root of the app
+  const cacheDir = path.join(appDir, '.cache');
 
   fs.removeSync(buildDir);
   fs.removeSync(cacheDir);
 }
 
-async function watchAdmin({ plugins, dir, host, port, browser, options, useTypeScript }) {
+async function watchAdmin({ appDir, plugins, dir, host, port, browser, options, useTypeScript }) {
+  console.log({ appDir });
+  // TODO appDir
+
   // Create the cache dir containing the front-end files.
   const cacheDir = path.join(dir, '.cache');
-  await createCacheDir({ dir, plugins, useTypeScript });
+  await createCacheDir({ appDir, plugins, useTypeScript });
 
   const entry = path.join(cacheDir, 'admin', 'src');
   const dest = path.join(dir, 'build');

packages/core/admin/utils/create-cache-dir.js

@@ -66,8 +66,8 @@ async function copyAdmin(dest) {
   await fs.copy(path.resolve(adminPath, 'package.json'), path.resolve(dest, 'package.json'));
 }
 
-async function createCacheDir({ dir, plugins, useTypeScript }) {
-  const cacheDir = path.resolve(dir, '.cache');
+async function createCacheDir({ appDir, plugins, useTypeScript }) {
+  const cacheDir = path.resolve(appDir, '.cache');
 
   const pluginsWithFront = Object.keys(plugins)
     .filter(pluginName => {
@@ -83,8 +83,8 @@ async function createCacheDir({ dir, plugins, useTypeScript }) {
   await copyAdmin(cacheDir);
 
   // Copy app.js or app.tsx if typescript is enabled
-  const customAdminConfigJSFilePath = path.join(dir, 'src', 'admin', 'app.js');
-  const customAdminConfigTSXFilePath = path.join(dir, 'src', 'admin', 'app.tsx');
+  const customAdminConfigJSFilePath = path.join(appDir, 'src', 'admin', 'app.js');
+  const customAdminConfigTSXFilePath = path.join(appDir, 'src', 'admin', 'app.tsx');
   const customAdminConfigFilePath = useTypeScript
     ? customAdminConfigTSXFilePath
     : customAdminConfigJSFilePath;
@@ -106,7 +106,7 @@ async function createCacheDir({ dir, plugins, useTypeScript }) {
   }
 
   // Copy admin extensions folder
-  const adminExtensionFolder = path.join(dir, 'src', 'admin', 'extensions');
+  const adminExtensionFolder = path.join(appDir, 'src', 'admin', 'extensions');
 
   if (fs.existsSync(adminExtensionFolder)) {
     await fs.copy(adminExtensionFolder, path.resolve(cacheDir, 'admin', 'src', 'extensions'));

packages/core/admin/utils/should-build-admin.js

@@ -8,8 +8,8 @@ const DEFAULT_PLUGINS = [
   'content-manager',
   'upload',
   'email',
-  'i18n',
-  'users-permissions',
+  // 'i18n',
+  // 'users-permissions',
 ];
 
 /**
@@ -41,8 +41,8 @@ const hasCustomAdminCode = async (dir, useTypeScript) => {
   return hasCustomConfigFile || hasCustomWebpackFile;
 };
 
-const shouldBuildAdmin = async ({ dir, plugins, useTypeScript }) => {
-  const appHasCustomAdminCode = await hasCustomAdminCode(dir, useTypeScript);
+const shouldBuildAdmin = async ({ appDir, plugins, useTypeScript }) => {
+  const appHasCustomAdminCode = await hasCustomAdminCode(appDir, useTypeScript);
   const appHasNonDefaultPlugins = hasNonDefaultPlugins(plugins);
 
   return appHasCustomAdminCode || appHasNonDefaultPlugins;

packages/core/admin/webpack.config.js

@@ -13,12 +13,13 @@ const alias = require('./webpack.alias');
 const getClientEnvironment = require('./env');
 
 module.exports = ({
-  entry,
+  appDir,
   cacheDir,
-  pluginsPath,
   dest,
+  entry,
   env,
   optimize,
+  pluginsPath,
   options = {
     backend: 'http://localhost:1337',
     adminPath: '/admin/',
@@ -53,7 +54,7 @@ module.exports = ({
     const tsChecker = new ForkTsCheckerPlugin({
       typescript: {
         // FIXME
-        configFile: path.join(cacheDir, '..', 'tsconfig.admin.json'),
+        configFile: path.join(appDir, 'tsconfig-admin.json'),
       },
     });
 

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

@@ -8,17 +8,24 @@ const { buildAdmin, buildTypeScript } = require('./builders');
  * `$ strapi build`
  */
 module.exports = async ({ optimization, forceBuild = true }) => {
-  let dir = process.cwd();
+  let buildDestDir = process.cwd();
+  const srcDir = process.cwd();
 
-  const isTSProject = await tsUtils.isTypeScriptProject(dir);
+  const isTSProject = await tsUtils.isTypeScriptProject(srcDir);
 
   // Typescript
   if (isTSProject) {
-    await buildTypeScript({ srcDir: dir, watch: false });
+    await buildTypeScript({ srcDir, watch: false });
 
     // Update the dir path for the next steps
-    dir = path.join(dir, 'dist');
+    buildDestDir = path.join(srcDir, 'dist');
   }
 
-  await buildAdmin({ dir, optimization, forceBuild, isTSProject });
+  await buildAdmin({
+    buildDestDir,
+    forceBuild,
+    isTSProject,
+    optimization,
+    srcDir,
+  });
 };

packages/core/strapi/lib/commands/builders/admin.js

@@ -10,9 +10,10 @@ const addSlash = require('../../utils/addSlash');
 const strapi = require('../../index');
 const getEnabledPlugins = require('../../core/loaders/plugins/get-enabled-plugins');
 
-module.exports = async ({ dir, optimization, forceBuild = true, isTSProject }) => {
+module.exports = async ({ buildDestDir, forceBuild = true, isTSProject, optimization, srcDir }) => {
   const strapiInstance = strapi({
-    dir,
+    // TODO check if this is working @convly
+    dir: buildDestDir,
     autoReload: true,
     serveAdminPanel: false,
   });
@@ -25,23 +26,27 @@ module.exports = async ({ dir, optimization, forceBuild = true, isTSProject }) =
   console.log(`Building your admin UI with ${green(env)} configuration...`);
 
   // Always remove the .cache and build folders
-  await strapiAdmin.clean({ dir });
+  // FIXME the BE should remove the build dir and the admin should only
+  // be responsible of removing the .cache dir.
+  await strapiAdmin.clean({ appDir: srcDir, buildDestDir });
 
-  ee({ dir });
+  // @convly shouldn't we use the app dir here?
+  ee({ dir: buildDestDir });
 
   return strapiAdmin
     .build({
-      forceBuild,
-      dir,
-      plugins,
+      appDir: srcDir,
+      buildDestDir,
       // front end build env is always production for now
       env: 'production',
+      forceBuild,
+      plugins,
       optimize: optimization,
       options: {
         backend: serverUrl,
         adminPath: addSlash(adminPath),
       },
-      useTypescript: isTSProject,
+      useTypeScript: isTSProject,
     })
     .then(() => {
       console.log('Admin UI built successfully');