create-plasmic-app 0.0.33 → 0.0.34

package/dist/lib.js

@@ -85,8 +85,10 @@ function create(args) {
             useTypescript,
             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") {
             yield file_utils_1.ensureTsconfig(resolvedProjectPath);
         }
         // Install dependency
@@ -127,7 +129,10 @@ function create(args) {
             });
         }
         if (scheme === "loader") {
-            yield cpaStrategy.overwriteFiles({ projectPath: resolvedProjectPath });
+            yield cpaStrategy.overwriteFiles({
+                projectPath: resolvedProjectPath,
+                useTypescript,
+            });
         }
         else if (scheme === "codegen") {
             // The loader files to be overwritten are handled by cpaStrategy

package/dist/strategies/gatsby.js

@@ -50,13 +50,11 @@ const gatsbyStrategy = {
         const { projectPath, template } = args;
         const createCommand = `npx -p gatsby gatsby new ${projectPath}`;
         const templateArg = template ? ` ${template}` : "";
-        // Default Gatsby starter already supports Typescript
-        // See where we `touch tsconfig.json` later on
         yield cmd_utils_1.spawnOrFail(`${createCommand}${templateArg}`);
     }),
     configLoader: (args) => __awaiter(void 0, void 0, void 0, function* () {
         var e_1, _a;
-        const { projectId, projectPath, projectApiToken } = args;
+        const { projectId, projectPath, projectApiToken, useTypescript } = args;
         const installResult = yield npm_utils_1.installUpgrade("@plasmicapp/loader-gatsby", {
             workingDir: projectPath,
         });
@@ -76,7 +74,7 @@ const gatsbyStrategy = {
                 result += line + "\n";
                 // Prepend PlasmicLoader to list of plugins
                 if (line.includes("plugins:")) {
-                    result += gatsby_1.GATSBY_PLUGIN_CONFIG(projectId, projectApiToken);
+                    result += gatsby_1.GATSBY_PLUGIN_CONFIG(projectId, projectApiToken, useTypescript);
                 }
             }
         }
@@ -92,20 +90,24 @@ const gatsbyStrategy = {
     overwriteFiles: (args) => __awaiter(void 0, void 0, void 0, function* () {
         // in gatsby we can delete all existing pages/components, since all pages are going
         // to be handled by templates/defaultPlasmicPage
-        const { projectPath } = args;
+        const { projectPath, useTypescript } = args;
+        const extension = useTypescript ? "ts" : "js";
         file_utils_1.deleteGlob(path_1.default.join(projectPath, "src/@(pages|components|templates)/*.*"));
         // Create a very basic 404 page - `gatsby build` fails without it.
-        // We've deleted the components that the default 404 page depended
-        // on, so
-        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "src/pages/404.js"), gatsby_1.GATSBY_404);
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/404.js`), gatsby_1.GATSBY_404);
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/plasmic-init.${extension}`), gatsby_1.makeGatsbyPlasmicInit(extension));
+        // Add plasmic-host page
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, `src/pages/plasmic-host.${extension}x`), gatsby_1.makeGatsbyHostPage(extension));
         // Start with an empty gatsby-node.js
         yield fs_1.promises.writeFile(path_1.default.join(projectPath, "gatsby-node.js"), "");
+        // Updates `gatsby-ssr` to include script tag for preamble
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "gatsby-ssr.js"), gatsby_1.GATSBY_SSR_CONFIG);
         const templatesFolder = path_1.default.join(projectPath, "src/templates");
-        const defaultPagePath = path_1.default.join(templatesFolder, "defaultPlasmicPage.js");
+        const defaultPagePath = path_1.default.join(templatesFolder, `defaultPlasmicPage.${extension}x`);
         if (!fs_1.existsSync(templatesFolder)) {
             yield fs_1.promises.mkdir(templatesFolder);
         }
-        yield fs_1.promises.writeFile(defaultPagePath, gatsby_1.GATSBY_DEFAULT_PAGE);
+        yield fs_1.promises.writeFile(defaultPagePath, gatsby_1.makeGatsbyDefaultPage(extension));
     }),
     build: (args) => __awaiter(void 0, void 0, void 0, function* () {
         const { npmRunCmd, projectPath } = args;

package/dist/strategies/types.d.ts

@@ -11,6 +11,7 @@ interface ConfigArgs {
 }
 interface OverwriteFilesArgs {
     projectPath: string;
+    useTypescript: boolean;
 }
 interface BuildArgs {
     projectPath: string;

package/dist/templates/gatsby.d.ts

@@ -1,3 +1,6 @@
-export declare const GATSBY_DEFAULT_PAGE: string;
+export declare const makeGatsbyDefaultPage: (format: "ts" | "js") => string;
 export declare const GATSBY_404: string;
-export declare const GATSBY_PLUGIN_CONFIG: (projectId: string, projectApiToken: string) => string;
+export declare const GATSBY_PLUGIN_CONFIG: (projectId: string, projectApiToken: string, useTypescript: boolean) => string;
+export declare const makeGatsbyHostPage: (format: "ts" | "js") => string;
+export declare const GATSBY_SSR_CONFIG: string;
+export declare const makeGatsbyPlasmicInit: (format: "ts" | "js") => string;

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.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,98 @@ 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 = (format) => {
+    const ts = format === "ts";
+    return `
+import * as React from "react"
+import {
+  PlasmicCanvasHost,${file_utils_1.ifTs(ts, `
+  InitOptions,`)}
+} from "@plasmicapp/loader-gatsby"
+import { graphql } from "gatsby"
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
+
+export const query = graphql\`
+  query {
+    plasmicOptions
+  }
+\`
+
+${file_utils_1.ifTs(ts, `interface HostProps {
+  data: {
+    plasmicOptions: InitOptions;
+  }
+}
+`)}
+export default function Host({ data }${file_utils_1.ifTs(ts, ": HostProps")}) {
+  const { plasmicOptions } = data
+  initPlasmicLoaderWithRegistrations(plasmicOptions)
+  return <PlasmicCanvasHost />
+}
+`.trim();
+};
+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;

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;
+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) => ({

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

@@ -33,3 +33,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,7 +31,7 @@ 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.wrapAppRoot = exports.ensureTsconfig = exports.overwriteReadme = exports.overwriteIndex = exports.writePlasmicLoaderJson = exports.writeDefaultNextjsConfig = exports.stripExtension = exports.deleteGlob = void 0;
 const fs_1 = require("fs");
 const glob_1 = __importDefault(require("glob"));
 const lodash_1 = __importDefault(require("lodash"));
@@ -326,3 +326,7 @@ export const wrapRootElement = ({ element }) => {
     });
 }
 exports.wrapAppRoot = wrapAppRoot;
+function ifTs(ts, str) {
+    return ts ? str : "";
+}
+exports.ifTs = ifTs;

package/package.json

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

package/src/lib.ts

@@ -84,8 +84,10 @@ 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);
   }
 
@@ -136,7 +138,10 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
   }
 
   if (scheme === "loader") {
-    await cpaStrategy.overwriteFiles({ projectPath: resolvedProjectPath });
+    await cpaStrategy.overwriteFiles({
+      projectPath: resolvedProjectPath,
+      useTypescript,
+    });
   } else if (scheme === "codegen") {
     // The loader files to be overwritten are handled by cpaStrategy
     // but for codegen we still have to run it

package/src/strategies/gatsby.ts

@@ -3,8 +3,11 @@ import path from "path";
 import * as readline from "readline";
 import {
   GATSBY_404,
-  GATSBY_DEFAULT_PAGE,
   GATSBY_PLUGIN_CONFIG,
+  GATSBY_SSR_CONFIG,
+  makeGatsbyDefaultPage,
+  makeGatsbyHostPage,
+  makeGatsbyPlasmicInit,
 } from "../templates/gatsby";
 import { spawnOrFail } from "../utils/cmd-utils";
 import { deleteGlob } from "../utils/file-utils";
@@ -17,12 +20,10 @@ const gatsbyStrategy: CPAStrategy = {
     const createCommand = `npx -p gatsby gatsby new ${projectPath}`;
     const templateArg = template ? ` ${template}` : "";
 
-    // Default Gatsby starter already supports Typescript
-    // See where we `touch tsconfig.json` later on
     await spawnOrFail(`${createCommand}${templateArg}`);
   },
   configLoader: async (args) => {
-    const { projectId, projectPath, projectApiToken } = args;
+    const { projectId, projectPath, projectApiToken, useTypescript } = args;
 
     const installResult = await installUpgrade("@plasmicapp/loader-gatsby", {
       workingDir: projectPath,
@@ -43,7 +44,11 @@ const gatsbyStrategy: CPAStrategy = {
       result += line + "\n";
       // Prepend PlasmicLoader to list of plugins
       if (line.includes("plugins:")) {
-        result += GATSBY_PLUGIN_CONFIG(projectId, projectApiToken);
+        result += GATSBY_PLUGIN_CONFIG(
+          projectId,
+          projectApiToken,
+          useTypescript
+        );
       }
     }
     await fs.writeFile(gatsbyConfigFile, result);
@@ -51,25 +56,45 @@ const gatsbyStrategy: CPAStrategy = {
   overwriteFiles: async (args) => {
     // in gatsby we can delete all existing pages/components, since all pages are going
     // to be handled by templates/defaultPlasmicPage
-    const { projectPath } = args;
+    const { projectPath, useTypescript } = args;
+
+    const extension = useTypescript ? "ts" : "js";
 
     deleteGlob(path.join(projectPath, "src/@(pages|components|templates)/*.*"));
 
     // Create a very basic 404 page - `gatsby build` fails without it.
-    // We've deleted the components that the default 404 page depended
-    // on, so
-    await fs.writeFile(path.join(projectPath, "src/pages/404.js"), GATSBY_404);
+    await fs.writeFile(path.join(projectPath, `src/pages/404.js`), GATSBY_404);
+
+    await fs.writeFile(
+      path.join(projectPath, `src/plasmic-init.${extension}`),
+      makeGatsbyPlasmicInit(extension)
+    );
+
+    // Add plasmic-host page
+    await fs.writeFile(
+      path.join(projectPath, `src/pages/plasmic-host.${extension}x`),
+      makeGatsbyHostPage(extension)
+    );
 
     // Start with an empty gatsby-node.js
     await fs.writeFile(path.join(projectPath, "gatsby-node.js"), "");
 
+    // Updates `gatsby-ssr` to include script tag for preamble
+    await fs.writeFile(
+      path.join(projectPath, "gatsby-ssr.js"),
+      GATSBY_SSR_CONFIG
+    );
+
     const templatesFolder = path.join(projectPath, "src/templates");
-    const defaultPagePath = path.join(templatesFolder, "defaultPlasmicPage.js");
+    const defaultPagePath = path.join(
+      templatesFolder,
+      `defaultPlasmicPage.${extension}x`
+    );
 
     if (!existsSync(templatesFolder)) {
       await fs.mkdir(templatesFolder);
     }
-    await fs.writeFile(defaultPagePath, GATSBY_DEFAULT_PAGE);
+    await fs.writeFile(defaultPagePath, makeGatsbyDefaultPage(extension));
   },
   build: async (args) => {
     const { npmRunCmd, projectPath } = args;

package/src/strategies/types.ts

@@ -13,6 +13,7 @@ interface ConfigArgs {
 
 interface OverwriteFilesArgs {
   projectPath: string;
+  useTypescript: boolean;
 }
 
 interface BuildArgs {

package/src/templates/gatsby.ts

@@ -1,12 +1,21 @@
-export const GATSBY_DEFAULT_PAGE = `
+import { ifTs } from "../utils/file-utils";
+
+export const makeGatsbyDefaultPage = (format: "ts" | "js"): string => {
+  const ts = format === "ts";
+  return `
 import React from "react";
 import Helmet from "react-helmet";
 import {
-  initPlasmicLoader,
   PlasmicComponent,
-  PlasmicRootProvider,
+  PlasmicRootProvider,${ifTs(
+    ts,
+    `
+  InitOptions,
+  ComponentRenderData,`
+  )}
 } from "@plasmicapp/loader-gatsby";
 import { graphql } from "gatsby";
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init";
 
 export const query = graphql\`
   query ($path: String) {
@@ -15,7 +24,17 @@ export const query = graphql\`
   }
 \`;
 
-const PlasmicGatsbyPage = ({ data, location }) => {
+${ifTs(
+  ts,
+  `interface PlasmicGatsbyPageProps {
+  data: {
+    plasmicOptions: InitOptions
+    plasmicComponents: ComponentRenderData
+  }
+}
+`
+)}
+const PlasmicGatsbyPage = ({ data }${ifTs(ts, ": PlasmicGatsbyPageProps")}) => {
   const {
     plasmicComponents,
     plasmicOptions,
@@ -24,7 +43,7 @@ const PlasmicGatsbyPage = ({ data, location }) => {
   const pageMetadata = pageMeta.pageMetadata;
   return (
     <PlasmicRootProvider
-      loader={initPlasmicLoader(plasmicOptions)}
+      loader={initPlasmicLoaderWithRegistrations(plasmicOptions)}
       prefetchedData={plasmicComponents}
     >
       <Helmet>
@@ -40,6 +59,7 @@ const PlasmicGatsbyPage = ({ data, location }) => {
 
 export default PlasmicGatsbyPage;
 `.trim();
+};
 
 export const GATSBY_404 = `
 const NotFound = () => {
@@ -50,7 +70,8 @@ export default NotFound;
 
 export const GATSBY_PLUGIN_CONFIG = (
   projectId: string,
-  projectApiToken: string
+  projectApiToken: string,
+  useTypescript: boolean
 ): string => `
 {
   resolve: "@plasmicapp/loader-gatsby",
@@ -61,7 +82,112 @@ export const GATSBY_PLUGIN_CONFIG = (
         token: "${projectApiToken}",
       },
     ], // An array of project ids.
-    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.js"),
+    defaultPlasmicPage: require.resolve("./src/templates/defaultPlasmicPage.${
+      useTypescript ? "tsx" : "jsx"
+    }"),
   },
 },
 `;
+
+export const makeGatsbyHostPage = (format: "ts" | "js"): string => {
+  const ts = format === "ts";
+  return `
+import * as React from "react"
+import {
+  PlasmicCanvasHost,${ifTs(
+    ts,
+    `
+  InitOptions,`
+  )}
+} from "@plasmicapp/loader-gatsby"
+import { graphql } from "gatsby"
+import { initPlasmicLoaderWithRegistrations } from "../plasmic-init"
+
+export const query = graphql\`
+  query {
+    plasmicOptions
+  }
+\`
+
+${ifTs(
+  ts,
+  `interface HostProps {
+  data: {
+    plasmicOptions: InitOptions;
+  }
+}
+`
+)}
+export default function Host({ data }${ifTs(ts, ": HostProps")}) {
+  const { plasmicOptions } = data
+  initPlasmicLoaderWithRegistrations(plasmicOptions)
+  return <PlasmicCanvasHost />
+}
+`.trim();
+};
+
+export const 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();
+
+export const makeGatsbyPlasmicInit = (format: "ts" | "js"): string => {
+  const ts = format === "ts";
+  return `
+import {
+  initPlasmicLoader,${ifTs(
+    ts,
+    `
+  InitOptions,`
+  )}
+} from "@plasmicapp/loader-gatsby";
+
+export function initPlasmicLoaderWithRegistrations(plasmicOptions${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();
+};

package/src/templates/nextjs.ts

@@ -1,3 +1,5 @@
+import { ifTs } from "../utils/file-utils";
+
 export const makeNextjsInitPage = (
   projectId: string,
   projectApiToken: string
@@ -30,10 +32,6 @@ export const PLASMIC = initPlasmicLoader({
 // PLASMIC.registerComponent(...);
 `.trim();
 
-function ifTs(ts: boolean, str: string) {
-  return ts ? str : "";
-}
-
 export function makeNextjsCatchallPage(format: "ts" | "js"): string {
   const ts = format === "ts";
   return `

package/src/utils/file-utils.ts

@@ -384,3 +384,7 @@ export const wrapRootElement = ({ element }) => {
     await fs.writeFile(ssrFilePath, wrapperContent);
   }
 }
+
+export function ifTs(ts: boolean, str: string) {
+  return ts ? str : "";
+}