Merge branch 'master' of github.com:spotify/backstage into shmidt-i/backend-hmr-2

packages/cli/config/eslint.backend.js

@@ -52,6 +52,8 @@ module.exports = {
       'warn',
       { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
     ],
+    // Avoid cross-package imports
+    'no-restricted-imports': [2, { patterns: ['**/../../**/*/src/**'] }],
   },
   overrides: [
     {

packages/cli/config/eslint.js

@@ -57,18 +57,19 @@ module.exports = {
       'warn',
       { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
     ],
-
-    // Importing the entire MUI icons packages kills build performance as the list of icons is huge.
     'no-restricted-imports': [
       2,
       {
         paths: [
           {
+            // Importing the entire MUI icons packages kills build performance as the list of icons is huge.
             name: '@material-ui/icons',
             message: "Please import '@material-ui/icons/<Icon>' instead.",
           },
           ...require('module').builtinModules,
         ],
+        // Avoid cross-package imports
+        patterns: ['**/../../**/*/src/**'],
       },
     ],
   },

packages/cli/config/jest.js

@@ -41,7 +41,7 @@ async function getConfig() {
     for (const pkg of packages) {
       const mainSrc = pkg.get('main:src');
       if (mainSrc) {
-        moduleNameMapper[pkg.name] = path.resolve(pkg.location, mainSrc);
+        moduleNameMapper[`^${pkg.name}$`] = path.resolve(pkg.location, mainSrc);
       }
     }
   }

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/cli",
   "description": "CLI for developing Backstage plugins and apps",
-  "version": "0.1.1-alpha.7",
+  "version": "0.1.1-alpha.8",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -69,7 +69,7 @@
     "replace-in-file": "^6.0.0",
     "rollup": "2.10.x",
     "rollup-plugin-dts": "^1.4.6",
-    "rollup-plugin-esbuild": "^1.4.1",
+    "rollup-plugin-esbuild": "^2.0.0",
     "rollup-plugin-image-files": "^1.4.2",
     "rollup-plugin-peer-deps-external": "^2.2.2",
     "rollup-plugin-postcss": "^3.1.1",

packages/cli/src/lib/bundler/bundle.ts

@@ -23,7 +23,7 @@ import {
   printFileSizesAfterBuild,
 } from 'react-dev-utils/FileSizeReporter';
 import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
-import { createConfig } from './config';
+import { createConfig, resolveBaseUrl } from './config';
 import { BuildOptions } from './types';
 import { resolveBundlingPaths } from './paths';
 import chalk from 'chalk';
@@ -41,6 +41,7 @@ export async function buildBundle(options: BuildOptions) {
     checksEnabled: false,
     isDev: false,
     isBackend: false,
+    baseUrl: resolveBaseUrl(options.config),
   });
   const compiler = webpack(config);
 

packages/cli/src/lib/bundler/config.ts

@@ -21,6 +21,7 @@ import StartServerPlugin from 'start-server-webpack-plugin';
 import webpack from 'webpack';
 import nodeExternals from 'webpack-node-externals';
 import { optimization } from './optimization';
+import { Config } from '@backstage/config';
 import { BundlingPaths } from './paths';
 import { transforms } from './transforms';
 import { BundlingOptions } from './types';
@@ -30,6 +31,18 @@ import { BundlingOptions } from './types';
 // import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
 // import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 
+export function resolveBaseUrl(config: Config): URL {
+  const baseUrl = config.getString('app.baseUrl');
+  if (!baseUrl) {
+    throw new Error('app.baseUrl must be set in config');
+  }
+  try {
+    return new URL(baseUrl, 'http://localhost:3000');
+  } catch (error) {
+    throw new Error(`Invalid app.baseUrl, ${error}`);
+  }
+}
+
 export function createConfig(
   paths: BundlingPaths,
   options: BundlingOptions,

packages/cli/src/lib/bundler/server.ts

@@ -15,25 +15,17 @@
  */
 
 import fs from 'fs-extra';
-import yn from 'yn';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import openBrowser from 'react-dev-utils/openBrowser';
-import { choosePort, prepareUrls } from 'react-dev-utils/WebpackDevServerUtils';
-import { createConfig } from './config';
+import { createConfig, resolveBaseUrl } from './config';
 import { ServeOptions } from './types';
 import { resolveBundlingPaths } from './paths';
 
 export async function serveBundle(options: ServeOptions) {
-  const host = process.env.HOST ?? '0.0.0.0';
-  const defaultPort = parseInt(process.env.PORT ?? '', 10) || 3000;
+  const url = resolveBaseUrl(options.config);
 
-  const port = await choosePort(host, defaultPort);
-  if (!port) {
-    throw new Error(`Invalid or no port set: '${port}'`);
-  }
-
-  const protocol = yn(process.env.HTTPS, { default: false }) ? 'https' : 'http';
+  const port = Number(url.port) || (url.protocol === 'https:' ? 443 : 80);
 
   const paths = resolveBundlingPaths(options);
   const pkgPath = paths.targetPackageJson;
@@ -42,6 +34,7 @@ export async function serveBundle(options: ServeOptions) {
     ...options,
     isDev: true,
     isBackend: false,
+    baseUrl: url,
   });
   const compiler = webpack(config);
 
@@ -53,33 +46,20 @@ export async function serveBundle(options: ServeOptions) {
     historyApiFallback: true,
     clientLogLevel: 'warning',
     stats: 'errors-warnings',
-    https: protocol === 'https',
-    host,
+    https: url.protocol === 'https:',
+    host: url.hostname,
     port,
     proxy: pkg.proxy,
   });
 
   await new Promise((resolve, reject) => {
-    server.listen(port, host, (err?: Error) => {
+    server.listen(port, url.hostname, (err?: Error) => {
       if (err) {
         reject(err);
         return;
       }
 
-      // TODO: This signature is available in 10.2.1 but doesn't have types published yet
-      const latestPrepareUrls = prepareUrls as (
-        protocol: string,
-        host: string,
-        port: number,
-        path?: string,
-      ) => ReturnType<typeof prepareUrls>;
-      const urls = latestPrepareUrls(
-        protocol,
-        host,
-        port,
-        config.output?.publicPath,
-      );
-      openBrowser(urls.localUrlForBrowser);
+      openBrowser(url.href);
       resolve();
     });
   });

packages/cli/src/lib/bundler/types.ts

@@ -23,6 +23,7 @@ export type BundlingOptions = {
   config: Config;
   appConfigs: AppConfig[];
   isBackend: boolean;
+  baseUrl: URL;
 };
 
 export type ServeOptions = BundlingPathsOptions & {

packages/cli/src/lib/packager/config.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import chalk from 'chalk';
 import fs from 'fs-extra';
 import { relative as relativePath } from 'path';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
@@ -42,7 +43,9 @@ export const makeConfigs = async (
   if (!declarationsExist) {
     const path = relativePath(paths.targetDir, typesInput);
     throw new Error(
-      `No declaration files found at ${path}, be sure to run tsc to generate .d.ts files before packaging`,
+      `No declaration files found at ${path}, be sure to run ${chalk.bgRed.white(
+        'yarn tsc',
+      )} to generate .d.ts files before packaging`,
     );
   }
 
@@ -50,6 +53,7 @@ export const makeConfigs = async (
 
   if (options.outputs.has(Output.cjs) || options.outputs.has(Output.esm)) {
     const output = new Array<OutputOptions>();
+    const mainFields = ['module', 'main'];
 
     if (options.outputs.has(Output.cjs)) {
       output.push({
@@ -66,6 +70,8 @@ export const makeConfigs = async (
         chunkFileNames: 'esm/[name]-[hash].js',
         format: 'module',
       });
+      // Assume we're building for the browser if ESM output is included
+      mainFields.unshift('browser');
     }
 
     configs.push({
@@ -77,9 +83,7 @@ export const makeConfigs = async (
         peerDepsExternal({
           includeDependencies: true,
         }),
-        resolve({
-          mainFields: ['browser', 'module', 'main'],
-        }),
+        resolve({ mainFields }),
         commonjs({
           include: ['node_modules/**', '../../node_modules/**'],
           exclude: ['**/*.stories.*', '**/*.test.*'],

packages/cli/templates/default-app/packages/app/package.json.hbs

@@ -12,7 +12,7 @@
     "plugin-welcome": "0.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "6.0.0-alpha.5",
     "react-use": "^14.2.0"
   },
   "devDependencies": {
@@ -21,7 +21,6 @@
     "@testing-library/user-event": "^10.2.4",
     "@types/jest": "^25.2.2",
     "@types/node": "^12.0.0",
-    "@types/react-router-dom": "^5.1.3",
     "@types/testing-library__jest-dom": "^5.0.4",
     "cross-env": "^7.0.0",
     "cypress": "^4.2.0",

packages/cli/templates/default-app/plugins/welcome/package.json.hbs

@@ -27,7 +27,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-use": "^14.2.0",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "6.0.0-alpha.5"
   },
   "devDependencies": {
     "@backstage/cli": "^{{version}}",