Add Warning - Watching Admin/Website Without Having API Deployed

packages/cli/commands/wcp/login.js

@@ -1,6 +1,7 @@
 const open = require("open");
 const { GraphQLClient } = require("graphql-request");
-const { setProjectId, setWcpPat, sleep } = require("./utils");
+const { setProjectId, setWcpPat } = require("./utils");
+const { sleep } = require("../../utils");
 const chalk = require("chalk");
 const { getWcpGqlApiUrl, getWcpAppUrl } = require("@webiny/wcp");
 

packages/cli/commands/wcp/project.js

@@ -1,7 +1,8 @@
 const open = require("open");
 const inquirer = require("inquirer");
 const chalk = require("chalk");
-const { getUser, WCP_APP_URL, setProjectId, sleep } = require("./utils");
+const { getUser, WCP_APP_URL, setProjectId } = require("./utils");
+const { sleep } = require("../../utils");
 
 module.exports.command = () => [
     {

packages/cli/commands/wcp/utils/index.js

@@ -6,7 +6,6 @@ const { setWcpPat } = require("./setWcpPat");
 const { getWcpPat } = require("./getWcpPat");
 const { getWcpProjectId } = require("./getWcpProjectId");
 const { getWcpOrgProjectId } = require("./getWcpOrgProjectId");
-const { sleep } = require("./sleep");
 
 module.exports = {
     getUser,
@@ -16,6 +15,5 @@ module.exports = {
     setWcpPat,
     getWcpPat,
     getWcpProjectId,
-    getWcpOrgProjectId,
-    sleep
+    getWcpOrgProjectId
 };

packages/cli/utils/index.js

@@ -6,6 +6,8 @@ const localStorage = require("./localStorage");
 const log = require("./log");
 const sendEvent = require("./sendEvent");
 const PluginsContainer = require("./PluginsContainer");
+const sleep = require("./sleep");
+const sleepSync = require("./sleepSync");
 
 const noop = () => {
     // Do nothing.
@@ -20,5 +22,7 @@ module.exports = {
     log,
     noop,
     sendEvent,
-    PluginsContainer
+    PluginsContainer,
+    sleep,
+    sleepSync
 };

packages/cli/utils/sleep.js

@@ -0,0 +1,3 @@
+const sleep = (ms = 1500) => new Promise(resolve => setTimeout(resolve, ms));
+
+module.exports = sleep;

packages/cli/utils/sleepSync.js

@@ -0,0 +1,8 @@
+const sleepSync = (ms = 1500) => {
+    const start = Date.now();
+    while (Date.now() < start + ms) {
+        // Do nothing.
+    }
+};
+
+module.exports = sleepSync;

packages/serverless-cms-aws/src/admin/plugins/ensureApiDeployed.ts

@@ -1,37 +1,25 @@
 import { getStackOutput } from "@webiny/cli-plugin-deploy-pulumi/utils";
-import {
-    createBeforeBuildPlugin,
-    createBeforeWatchPlugin
-} from "@webiny/cli-plugin-deploy-pulumi/plugins";
+import { createBeforeBuildPlugin } from "@webiny/cli-plugin-deploy-pulumi/plugins";
 import { GracefulError } from "@webiny/cli-plugin-deploy-pulumi/utils";
-import type { Callable } from "@webiny/cli-plugin-deploy-pulumi/plugins/PulumiCommandLifecycleEventHookPlugin";
 
-const createPluginCallable: (command: "build" | "watch") => Callable =
-    command =>
-    ({ env }, ctx) => {
-        const output = getStackOutput({ folder: "apps/api", env });
-        const apiDeployed = output && Object.keys(output).length > 0;
-        if (apiDeployed) {
-            return;
-        }
+export const ensureApiDeployedBeforeBuild = createBeforeBuildPlugin(({ env }, ctx) => {
+    const output = getStackOutput({ folder: "apps/api", env });
+    const apiDeployed = output && Object.keys(output).length > 0;
+    if (apiDeployed) {
+        return;
+    }
 
-        const apiAppName = ctx.error.hl("API");
-        const adminAppName = ctx.error.hl("Admin");
-        const cmd = ctx.error.hl(`yarn webiny deploy api --env ${env}`);
-        ctx.error(
-            `Cannot ${command} ${adminAppName} project application before deploying ${apiAppName}.`
-        );
+    const apiAppName = ctx.error.hl("API");
+    const adminAppName = ctx.error.hl("Admin");
+    const cmd = ctx.error.hl(`yarn webiny deploy api --env ${env}`);
+    ctx.error(`Cannot build ${adminAppName} project application before deploying ${apiAppName}.`);
 
-        throw new GracefulError(
-            [
-                `Before ${command}ing ${adminAppName} project application, please`,
-                `deploy ${apiAppName} first by running: ${cmd}.`
-            ].join(" ")
-        );
-    };
+    throw new GracefulError(
+        [
+            `Before building ${adminAppName} project application, please`,
+            `deploy ${apiAppName} first by running: ${cmd}.`
+        ].join(" ")
+    );
+});
 
-export const ensureApiDeployedBeforeBuild = createBeforeBuildPlugin(createPluginCallable("build"));
-ensureApiDeployedBeforeBuild.name = "admin.before-deploy.ensure-api-deployed";
-
-export const ensureApiDeployedBeforeWatch = createBeforeWatchPlugin(createPluginCallable("watch"));
-ensureApiDeployedBeforeWatch.name = "admin.before-watch.ensure-api-deployed";
+ensureApiDeployedBeforeBuild.name = "admin.before-build.ensure-api-deployed";

packages/serverless-cms-aws/src/createAdminApp.ts

@@ -1,18 +1,14 @@
 import { createAdminPulumiApp, CreateAdminPulumiAppParams } from "@webiny/pulumi-aws";
 import { uploadAppToS3 } from "./react/plugins";
-import { ensureApiDeployedBeforeBuild, ensureApiDeployedBeforeWatch } from "./admin/plugins";
+import { ensureApiDeployedBeforeBuild } from "./admin/plugins";
 import { PluginCollection } from "@webiny/plugins/types";
 
 export interface CreateAdminAppParams extends CreateAdminPulumiAppParams {
     plugins?: PluginCollection;
 }
 
 export function createAdminApp(projectAppParams: CreateAdminAppParams = {}) {
-    const builtInPlugins = [
-        uploadAppToS3({ folder: "apps/admin" }),
-        ensureApiDeployedBeforeBuild,
-        ensureApiDeployedBeforeWatch
-    ];
+    const builtInPlugins = [uploadAppToS3({ folder: "apps/admin" }), ensureApiDeployedBeforeBuild];
 
     const customPlugins = projectAppParams.plugins ? [...projectAppParams.plugins] : [];
 

packages/serverless-cms-aws/src/createAdminAppConfig.ts

@@ -1,6 +1,9 @@
 import { createReactAppConfig, ReactAppConfigModifier } from "~/createReactAppConfig";
 import { ApiOutput } from "@webiny/pulumi-aws";
 
+// @ts-expect-error Rewrite CLI into TypeScript.
+import { log, sleepSync } from "@webiny/cli/utils";
+
 export const createAdminAppConfig = (modifier?: ReactAppConfigModifier) => {
     return createReactAppConfig(baseParams => {
         const { config, options } = baseParams;
@@ -14,6 +17,18 @@ export const createAdminAppConfig = (modifier?: ReactAppConfigModifier) => {
         }));
 
         config.pulumiOutputToEnv<ApiOutput>("apps/api", ({ output, env }) => {
+            if (!output) {
+                log.warning(
+                    `Could not assign required environment variables. %s project application's stack output could not be retrieved. Learn more: https://webiny.link/missing-stack-output`,
+                    "API"
+                );
+
+                // We want to wait a bit because Webpack output just quickly hides the warning message.
+                sleepSync(5000);
+
+                return env;
+            }
+
             return {
                 ...env,
                 REACT_APP_USER_POOL_REGION: output.region,

packages/serverless-cms-aws/src/createWebsiteApp.ts

@@ -5,7 +5,6 @@ import {
     lambdaEdgeWarning,
     renderWebsite,
     telemetryNoLongerNewUser,
-    ensureApiDeployedBeforeWatch,
     ensureApiDeployedBeforeBuild
 } from "./website/plugins";
 import { uploadAppToS3 } from "./react/plugins";
@@ -21,8 +20,7 @@ export function createWebsiteApp(projectAppParams: CreateWebsiteAppParams = {})
         lambdaEdgeWarning,
         renderWebsite,
         telemetryNoLongerNewUser,
-        ensureApiDeployedBeforeBuild,
-        ensureApiDeployedBeforeWatch
+        ensureApiDeployedBeforeBuild
     ];
 
     const customPlugins = projectAppParams.plugins ? [...projectAppParams.plugins] : [];

packages/serverless-cms-aws/src/createWebsiteAppConfig.ts

@@ -1,6 +1,9 @@
 import { createReactAppConfig, ReactAppConfigModifier } from "~/createReactAppConfig";
 import { ApiOutput } from "@webiny/pulumi-aws";
 
+// @ts-expect-error Rewrite CLI into TypeScript.
+import { log, sleepSync } from "@webiny/cli/utils";
+
 export const createWebsiteAppConfig = (modifier?: ReactAppConfigModifier) => {
     return createReactAppConfig(baseParams => {
         const { config, options } = baseParams;
@@ -12,6 +15,18 @@ export const createWebsiteAppConfig = (modifier?: ReactAppConfigModifier) => {
         }));
 
         config.pulumiOutputToEnv<ApiOutput>("apps/api", ({ output, env }) => {
+            if (!output) {
+                log.warning(
+                    `Could not assign required environment variables. %s project application's stack output could not be retrieved. Learn more: https://webiny.link/missing-stack-output`,
+                    "API"
+                );
+
+                // We want to wait a bit because Webpack output just quickly hides the warning message.
+                sleepSync(5000);
+
+                return env;
+            }
+
             return {
                 ...env,
                 REACT_APP_GRAPHQL_API_URL: `${output.apiUrl}/graphql`,

packages/serverless-cms-aws/src/enterprise/createAdminApp.ts

@@ -1,18 +1,14 @@
 import { createAdminPulumiApp, CreateAdminPulumiAppParams } from "@webiny/pulumi-aws/enterprise";
 import { uploadAppToS3 } from "~/react/plugins";
 import { PluginCollection } from "@webiny/plugins/types";
-import { ensureApiDeployedBeforeBuild, ensureApiDeployedBeforeWatch } from "~/website/plugins";
+import { ensureApiDeployedBeforeBuild } from "~/website/plugins";
 
 export interface CreateAdminAppParams extends CreateAdminPulumiAppParams {
     plugins?: PluginCollection;
 }
 
 export function createAdminApp(projectAppParams: CreateAdminAppParams = {}) {
-    const builtInPlugins = [
-        uploadAppToS3({ folder: "apps/admin" }),
-        ensureApiDeployedBeforeBuild,
-        ensureApiDeployedBeforeWatch
-    ];
+    const builtInPlugins = [uploadAppToS3({ folder: "apps/admin" }), ensureApiDeployedBeforeBuild];
 
     const customPlugins = projectAppParams.plugins ? [...projectAppParams.plugins] : [];
 

packages/serverless-cms-aws/src/enterprise/createWebsiteApp.ts

@@ -8,8 +8,7 @@ import {
     lambdaEdgeWarning,
     renderWebsite,
     telemetryNoLongerNewUser,
-    ensureApiDeployedBeforeBuild,
-    ensureApiDeployedBeforeWatch
+    ensureApiDeployedBeforeBuild
 } from "~/website/plugins";
 import { uploadAppToS3 } from "~/react/plugins";
 
@@ -24,8 +23,7 @@ export function createWebsiteApp(projectAppParams: CreateWebsiteAppParams = {})
         lambdaEdgeWarning,
         renderWebsite,
         telemetryNoLongerNewUser,
-        ensureApiDeployedBeforeBuild,
-        ensureApiDeployedBeforeWatch
+        ensureApiDeployedBeforeBuild
     ];
 
     const customPlugins = projectAppParams.plugins ? [...projectAppParams.plugins] : [];

packages/serverless-cms-aws/src/website/plugins/ensureApiDeployed.ts

@@ -1,37 +1,25 @@
 import { getStackOutput } from "@webiny/cli-plugin-deploy-pulumi/utils";
-import {
-    createBeforeBuildPlugin,
-    createBeforeWatchPlugin
-} from "@webiny/cli-plugin-deploy-pulumi/plugins";
+import { createBeforeBuildPlugin } from "@webiny/cli-plugin-deploy-pulumi/plugins";
 import { GracefulError } from "@webiny/cli-plugin-deploy-pulumi/utils";
-import type { Callable } from "@webiny/cli-plugin-deploy-pulumi/plugins/PulumiCommandLifecycleEventHookPlugin";
 
-const createPluginCallable: (command: "build" | "watch") => Callable =
-    command =>
-    ({ env }, ctx) => {
-        const output = getStackOutput({ folder: "apps/api", env });
-        const apiDeployed = output && Object.keys(output).length > 0;
-        if (apiDeployed) {
-            return;
-        }
+export const ensureApiDeployedBeforeBuild = createBeforeBuildPlugin(({ env }, ctx) => {
+    const output = getStackOutput({ folder: "apps/api", env });
+    const apiDeployed = output && Object.keys(output).length > 0;
+    if (apiDeployed) {
+        return;
+    }
 
-        const apiAppName = ctx.error.hl("API");
-        const websiteAppName = ctx.error.hl("Website");
-        const cmd = ctx.error.hl(`yarn webiny deploy api --env ${env}`);
-        ctx.error(
-            `Cannot ${command} ${websiteAppName} project application before deploying ${apiAppName}.`
-        );
+    const apiAppName = ctx.error.hl("API");
+    const websiteAppName = ctx.error.hl("Website");
+    const cmd = ctx.error.hl(`yarn webiny deploy api --env ${env}`);
+    ctx.error(`Cannot build ${websiteAppName} project application before deploying ${apiAppName}.`);
 
-        throw new GracefulError(
-            [
-                `Before ${command}ing ${websiteAppName} project application, please`,
-                `deploy ${apiAppName} first by running: ${cmd}.`
-            ].join(" ")
-        );
-    };
+    throw new GracefulError(
+        [
+            `Before building ${websiteAppName} project application, please`,
+            `deploy ${apiAppName} first by running: ${cmd}.`
+        ].join(" ")
+    );
+});
 
-export const ensureApiDeployedBeforeBuild = createBeforeBuildPlugin(createPluginCallable("build"));
-ensureApiDeployedBeforeBuild.name = "website.before-deploy.ensure-api-deployed";
-
-export const ensureApiDeployedBeforeWatch = createBeforeWatchPlugin(createPluginCallable("watch"));
-ensureApiDeployedBeforeWatch.name = "website.before-watch.ensure-api-deployed";
+ensureApiDeployedBeforeBuild.name = "website.before-build.ensure-api-deployed";