create-plasmic-app 0.0.33 → 0.0.37

package/dist/templates/gatsby.js

@@ -1,15 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GATSBY_PLUGIN_CONFIG = exports.GATSBY_404 = exports.GATSBY_DEFAULT_PAGE = void 0;
-exports.GATSBY_DEFAULT_PAGE = `
+exports.wrapAppRootForCodegen = exports.makeGatsbyPlasmicInit = exports.GATSBY_SSR_CONFIG = exports.makeGatsbyHostPage = exports.GATSBY_PLUGIN_CONFIG = exports.GATSBY_404 = exports.makeGatsbyDefaultPage = void 0;
+const file_utils_1 = require("../utils/file-utils");
+const makeGatsbyDefaultPage = (format) => {
+    const ts = format === "ts";
+    return `
 import React from "react";
 import Helmet from "react-helmet";
 import {
-  initPlasmicLoader,
   PlasmicComponent,
-  PlasmicRootProvider,
+  PlasmicRootProvider,${file_utils_1.ifTs(ts, `
+  InitOptions,
+  ComponentRenderData,`)}
 } from "@plasmicapp/loader-gatsby";
 import { graphql } from "gatsby";
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init";
 
 export const query = graphql\`
   query ($path: String) {
@@ -18,7 +23,14 @@ export const query = graphql\`
   }
 \`;
 
-const PlasmicGatsbyPage = ({ data, location }) => {
+${file_utils_1.ifTs(ts, `interface PlasmicGatsbyPageProps {
+  data: {
+    plasmicOptions: InitOptions
+    plasmicComponents: ComponentRenderData
+  }
+}
+`)}
+const PlasmicGatsbyPage = ({ data }${file_utils_1.ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
   const {
     plasmicComponents,
     plasmicOptions,
@@ -27,7 +39,7 @@ const PlasmicGatsbyPage = ({ data, location }) => {
   const pageMetadata = pageMeta.pageMetadata;
   return (
     <PlasmicRootProvider
-      loader={initPlasmicLoader(plasmicOptions)}
+      loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
     >
       <Helmet>
@@ -43,13 +55,15 @@ const PlasmicGatsbyPage = ({ data, location }) => {
 
 export default PlasmicGatsbyPage;
 `.trim();
+};
+exports.makeGatsbyDefaultPage = makeGatsbyDefaultPage;
 exports.GATSBY_404 = `
 const NotFound = () => {
   return "Not Found";
 };
 export default NotFound;
 `.trim();
-const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken) => `
+const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken, useTypescript) => `
 {
   resolve: "@plasmicapp/loader-gatsby",
   options: {
@@ -59,8 +73,135 @@ const GATSBY_PLUGIN_CONFIG = (projectId, projectApiToken) => `
         token: "${projectApiToken}",
       },
     ], // An array of project ids.
-    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.js"),
+    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.${useTypescript ? "tsx" : "jsx"}"),
   },
 },
 `;
 exports.GATSBY_PLUGIN_CONFIG = GATSBY_PLUGIN_CONFIG;
+const makeGatsbyHostPage = (opts) => {
+    const { useTypescript, scheme } = opts;
+    if (scheme === "loader") {
+        return `
+import * as React from "react"
+import {
+  PlasmicCanvasHost${file_utils_1.ifTs(useTypescript, `, InitOptions`)}
+} from "@plasmicapp/loader-gatsby"
+import { graphql } from "gatsby"
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
+
+export const query = graphql\`
+  query {
+    plasmicOptions
+  }
+\`
+
+${file_utils_1.ifTs(useTypescript, `interface HostProps {
+  data: {
+    plasmicOptions: InitOptions;
+  }
+}
+`)}
+export default function Host({ data }${file_utils_1.ifTs(useTypescript, ": HostProps")}) {
+  const { plasmicOptions } = data
+  initPlasmicLoaderWithRegistrations(plasmicOptions)
+  return <PlasmicCanvasHost />
+}
+    `.trim();
+    }
+    else {
+        return `
+import * as React from "react"
+import { PlasmicCanvasHost, registerComponent } from "@plasmicapp/host";
+
+// You can register any code components that you want to use here; see
+// https://docs.plasmic.app/learn/code-components-ref/
+// And configure your Plasmic project to use the host url pointing at
+// the /plasmic-host page of your nextjs app (for example,
+// http://localhost:3000/plasmic-host).  See
+// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+
+// registerComponent(...)
+
+export default function PlasmicHost() {
+  return (
+    <PlasmicCanvasHost />
+  );
+}
+    `;
+    }
+};
+exports.makeGatsbyHostPage = makeGatsbyHostPage;
+exports.GATSBY_SSR_CONFIG = `
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.com/docs/ssr-apis/
+ */
+
+const React = require("react")
+
+/**
+ * Add preamble to allow functional code components in studio.
+ *
+ * See: https://docs.plasmic.app/learn/functional-code-components/
+ */
+const HeadComponents = [
+  <script
+    key="plasmic-preamble"
+    src="https://static1.plasmic.app/preamble.js"
+  />,
+]
+
+const isProduction = process.env.NODE_ENV === "production"
+
+exports.onRenderBody = ({ pathname, setHeadComponents }) => {
+  /**
+   * We add the preamble tag script to all pages during development mode
+   * because during development all pages are dynamically rendered based
+   * on \`/\` route, during production we add it only in \`/plasmic-host/\`
+   */
+  if (!isProduction || pathname === "/plasmic-host/") {
+    setHeadComponents(HeadComponents)
+  }
+}
+`.trim();
+const makeGatsbyPlasmicInit = (format) => {
+    const ts = format === "ts";
+    return `
+import {
+  initPlasmicLoader,${file_utils_1.ifTs(ts, `
+  InitOptions,`)}
+} from "@plasmicapp/loader-gatsby";
+
+export function initPlasmicLoaderWithRegistrations(plasmicOptions${file_utils_1.ifTs(ts, ": InitOptions")}) {
+  const PLASMIC = initPlasmicLoader(plasmicOptions);
+
+  // You can register any code components that you want to use here; see
+  // https://docs.plasmic.app/learn/code-components-ref/
+  // And configure your Plasmic project to use the host url pointing at
+  // the /plasmic-host page of your nextjs app (for example,
+  // http://localhost:8000/plasmic-host).  See
+  // https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+
+  // PLASMIC.registerComponent(...);
+
+  return PLASMIC;
+}
+`.trim();
+};
+exports.makeGatsbyPlasmicInit = makeGatsbyPlasmicInit;
+function wrapAppRootForCodegen() {
+    return `
+import React from "react";
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+
+export const wrapRootElement = ({ element }) => {
+  return (
+    <PlasmicRootProvider>
+      {element}
+    </PlasmicRootProvider>
+  );
+}
+  `;
+}
+exports.wrapAppRootForCodegen = wrapAppRootForCodegen;

package/dist/templates/nextjs.d.ts

@@ -1,3 +1,5 @@
+import { CodeScheme } from "..";
 export declare const makeNextjsInitPage: (projectId: string, projectApiToken: string) => string;
 export declare function makeNextjsCatchallPage(format: "ts" | "js"): string;
-export declare function makeNextjsHostPage(): string;
+export declare function makeNextjsHostPage(scheme: CodeScheme): string;
+export declare function wrapAppRootForCodegen(): string;

package/dist/templates/nextjs.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeNextjsHostPage = exports.makeNextjsCatchallPage = exports.makeNextjsInitPage = void 0;
+exports.wrapAppRootForCodegen = exports.makeNextjsHostPage = exports.makeNextjsCatchallPage = exports.makeNextjsInitPage = void 0;
+const file_utils_1 = require("../utils/file-utils");
 const makeNextjsInitPage = (projectId, projectApiToken) => `
 import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
 
@@ -29,15 +30,12 @@ export const PLASMIC = initPlasmicLoader({
 // PLASMIC.registerComponent(...);
 `.trim();
 exports.makeNextjsInitPage = makeNextjsInitPage;
-function ifTs(ts, str) {
-    return ts ? str : "";
-}
 function makeNextjsCatchallPage(format) {
     const ts = format === "ts";
     return `
 import * as React from "react";
 import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-${ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
+${file_utils_1.ifTs(ts, `import { GetStaticPaths, GetStaticProps } from "next";\n`)}
 import {
   ComponentRenderData,
   PlasmicRootProvider,
@@ -45,7 +43,7 @@ import {
 import Error from "next/error";
 import { PLASMIC } from "../plasmic-init";
 
-export default function PlasmicLoaderPage(props${ifTs(ts, `: {
+export default function PlasmicLoaderPage(props${file_utils_1.ifTs(ts, `: {
   plasmicData?: ComponentRenderData;
 }`)}) {
   const { plasmicData } = props;
@@ -62,7 +60,7 @@ export default function PlasmicLoaderPage(props${ifTs(ts, `: {
   );
 }
 
-export const getStaticProps${ifTs(ts, `: GetStaticProps`)} = async (context) => {
+export const getStaticProps${file_utils_1.ifTs(ts, `: GetStaticProps`)} = async (context) => {
   const { catchall } = context.params ?? {};
   const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? \`/\${catchall.join('/')}\` : '/';
   const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
@@ -80,7 +78,7 @@ export const getStaticProps${ifTs(ts, `: GetStaticProps`)} = async (context) =>
   };
 }
 
-export const getStaticPaths${ifTs(ts, `: GetStaticPaths`)} = async () => {
+export const getStaticPaths${file_utils_1.ifTs(ts, `: GetStaticPaths`)} = async () => {
   const pageModules = await PLASMIC.fetchPages();
   return {
     paths: pageModules.map((mod) => ({
@@ -88,20 +86,27 @@ export const getStaticPaths${ifTs(ts, `: GetStaticPaths`)} = async () => {
         catchall: mod.path.substring(1).split("/"),
       },
     })),
-    fallback: "blocking"
+
+    // Turn on "fallback: 'blocking'" if you would like new paths created
+    // in Plasmic to be automatically available
+    fallback: false,
   };
 }
   `.trim();
 }
 exports.makeNextjsCatchallPage = makeNextjsCatchallPage;
-function makeNextjsHostPage() {
-    return `
+function makeNextjsHostPage(scheme) {
+    const commonImports = `
 import * as React from 'react';
-import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
 import Script from 'next/script';
+  `.trim();
+    if (scheme === "loader") {
+        return `
+${commonImports}
+import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
 import { PLASMIC } from '../plasmic-init';
 
-export default function Host() {
+export default function PlasmicHost() {
   return PLASMIC && (
     <div>
       <Script
@@ -112,6 +117,51 @@ export default function Host() {
     </div>
   );
 }
-  `.trim();
+    `;
+    }
+    else {
+        return `
+${commonImports}
+import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/host';
+
+// You can register any code components that you want to use here; see
+// https://docs.plasmic.app/learn/code-components-ref/
+// And configure your Plasmic project to use the host url pointing at
+// the /plasmic-host page of your nextjs app (for example,
+// http://localhost:3000/plasmic-host).  See
+// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+
+// registerComponent(...)
+
+export default function PlasmicHost() {
+  return (
+    <div>
+      <Script
+        src="https://static1.plasmic.app/preamble.js"
+        strategy="beforeInteractive"
+      />
+      <PlasmicCanvasHost />
+    </div>
+  );
+}
+    `;
+    }
 }
 exports.makeNextjsHostPage = makeNextjsHostPage;
+function wrapAppRootForCodegen() {
+    return `
+import '../styles/globals.css'
+import { PlasmicRootProvider } from "@plasmicapp/react-web";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <PlasmicRootProvider>
+      <Component {...pageProps} />
+    </PlasmicRootProvider>
+  );
+}
+
+export default MyApp
+  `;
+}
+exports.wrapAppRootForCodegen = wrapAppRootForCodegen;

package/dist/utils/file-utils.d.ts

@@ -6,14 +6,6 @@ import { PlatformType } from "../lib";
  */
 export declare function deleteGlob(searchPattern: string, skipPatterns?: string[]): void;
 export declare function stripExtension(filename: string, removeComposedPath?: boolean): string;
-/**
- * create-next-app doesn't create next.config.js,
- * so it's safe to just write the file
- * @param absPath
- * @param projectId
- * @returns
- */
-export declare function writeDefaultNextjsConfig(projectDir: string, projectId: string, loader: boolean, projectApiToken?: string, useTypescript?: boolean): Promise<void>;
 export declare function writePlasmicLoaderJson(projectDir: string, projectId: string, projectApiToken: string): Promise<void>;
 /**
  * - [nextjs|gatsby, loader, '/' page exists] - remove index file
@@ -32,4 +24,4 @@ export declare function overwriteIndex(projectPath: string, platform: string, sc
  */
 export declare function overwriteReadme(projectPath: string, platform: PlatformType, buildCommand: string): Promise<void>;
 export declare function ensureTsconfig(projectPath: string): Promise<void>;
-export declare function wrapAppRoot(projectPath: string, platform: string, scheme: string): Promise<void>;
+export declare function ifTs(ts: boolean, str: string): string;

package/dist/utils/file-utils.js

@@ -31,13 +31,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrapAppRoot = exports.ensureTsconfig = exports.overwriteReadme = exports.overwriteIndex = exports.writePlasmicLoaderJson = exports.writeDefaultNextjsConfig = exports.stripExtension = exports.deleteGlob = void 0;
+exports.ifTs = exports.ensureTsconfig = exports.overwriteReadme = exports.overwriteIndex = exports.writePlasmicLoaderJson = exports.stripExtension = exports.deleteGlob = void 0;
 const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const lodash_1 = __importDefault(require("lodash"));
 const path = __importStar(require("upath"));
 const gatsby_1 = require("../templates/gatsby");
-const nextjs_1 = require("../templates/nextjs");
 const readme_1 = require("../templates/readme");
 const welcomePage_1 = require("../templates/welcomePage");
 const lang_utils_1 = require("./lang-utils");
@@ -64,40 +63,6 @@ function stripExtension(filename, removeComposedPath = false) {
     return filename.substring(0, filename.lastIndexOf(ext));
 }
 exports.stripExtension = stripExtension;
-/**
- * create-next-app doesn't create next.config.js,
- * so it's safe to just write the file
- * @param absPath
- * @param projectId
- * @returns
- */
-function writeDefaultNextjsConfig(projectDir, projectId, loader, projectApiToken, useTypescript) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const nextjsConfigFile = path.join(projectDir, "next.config.js");
-        if (!loader) {
-            yield fs_1.promises.writeFile(nextjsConfigFile, `
-module.exports = {
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  trailingSlash: true,
-  // Your NextJS config.
-};
-  `);
-            return;
-        }
-        if (loader && projectApiToken) {
-            const initFile = path.join(projectDir, `plasmic-init.${useTypescript ? "ts" : "js"}`);
-            yield fs_1.promises.writeFile(initFile, nextjs_1.makeNextjsInitPage(projectId, projectApiToken));
-            const pagesFolder = path.join(projectDir, "pages");
-            const loaderPage = path.join(pagesFolder, `[[...catchall]].${useTypescript ? "tsx" : "jsx"}`);
-            yield fs_1.promises.writeFile(loaderPage, nextjs_1.makeNextjsCatchallPage(useTypescript ? "ts" : "js"));
-            const hostPage = path.join(pagesFolder, `plasmic-host.${useTypescript ? "tsx" : "jsx"}`);
-            yield fs_1.promises.writeFile(hostPage, nextjs_1.makeNextjsHostPage());
-        }
-    });
-}
-exports.writeDefaultNextjsConfig = writeDefaultNextjsConfig;
 function writePlasmicLoaderJson(projectDir, projectId, projectApiToken) {
     return __awaiter(this, void 0, void 0, function* () {
         const plasmicLoaderJson = path.join(projectDir, "plasmic-loader.json");
@@ -283,46 +248,7 @@ function ensureTsconfig(projectPath) {
     });
 }
 exports.ensureTsconfig = ensureTsconfig;
-function wrapAppRoot(projectPath, platform, scheme) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // with create-plasmic-app v2, isLoader=false
-        const isLoader = scheme === "loader";
-        const importPkg = isLoader ? `@plasmicapp/loader` : "@plasmicapp/react-web";
-        if (platform === "nextjs") {
-            const appFilePath = path.join(projectPath, "pages", `_app.js`);
-            yield fs_1.promises.writeFile(appFilePath, `
-import '../styles/globals.css'
-import { PlasmicRootProvider } from "${importPkg}"
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <PlasmicRootProvider>
-      <Component {...pageProps} />
-    </PlasmicRootProvider>
-  )
-}
-
-export default MyApp
-    `.trim());
-        }
-        else if (platform === "gatsby") {
-            const wrapperContent = `
-import React from "react";
-import { PlasmicRootProvider } from "${importPkg}";
-
-export const wrapRootElement = ({ element }) => {
-  return (
-    <PlasmicRootProvider>
-      {element}
-    </PlasmicRootProvider>
-  );
-}
-    `.trim();
-            const browserFilePath = path.join(projectPath, "gatsby-browser.js");
-            yield fs_1.promises.writeFile(browserFilePath, wrapperContent);
-            const ssrFilePath = path.join(projectPath, "gatsby-ssr.js");
-            yield fs_1.promises.writeFile(ssrFilePath, wrapperContent);
-        }
-    });
+function ifTs(ts, str) {
+    return ts ? str : "";
 }
-exports.wrapAppRoot = wrapAppRoot;
+exports.ifTs = ifTs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.33",
+  "version": "0.0.37",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",

package/src/index.ts

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
 import { setMetadataEnv } from "@plasmicapp/cli";
 import * as Sentry from "@sentry/node";
-import chalk from "chalk";
 import * as fs from "fs";
 import inquirer, { DistinctQuestion } from "inquirer";
 import * as path from "upath";
@@ -14,6 +13,8 @@ if (process.env.CPA_DEBUG_CHDIR) {
   process.chdir(process.env.CPA_DEBUG_CHDIR);
 }
 
+export type CodeScheme = "codegen" | "loader";
+
 // Check for updates
 const createPlasmicAppVersion = updateNotify();
 
@@ -155,7 +156,7 @@ async function run(): Promise<void> {
 
   // Scheme to use for Plasmic integration
   // - loader only available for gatsby/next.js
-  const scheme: "codegen" | "loader" =
+  const scheme: CodeScheme =
     platform === "nextjs" || platform === "gatsby"
       ? await maybePrompt({
           name: "scheme",
@@ -179,16 +180,14 @@ async function run(): Promise<void> {
 
   // Get the projectId
   console.log();
-  console.log(chalk.green.bold("Go to this URL and **clone** the project:"));
-  console.log("https://studio.plasmic.app/starters/simple-light");
-  console.log();
-  console.log("  Note the project ID in the URL redirect");
-  console.log("  (e.g. https://studio.plasmic.app/projects/PROJECT_ID)");
   let projectId: string | undefined;
   while (!projectId) {
     const rawProjectId = await maybePrompt({
       name: "projectId",
-      message: "What is the project ID of your project?",
+      message: `What is the URL of your project?
+(If you don't have a project yet, create one by going to
+https://studio.plasmic.app/starters/simple-light):
+`,
     });
     projectId = rawProjectId
       .replace("https://studio.plasmic.app/projects/", "")

package/src/lib.ts

@@ -3,15 +3,8 @@ import chalk from "chalk";
 import * as path from "upath";
 import validateProjectName from "validate-npm-package-name";
 import { getCPAStrategy } from "./strategies";
-import { spawnOrFail } from "./utils/cmd-utils";
-import {
-  ensureTsconfig,
-  overwriteIndex,
-  overwriteReadme,
-  wrapAppRoot,
-  writeDefaultNextjsConfig,
-} from "./utils/file-utils";
-import { detectPackageManager, installUpgrade } from "./utils/npm-utils";
+import { ensureTsconfig, overwriteReadme } from "./utils/file-utils";
+import { detectPackageManager } from "./utils/npm-utils";
 
 export type PlatformType = "nextjs" | "gatsby" | "react";
 export type SchemeType = "codegen" | "loader";
@@ -84,73 +77,55 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     template,
   });
 
-  // Ensure that
-  if (useTypescript) {
+  // Ensure that we have a empty tsconfig and @types packages
+  // Gatsby by default supports typescript handling internally
+  // tsconfig so we don't have to ensure it
+  if (useTypescript && platform !== "gatsby") {
     await ensureTsconfig(resolvedProjectPath);
   }
 
-  // Install dependency
-  banner("INSTALLING THE PLASMIC DEPENDENCY");
-  if (scheme === "codegen") {
-    const installResult = await installUpgrade("@plasmicapp/cli", {
-      workingDir: resolvedProjectPath,
-    });
-    if (!installResult) {
-      throw new Error("Failed to install the Plasmic dependency");
-    }
-  }
-
-  // Trigger a sync
-  const pkgMgr = detectPackageManager(resolvedProjectPath);
-  const npmRunCmd = pkgMgr === "yarn" ? "yarn" : "npm run";
-
-  if (scheme === "codegen") {
-    banner("SYNCING PLASMIC COMPONENTS");
-
-    const project = projectApiToken
-      ? `${projectId}:${projectApiToken}`
-      : projectId;
-
-    if (platform === "nextjs") {
-      await writeDefaultNextjsConfig(resolvedProjectPath, projectId, false);
-    }
-
-    await spawnOrFail(
-      `npx -p @plasmicapp/cli plasmic sync --yes -p ${project}`,
-      resolvedProjectPath
-    );
-  } else if (scheme === "loader") {
-    if (!projectApiToken) {
-      projectApiToken = await getProjectApiToken(projectId);
-    }
+  // Make sure we have an api token for loader
+  if (scheme === "loader" && !projectApiToken) {
+    projectApiToken = await getProjectApiToken(projectId);
     if (!projectApiToken) {
       throw new Error(`Failed to get projectApiToken for ${projectId}`);
     }
-
-    await cpaStrategy.configLoader({
-      projectPath: resolvedProjectPath,
-      projectId,
-      projectApiToken,
-      useTypescript,
-    });
   }
 
-  if (scheme === "loader") {
-    await cpaStrategy.overwriteFiles({ projectPath: resolvedProjectPath });
-  } else if (scheme === "codegen") {
-    // The loader files to be overwritten are handled by cpaStrategy
-    // but for codegen we still have to run it
-
-    // Overwrite the index file
-    await overwriteIndex(resolvedProjectPath, platform, scheme);
+  // Install dependency
+  banner("INSTALLING THE PLASMIC DEPENDENCY");
+  const installResult = await cpaStrategy.installDeps({
+    scheme,
+    projectPath: resolvedProjectPath,
+  });
 
-    // Overwrite the wrapper files to wrap PlasmicRootProvider
-    await wrapAppRoot(resolvedProjectPath, platform, scheme);
+  if (!installResult) {
+    throw new Error("Failed to install the Plasmic dependency");
   }
 
+  // Configure
+  await cpaStrategy.overwriteConfig({
+    projectId,
+    projectPath: resolvedProjectPath,
+    projectApiToken,
+    useTypescript,
+    scheme,
+  });
+
+  // Generate files
+  await cpaStrategy.generateFiles({
+    projectPath: resolvedProjectPath,
+    useTypescript,
+    scheme,
+    projectId,
+    projectApiToken,
+  });
+
   /**
    * INSTRUCT USER ON NEXT STEPS
    */
+  const pkgMgr = detectPackageManager(resolvedProjectPath);
+  const npmRunCmd = pkgMgr === "yarn" ? "yarn" : "npm run";
   const command =
     platform === "nextjs"
       ? `${npmRunCmd} dev`