@posthog/wizard 0.2.3 → 0.2.5

package/README.md

@@ -1,10 +1,10 @@
-
 <p align="center">
   <img alt="posthoglogo" src="https://user-images.githubusercontent.com/65415371/205059737-c8a4f836-4889-4654-902e-f302b187b6a0.png">
 </p>
 
-> **⚠️ Experimental:** This wizard is still in an experimental phase. 
-> If you have any feedback, please drop an email to **joshua** [at] **posthog** [dot] **com**.
+> **⚠️ Experimental:** This wizard is still in an experimental phase. If you
+> have any feedback, please drop an email to **joshua** [at] **posthog** [dot]
+> **com**.
 
 <h1>PostHog Wizard</h1>
 <h4>The PostHog Wizard helps you quickly add PostHog to your project.</h4>
@@ -17,7 +17,9 @@ To use the wizard, you can run it directly using:
 npx @posthog/wizard
 ```
 
-Currently the wizard can be used for Next.js only. If you have other platforms you would like the wizard to support, please open a [GitHub issue](https://github.com/posthog/wizard/issues)!
+Currently the wizard can be used for Next.js only. If you have other platforms
+you would like the wizard to support, please open a
+[GitHub issue](https://github.com/posthog/wizard/issues)!
 
 # Options
 
@@ -30,5 +32,8 @@ The following CLI arguments are available:
 | `--debug`         | Enable verbose logging                                | boolean | `false`                         |          | `POSTHOG_WIZARD_DEBUG`       |
 | `--integration`   | Choose the integration to setup                       | choices | Select integration during setup | "nextjs" | `POSTHOG_WIZARD_INTEGRATION` |
 | `--force-install` | Force install the SDK NPM package (use with caution!) | boolean | `false`                         |          |                              |
+| `--install-dir`   | Relative path to install in                           | string  | `.`                             |          | `POSTHOG_WIZARD_INSTALL_DIR` |
 
-> Note: A large amount of the scaffolding for this came from the amazing Sentry wizard, which you can find [here](https://github.com/getsentry/sentry-wizard) 💖
+> Note: A large amount of the scaffolding for this came from the amazing Sentry
+> wizard, which you can find [here](https://github.com/getsentry/sentry-wizard)
+> 💖

package/dist/src/lib/constants.d.ts

@@ -13,8 +13,9 @@ export interface Args {
 }
 export declare const DEFAULT_URL = "http://us.posthog.com";
 export declare const ISSUES_URL = "https://github.com/posthog/wizard/issues";
-export declare const INSTALL_DIR: string;
 export declare const CLOUD_URL = "https://us.posthog.com";
 export declare const DEFAULT_HOST_URL = "https://us.i.posthog.com";
+export declare const ANALYTICS_POSTHOG_PUBLIC_PROJECT_WRITE_KEY = "sTMFPsFhdP1Ssg";
+export declare const ANALYTICS_HOST_URL = "https://internal-t.posthog.com";
 export declare const DUMMY_PROJECT_API_KEY = "_YOUR_POSTHOG_PROJECT_API_KEY_";
 export {};

package/dist/src/lib/constants.js

@@ -1,12 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DUMMY_PROJECT_API_KEY = exports.DEFAULT_HOST_URL = exports.CLOUD_URL = exports.INSTALL_DIR = exports.ISSUES_URL = exports.DEFAULT_URL = exports.Integration = void 0;
+exports.DUMMY_PROJECT_API_KEY = exports.ANALYTICS_HOST_URL = exports.ANALYTICS_POSTHOG_PUBLIC_PROJECT_WRITE_KEY = exports.DEFAULT_HOST_URL = exports.CLOUD_URL = exports.ISSUES_URL = exports.DEFAULT_URL = exports.Integration = void 0;
 exports.getIntegrationDescription = getIntegrationDescription;
 exports.getIntegrationChoices = getIntegrationChoices;
-const path_1 = __importDefault(require("path"));
 var Integration;
 (function (Integration) {
     Integration["nextjs"] = "nextjs";
@@ -27,8 +23,9 @@ function getIntegrationChoices() {
 }
 exports.DEFAULT_URL = 'http://us.posthog.com';
 exports.ISSUES_URL = 'https://github.com/posthog/wizard/issues';
-exports.INSTALL_DIR = path_1.default.join(process.cwd(), process.env.POSTHOG_WIZARD_INSTALL_DIR ?? '');
 exports.CLOUD_URL = 'https://us.posthog.com';
 exports.DEFAULT_HOST_URL = 'https://us.i.posthog.com';
+exports.ANALYTICS_POSTHOG_PUBLIC_PROJECT_WRITE_KEY = 'sTMFPsFhdP1Ssg';
+exports.ANALYTICS_HOST_URL = 'https://internal-t.posthog.com';
 exports.DUMMY_PROJECT_API_KEY = '_YOUR_POSTHOG_PROJECT_API_KEY_';
 //# sourceMappingURL=constants.js.map

package/dist/src/lib/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/lib/constants.ts"],"names":[],"mappings":";;;;;;AAMA,8DAOC;AAOD,sDAKC;AAzBD,gDAAwB;AAExB,IAAY,WAEX;AAFD,WAAY,WAAW;IACrB,gCAAiB,CAAA;AACnB,CAAC,EAFW,WAAW,2BAAX,WAAW,QAEtB;AAED,SAAgB,yBAAyB,CAAC,IAAY;IACpD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,WAAW,CAAC,MAAM;YACrB,OAAO,SAAS,CAAC;QACnB;YACE,MAAM,IAAI,KAAK,CAAC,uBAAuB,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC;AACH,CAAC;AAOD,SAAgB,qBAAqB;IACnC,OAAO,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC;QACrD,IAAI,EAAE,yBAAyB,CAAC,IAAI,CAAC;QACrC,KAAK,EAAE,IAAI;KACZ,CAAC,CAAC,CAAC;AACN,CAAC;AAOY,QAAA,WAAW,GAAG,uBAAuB,CAAC;AACtC,QAAA,UAAU,GAAG,0CAA0C,CAAC;AACxD,QAAA,WAAW,GAAG,cAAI,CAAC,IAAI,CAClC,OAAO,CAAC,GAAG,EAAE,EACb,OAAO,CAAC,GAAG,CAAC,0BAA0B,IAAI,EAAE,CAC7C,CAAC;AACW,QAAA,SAAS,GAAG,wBAAwB,CAAC;AACrC,QAAA,gBAAgB,GAAG,0BAA0B,CAAC;AAC9C,QAAA,qBAAqB,GAAG,gCAAgC,CAAC","sourcesContent":["import path from 'path';\n\nexport enum Integration {\n  nextjs = 'nextjs',\n}\n\nexport function getIntegrationDescription(type: string): string {\n  switch (type) {\n    case Integration.nextjs:\n      return 'Next.js';\n    default:\n      throw new Error(`Unknown integration ${type}`);\n  }\n}\n\ntype IntegrationChoice = {\n  name: string;\n  value: string;\n};\n\nexport function getIntegrationChoices(): IntegrationChoice[] {\n  return Object.keys(Integration).map((type: string) => ({\n    name: getIntegrationDescription(type),\n    value: type,\n  }));\n}\n\nexport interface Args {\n  debug: boolean;\n  integration: Integration;\n}\n\nexport const DEFAULT_URL = 'http://us.posthog.com';\nexport const ISSUES_URL = 'https://github.com/posthog/wizard/issues';\nexport const INSTALL_DIR = path.join(\n  process.cwd(),\n  process.env.POSTHOG_WIZARD_INSTALL_DIR ?? '',\n);\nexport const CLOUD_URL = 'https://us.posthog.com';\nexport const DEFAULT_HOST_URL = 'https://us.i.posthog.com';\nexport const DUMMY_PROJECT_API_KEY = '_YOUR_POSTHOG_PROJECT_API_KEY_';\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/lib/constants.ts"],"names":[],"mappings":";;;AAIA,8DAOC;AAOD,sDAKC;AAvBD,IAAY,WAEX;AAFD,WAAY,WAAW;IACrB,gCAAiB,CAAA;AACnB,CAAC,EAFW,WAAW,2BAAX,WAAW,QAEtB;AAED,SAAgB,yBAAyB,CAAC,IAAY;IACpD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,WAAW,CAAC,MAAM;YACrB,OAAO,SAAS,CAAC;QACnB;YACE,MAAM,IAAI,KAAK,CAAC,uBAAuB,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC;AACH,CAAC;AAOD,SAAgB,qBAAqB;IACnC,OAAO,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,EAAE,CAAC,CAAC;QACrD,IAAI,EAAE,yBAAyB,CAAC,IAAI,CAAC;QACrC,KAAK,EAAE,IAAI;KACZ,CAAC,CAAC,CAAC;AACN,CAAC;AAOY,QAAA,WAAW,GAAG,uBAAuB,CAAC;AACtC,QAAA,UAAU,GAAG,0CAA0C,CAAC;AACxD,QAAA,SAAS,GAAG,wBAAwB,CAAC;AACrC,QAAA,gBAAgB,GAAG,0BAA0B,CAAC;AAC9C,QAAA,0CAA0C,GAAG,gBAAgB,CAAC;AAC9D,QAAA,kBAAkB,GAAG,gCAAgC,CAAC;AACtD,QAAA,qBAAqB,GAAG,gCAAgC,CAAC","sourcesContent":["export enum Integration {\n  nextjs = 'nextjs',\n}\n\nexport function getIntegrationDescription(type: string): string {\n  switch (type) {\n    case Integration.nextjs:\n      return 'Next.js';\n    default:\n      throw new Error(`Unknown integration ${type}`);\n  }\n}\n\ntype IntegrationChoice = {\n  name: string;\n  value: string;\n};\n\nexport function getIntegrationChoices(): IntegrationChoice[] {\n  return Object.keys(Integration).map((type: string) => ({\n    name: getIntegrationDescription(type),\n    value: type,\n  }));\n}\n\nexport interface Args {\n  debug: boolean;\n  integration: Integration;\n}\n\nexport const DEFAULT_URL = 'http://us.posthog.com';\nexport const ISSUES_URL = 'https://github.com/posthog/wizard/issues';\nexport const CLOUD_URL = 'https://us.posthog.com';\nexport const DEFAULT_HOST_URL = 'https://us.i.posthog.com';\nexport const ANALYTICS_POSTHOG_PUBLIC_PROJECT_WRITE_KEY = 'sTMFPsFhdP1Ssg';\nexport const ANALYTICS_HOST_URL = 'https://internal-t.posthog.com';\nexport const DUMMY_PROJECT_API_KEY = '_YOUR_POSTHOG_PROJECT_API_KEY_';\n"]}

package/dist/src/nextjs/docs.js

@@ -5,25 +5,26 @@ const utils_1 = require("./utils");
 const getNextjsAppRouterDocs = ({ host, language, }) => {
     return `
 ==============================
-FILE: app/components/PostHogProvider.${language === 'typescript' ? 'tsx' : 'jsx'}
+FILE: PostHogProvider.${language === 'typescript' ? 'tsx' : 'jsx'} (put it somewhere where client files are, like the components folder)
+LOCATION: Wherever other providers are, or the components folder
 ==============================
 Changes:
 - Create a PostHogProvider component that will be imported into the layout file.
 
 Example:
 --------------------------------------------------
-'use client'
+"use client"
 
-import posthog from 'posthog-js'
-import { PostHogProvider as PHProvider, usePostHog } from 'posthog-js/react'
-import { Suspense, useEffect } from 'react'
+import posthog from "posthog-js"
+import { PostHogProvider as PHProvider, usePostHog } from "posthog-js/react"
+import { Suspense, useEffect } from "react"
 import { usePathname, useSearchParams } from "next/navigation"
 
 export function PostHogProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
       api_host: "/ingest",
-      ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+      ui_host: "${(0, utils_1.getUiHostFromHost)(host)}",
       capture_pageview: false, // We capture pageviews manually
       capture_pageleave: true, // Enable pageleave capture
     })
@@ -50,7 +51,7 @@ function PostHogPageView() {
       if (search) {
         url += "?" + search
       }
-      posthog.capture('$pageview', { '$current_url': url })
+      posthog.capture("$pageview", { "$current_url": url })
     }
   }, [pathname, searchParams, posthog])
 
@@ -67,7 +68,8 @@ function SuspendedPostHogPageView() {
 --------------------------------------------------
 
 ==============================
-FILE: app/layout.${language === 'typescript' ? 'tsx' : 'jsx'}
+FILE: layout.${language === 'typescript' ? 'tsx' : 'jsx'}
+LOCATION: Wherever the root layout is
 ==============================
 Changes:
 - Import the PostHogProvider from the providers file and wrap the app in it.
@@ -75,7 +77,7 @@ Changes:
 Example:
 --------------------------------------------------
 // other imports
-import { PostHogProvider } from './components/providers'
+import { PostHogProvider } from "LOCATION_OF_POSTHOG_PROVIDER"
 
 export default function RootLayout({ children }) {
   return (
@@ -93,18 +95,19 @@ export default function RootLayout({ children }) {
 --------------------------------------------------
 
 ==============================
-FILE: app/lib/server/posthog.${language === 'typescript' ? 'ts' : 'js'}
+FILE: posthog.${language === 'typescript' ? 'ts' : 'js'}
+LOCATION: Wherever works best given the project structure
 ==============================
 Changes:
 - Initialize the PostHog Node.js client
 
 Example:
 --------------------------------------------------
-import { PostHog } from 'posthog-node'
+import { PostHog } from "posthog-node"
 
 export default function PostHogClient() {
   const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-    host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    host: "${host}",
     flushAt: 1,
     flushInterval: 0,
   })
@@ -114,6 +117,7 @@ export default function PostHogClient() {
 
 ==============================
 FILE: next.config.{js,ts,mjs,cjs}
+LOCATION: Wherever the root next config is
 ==============================
 Changes:
 - Add rewrites to the Next.js config to support PostHog, if there are existing rewrites, add the PostHog rewrites to them.
@@ -149,7 +153,8 @@ exports.getNextjsAppRouterDocs = getNextjsAppRouterDocs;
 const getNextjsPagesRouterDocs = ({ host, language, }) => {
     return `
 ==============================
-FILE: pages/_app.${language === 'typescript' ? 'tsx' : 'jsx'}
+FILE: _app.${language === 'typescript' ? 'tsx' : 'jsx'}
+LOCATION: Wherever the root _app.${language === 'typescript' ? 'tsx' : 'jsx'} file is
 ==============================
 Changes:
 - Initialize PostHog in _app.js.
@@ -158,25 +163,26 @@ Changes:
 
 Example:
 --------------------------------------------------
-import { useEffect } from 'react'
-import { Router } from 'next/router'
-import posthog from 'posthog-js'
-import { PostHogProvider } from 'posthog-js/react'
+import { useEffect } from "react"
+import { Router } from "next/router"
+import posthog from "posthog-js"
+import { PostHogProvider } from "posthog-js/react"
 
 export default function App({ Component, pageProps }) {
   useEffect(() => {
     posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
-      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
+      api_host: "/ingest",
+      ui_host: "${(0, utils_1.getUiHostFromHost)(host)}",
       loaded: (posthog) => {
-        if (process.env.NODE_ENV === 'development') posthog.debug()
+        if (process.env.NODE_ENV === "development") posthog.debug()
       },
     })
 
-    const handleRouteChange = () => posthog?.capture('$pageview')
-    Router.events.on('routeChangeComplete', handleRouteChange)
+    const handleRouteChange = () => posthog?.capture("$pageview")
+    Router.events.on("routeChangeComplete", handleRouteChange)
 
     return () => {
-      Router.events.off('routeChangeComplete', handleRouteChange)
+      Router.events.off("routeChangeComplete", handleRouteChange)
     }
   }, [])
 
@@ -189,18 +195,19 @@ export default function App({ Component, pageProps }) {
 --------------------------------------------------
 
 ==============================
-FILE: lib/server/posthog.${language === 'typescript' ? 'ts' : 'js'}
+FILE: posthog.${language === 'typescript' ? 'ts' : 'js'}
+LOCATION: Wherever works best given the project structure
 ==============================
 Changes:
 - Initialize the PostHog Node.js client for server-side tracking.
 
 Example:
 --------------------------------------------------
-import { PostHog } from 'posthog-node'
+import { PostHog } from "posthog-node"
 
 export default function PostHogClient() {
   return new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-    host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    host: "${host}",
     flushAt: 1,
     flushInterval: 0,
   })
@@ -209,6 +216,7 @@ export default function PostHogClient() {
 
 ==============================
 FILE: next.config.{js,ts,mjs,cjs}
+LOCATION: Wherever the root next config is
 ==============================
 Changes:
 - Add rewrites to support PostHog tracking.

package/dist/src/nextjs/docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"docs.js","sourceRoot":"","sources":["../../../src/nextjs/docs.ts"],"names":[],"mappings":";;;AAAA,mCAA+C;AAExC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO;;uCAE8B,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KACvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA8De,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;+BA0B7B,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAkC9C,IAAA,4BAAoB,EAAC,IAAI,CAAC;;;;wBAI1B,IAAI;;;;wBAIJ,IAAI;;;;;;;;mDAQuB,CAAC;AACpD,CAAC,CAAC;AArJW,QAAA,sBAAsB,0BAqJjC;AAEK,MAAM,wBAAwB,GAAG,CAAC,EACvC,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO;;mBAEU,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAwCjC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yDA8BT,IAAA,4BAAoB,EACzE,IAAI,CACL;kDAC+C,IAAI;kDACJ,IAAI;;;;;;;;CAQrD,CAAC;AACF,CAAC,CAAC;AA5FW,QAAA,wBAAwB,4BA4FnC","sourcesContent":["import { getAssetHostFromHost } from './utils';\n\nexport const getNextjsAppRouterDocs = ({\n  host,\n  language,\n}: {\n  host: string;\n  language: 'typescript' | 'javascript';\n}) => {\n  return `\n==============================\nFILE: app/components/PostHogProvider.${language === 'typescript' ? 'tsx' : 'jsx'\n    }\n==============================\nChanges:\n- Create a PostHogProvider component that will be imported into the layout file.\n\nExample:\n--------------------------------------------------\n'use client'\n\nimport posthog from 'posthog-js'\nimport { PostHogProvider as PHProvider, usePostHog } from 'posthog-js/react'\nimport { Suspense, useEffect } from 'react'\nimport { usePathname, useSearchParams } from \"next/navigation\"\n\nexport function PostHogProvider({ children }: { children: React.ReactNode }) {\n  useEffect(() => {\n    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n      api_host: \"/ingest\",\n      ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,\n      capture_pageview: false, // We capture pageviews manually\n      capture_pageleave: true, // Enable pageleave capture\n    })\n  }, [])\n\n  return (\n    <PHProvider client={posthog}>\n      <SuspendedPostHogPageView />\n      {children}\n    </PHProvider>\n  )\n}\n\n\nfunction PostHogPageView() {\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const posthog = usePostHog()\n\n  useEffect(() => {\n    if (pathname && posthog) {\n      let url = window.origin + pathname\n      const search = searchParams.toString()\n      if (search) {\n        url += \"?\" + search\n      }\n      posthog.capture('$pageview', { '$current_url': url })\n    }\n  }, [pathname, searchParams, posthog])\n\n  return null\n}\n\nfunction SuspendedPostHogPageView() {\n  return (\n    <Suspense fallback={null}>\n      <PostHogPageView />\n    </Suspense>\n  )\n}\n--------------------------------------------------\n\n==============================\nFILE: app/layout.${language === 'typescript' ? 'tsx' : 'jsx'}\n==============================\nChanges:\n- Import the PostHogProvider from the providers file and wrap the app in it.\n\nExample:\n--------------------------------------------------\n// other imports\nimport { PostHogProvider } from './components/providers'\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <PostHogProvider>\n          {/* other providers */}\n          {children}\n          {/* other providers */}\n        </PostHogProvider>\n      </body>\n    </html>\n  )\n}\n--------------------------------------------------\n\n==============================\nFILE: app/lib/server/posthog.${language === 'typescript' ? 'ts' : 'js'}\n==============================\nChanges:\n- Initialize the PostHog Node.js client\n\nExample:\n--------------------------------------------------\nimport { PostHog } from 'posthog-node'\n\nexport default function PostHogClient() {\n  const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n    host: process.env.NEXT_PUBLIC_POSTHOG_HOST,\n    flushAt: 1,\n    flushInterval: 0,\n  })\n  return posthogClient\n}\n--------------------------------------------------\n\n==============================\nFILE: next.config.{js,ts,mjs,cjs}\n==============================\nChanges:\n- Add rewrites to the Next.js config to support PostHog, if there are existing rewrites, add the PostHog rewrites to them.\n- Add skipTrailingSlashRedirect to the Next.js config to support PostHog trailing slash API requests.\n- This can be of type js, ts, mjs, cjs etc. You should adapt the file according\nExample:\n--------------------------------------------------\nconst nextConfig = {\n  // other config\n  async rewrites() {\n    return [\n      {\n        source: \"/ingest/static/:path*\",\n        destination: \"${getAssetHostFromHost(host)}/static/:path*\",\n      },\n      {\n        source: \"/ingest/:path*\",\n        destination: \"${host}/:path*\",\n      },\n      {\n        source: \"/ingest/decide\",\n        destination: \"${host}/decide\",\n      },\n    ];\n  },\n  // This is required to support PostHog trailing slash API requests\n  skipTrailingSlashRedirect: true,\n}\nmodule.exports = nextConfig\n--------------------------------------------------`;\n};\n\nexport const getNextjsPagesRouterDocs = ({\n  host,\n  language,\n}: {\n  host: string;\n  language: 'typescript' | 'javascript';\n}) => {\n  return `\n==============================\nFILE: pages/_app.${language === 'typescript' ? 'tsx' : 'jsx'}\n==============================\nChanges:\n- Initialize PostHog in _app.js.\n- Wrap the application in PostHogProvider.\n- Manually capture $pageview events.\n\nExample:\n--------------------------------------------------\nimport { useEffect } from 'react'\nimport { Router } from 'next/router'\nimport posthog from 'posthog-js'\nimport { PostHogProvider } from 'posthog-js/react'\n\nexport default function App({ Component, pageProps }) {\n  useEffect(() => {\n    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {\n      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',\n      loaded: (posthog) => {\n        if (process.env.NODE_ENV === 'development') posthog.debug()\n      },\n    })\n\n    const handleRouteChange = () => posthog?.capture('$pageview')\n    Router.events.on('routeChangeComplete', handleRouteChange)\n\n    return () => {\n      Router.events.off('routeChangeComplete', handleRouteChange)\n    }\n  }, [])\n\n  return (\n    <PostHogProvider client={posthog}>\n      <Component {...pageProps} />\n    </PostHogProvider>\n  )\n}\n--------------------------------------------------\n\n==============================\nFILE: lib/server/posthog.${language === 'typescript' ? 'ts' : 'js'}\n==============================\nChanges:\n- Initialize the PostHog Node.js client for server-side tracking.\n\nExample:\n--------------------------------------------------\nimport { PostHog } from 'posthog-node'\n\nexport default function PostHogClient() {\n  return new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n    host: process.env.NEXT_PUBLIC_POSTHOG_HOST,\n    flushAt: 1,\n    flushInterval: 0,\n  })\n}\n--------------------------------------------------\n\n==============================\nFILE: next.config.{js,ts,mjs,cjs}\n==============================\nChanges:\n- Add rewrites to support PostHog tracking.\n- Enable support for PostHog API trailing slash requests.\n\nExample:\n--------------------------------------------------\nconst nextConfig = {\n  async rewrites() {\n    return [\n      { source: \"/ingest/static/:path*\", destination: \"${getAssetHostFromHost(\n    host,\n  )}/static/:path*\" },\n      { source: \"/ingest/:path*\", destination: \"${host}/:path*\" },\n      { source: \"/ingest/decide\", destination: \"${host}/decide\" },\n    ]\n  },\n  skipTrailingSlashRedirect: true,\n}\n\nmodule.exports = nextConfig\n--------------------------------------------------\n`;\n};\n"]}
+{"version":3,"file":"docs.js","sourceRoot":"","sources":["../../../src/nextjs/docs.ts"],"names":[],"mappings":";;;AAAA,mCAAkE;AAE3D,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO;;wBAGL,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KACtC;;;;;;;;;;;;;;;;;;;kBAmBgB,IAAA,yBAAiB,EAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA4C1B,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA2BxC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;;;;;;;;;;;;aAY1C,IAAI;;;;;;;;;;;;;;;;;;;;;;;;wBAwBO,IAAA,4BAAoB,EAAC,IAAI,CAAC;;;;wBAI1B,IAAI;;;;wBAIJ,IAAI;;;;;;;;mDAQuB,CAAC;AACpD,CAAC,CAAC;AA1JW,QAAA,sBAAsB,0BA0JjC;AAEK,MAAM,wBAAwB,GAAG,CAAC,EACvC,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,OAAO;;aAEI,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;mCAElD,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KACtC;;;;;;;;;;;;;;;;;;kBAkBgB,IAAA,yBAAiB,EAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;gBAuBzB,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;;;;;;;;;;;;aAY1C,IAAI;;;;;;;;;;;;;;;;;;;;yDAoBwC,IAAA,4BAAoB,EACrE,IAAI,CACL;kDAC2C,IAAI;kDACJ,IAAI;;;;;;;;CAQrD,CAAC;AACF,CAAC,CAAC;AAlGW,QAAA,wBAAwB,4BAkGnC","sourcesContent":["import { getAssetHostFromHost, getUiHostFromHost } from './utils';\n\nexport const getNextjsAppRouterDocs = ({\n  host,\n  language,\n}: {\n  host: string;\n  language: 'typescript' | 'javascript';\n}) => {\n  return `\n==============================\nFILE: PostHogProvider.${\n    language === 'typescript' ? 'tsx' : 'jsx'\n  } (put it somewhere where client files are, like the components folder)\nLOCATION: Wherever other providers are, or the components folder\n==============================\nChanges:\n- Create a PostHogProvider component that will be imported into the layout file.\n\nExample:\n--------------------------------------------------\n\"use client\"\n\nimport posthog from \"posthog-js\"\nimport { PostHogProvider as PHProvider, usePostHog } from \"posthog-js/react\"\nimport { Suspense, useEffect } from \"react\"\nimport { usePathname, useSearchParams } from \"next/navigation\"\n\nexport function PostHogProvider({ children }: { children: React.ReactNode }) {\n  useEffect(() => {\n    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n      api_host: \"/ingest\",\n      ui_host: \"${getUiHostFromHost(host)}\",\n      capture_pageview: false, // We capture pageviews manually\n      capture_pageleave: true, // Enable pageleave capture\n    })\n  }, [])\n\n  return (\n    <PHProvider client={posthog}>\n      <SuspendedPostHogPageView />\n      {children}\n    </PHProvider>\n  )\n}\n\n\nfunction PostHogPageView() {\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const posthog = usePostHog()\n\n  useEffect(() => {\n    if (pathname && posthog) {\n      let url = window.origin + pathname\n      const search = searchParams.toString()\n      if (search) {\n        url += \"?\" + search\n      }\n      posthog.capture(\"$pageview\", { \"$current_url\": url })\n    }\n  }, [pathname, searchParams, posthog])\n\n  return null\n}\n\nfunction SuspendedPostHogPageView() {\n  return (\n    <Suspense fallback={null}>\n      <PostHogPageView />\n    </Suspense>\n  )\n}\n--------------------------------------------------\n\n==============================\nFILE: layout.${language === 'typescript' ? 'tsx' : 'jsx'}\nLOCATION: Wherever the root layout is\n==============================\nChanges:\n- Import the PostHogProvider from the providers file and wrap the app in it.\n\nExample:\n--------------------------------------------------\n// other imports\nimport { PostHogProvider } from \"LOCATION_OF_POSTHOG_PROVIDER\"\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <PostHogProvider>\n          {/* other providers */}\n          {children}\n          {/* other providers */}\n        </PostHogProvider>\n      </body>\n    </html>\n  )\n}\n--------------------------------------------------\n\n==============================\nFILE: posthog.${language === 'typescript' ? 'ts' : 'js'}\nLOCATION: Wherever works best given the project structure\n==============================\nChanges:\n- Initialize the PostHog Node.js client\n\nExample:\n--------------------------------------------------\nimport { PostHog } from \"posthog-node\"\n\nexport default function PostHogClient() {\n  const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n    host: \"${host}\",\n    flushAt: 1,\n    flushInterval: 0,\n  })\n  return posthogClient\n}\n--------------------------------------------------\n\n==============================\nFILE: next.config.{js,ts,mjs,cjs}\nLOCATION: Wherever the root next config is\n==============================\nChanges:\n- Add rewrites to the Next.js config to support PostHog, if there are existing rewrites, add the PostHog rewrites to them.\n- Add skipTrailingSlashRedirect to the Next.js config to support PostHog trailing slash API requests.\n- This can be of type js, ts, mjs, cjs etc. You should adapt the file according\nExample:\n--------------------------------------------------\nconst nextConfig = {\n  // other config\n  async rewrites() {\n    return [\n      {\n        source: \"/ingest/static/:path*\",\n        destination: \"${getAssetHostFromHost(host)}/static/:path*\",\n      },\n      {\n        source: \"/ingest/:path*\",\n        destination: \"${host}/:path*\",\n      },\n      {\n        source: \"/ingest/decide\",\n        destination: \"${host}/decide\",\n      },\n    ];\n  },\n  // This is required to support PostHog trailing slash API requests\n  skipTrailingSlashRedirect: true,\n}\nmodule.exports = nextConfig\n--------------------------------------------------`;\n};\n\nexport const getNextjsPagesRouterDocs = ({\n  host,\n  language,\n}: {\n  host: string;\n  language: 'typescript' | 'javascript';\n}) => {\n  return `\n==============================\nFILE: _app.${language === 'typescript' ? 'tsx' : 'jsx'}\nLOCATION: Wherever the root _app.${\n    language === 'typescript' ? 'tsx' : 'jsx'\n  } file is\n==============================\nChanges:\n- Initialize PostHog in _app.js.\n- Wrap the application in PostHogProvider.\n- Manually capture $pageview events.\n\nExample:\n--------------------------------------------------\nimport { useEffect } from \"react\"\nimport { Router } from \"next/router\"\nimport posthog from \"posthog-js\"\nimport { PostHogProvider } from \"posthog-js/react\"\n\nexport default function App({ Component, pageProps }) {\n  useEffect(() => {\n    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {\n      api_host: \"/ingest\",\n      ui_host: \"${getUiHostFromHost(host)}\",\n      loaded: (posthog) => {\n        if (process.env.NODE_ENV === \"development\") posthog.debug()\n      },\n    })\n\n    const handleRouteChange = () => posthog?.capture(\"$pageview\")\n    Router.events.on(\"routeChangeComplete\", handleRouteChange)\n\n    return () => {\n      Router.events.off(\"routeChangeComplete\", handleRouteChange)\n    }\n  }, [])\n\n  return (\n    <PostHogProvider client={posthog}>\n      <Component {...pageProps} />\n    </PostHogProvider>\n  )\n}\n--------------------------------------------------\n\n==============================\nFILE: posthog.${language === 'typescript' ? 'ts' : 'js'}\nLOCATION: Wherever works best given the project structure\n==============================\nChanges:\n- Initialize the PostHog Node.js client for server-side tracking.\n\nExample:\n--------------------------------------------------\nimport { PostHog } from \"posthog-node\"\n\nexport default function PostHogClient() {\n  return new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {\n    host: \"${host}\",\n    flushAt: 1,\n    flushInterval: 0,\n  })\n}\n--------------------------------------------------\n\n==============================\nFILE: next.config.{js,ts,mjs,cjs}\nLOCATION: Wherever the root next config is\n==============================\nChanges:\n- Add rewrites to support PostHog tracking.\n- Enable support for PostHog API trailing slash requests.\n\nExample:\n--------------------------------------------------\nconst nextConfig = {\n  async rewrites() {\n    return [\n      { source: \"/ingest/static/:path*\", destination: \"${getAssetHostFromHost(\n        host,\n      )}/static/:path*\" },\n      { source: \"/ingest/:path*\", destination: \"${host}/:path*\" },\n      { source: \"/ingest/decide\", destination: \"${host}/decide\" },\n    ]\n  },\n  skipTrailingSlashRedirect: true,\n}\n\nmodule.exports = nextConfig\n--------------------------------------------------\n`;\n};\n"]}

package/dist/src/nextjs/nextjs-wizard.d.ts

@@ -1,9 +1,9 @@
 import type { WizardOptions } from '../utils/types';
 import { Integration } from '../lib/constants';
 export declare function runNextjsWizard(options: WizardOptions): Promise<void>;
-export declare function detectNextJs(): Promise<Integration.nextjs | undefined>;
-export declare function addOrUpdateEnvironmentVariables({ projectApiKey, host, }: {
+export declare function detectNextJs(options: Pick<WizardOptions, 'installDir'>): Promise<Integration.nextjs | undefined>;
+export declare function addOrUpdateEnvironmentVariables({ projectApiKey, installDir, }: {
     projectApiKey: string;
-    host: string;
+    installDir: string;
 }): Promise<void>;
-export declare function getDotGitignore(): string | undefined;
+export declare function getDotGitignore({ installDir, }: Pick<WizardOptions, 'installDir'>): string | undefined;

package/dist/src/nextjs/nextjs-wizard.js

@@ -57,30 +57,31 @@ const constants_1 = require("../lib/constants");
 const docs_1 = require("./docs");
 const analytics_1 = require("../utils/analytics");
 async function runNextjsWizard(options) {
-    const { telemetryEnabled, forceInstall } = options;
+    const { forceInstall } = options;
     (0, clack_utils_1.printWelcome)({
         wizardName: 'PostHog Next.js Wizard',
-        telemetryEnabled,
     });
     const aiConsent = await askForAIConsent();
     if (!aiConsent) {
         await (0, clack_utils_1.abort)('The Next.js wizard requires AI to get setup right now. Please view the docs to setup Next.js manually instead: https://posthog.com/docs/libraries/next-js', 0);
     }
-    const typeScriptDetected = (0, clack_utils_1.isUsingTypeScript)();
+    const typeScriptDetected = (0, clack_utils_1.isUsingTypeScript)(options);
     await (0, clack_utils_1.confirmContinueIfNoOrDirtyGitRepo)();
-    const packageJson = await (0, clack_utils_1.getPackageDotJson)();
+    const packageJson = await (0, clack_utils_1.getPackageDotJson)(options);
     await (0, clack_utils_1.ensurePackageIsInstalled)(packageJson, 'next', 'Next.js');
     const nextVersion = (0, package_json_1.getPackageVersion)('next', packageJson);
-    analytics_1.Analytics.setTag('nextjs-version', (0, utils_1.getNextJsVersionBucket)(nextVersion));
+    analytics_1.analytics.setTag('nextjs-version', (0, utils_1.getNextJsVersionBucket)(nextVersion));
     const { projectApiKey, wizardHash, host } = await (0, clack_utils_1.getOrAskForProjectData)(options);
     const sdkAlreadyInstalled = (0, package_json_1.hasPackageInstalled)('posthog-js', packageJson);
-    analytics_1.Analytics.setTag('sdk-already-installed', sdkAlreadyInstalled);
+    analytics_1.analytics.setTag('sdk-already-installed', sdkAlreadyInstalled);
     const { packageManager: packageManagerFromInstallStep } = await (0, clack_utils_1.installPackage)({
         packageName: 'posthog-js',
         packageNameDisplayLabel: 'posthog-js',
         alreadyInstalled: !!packageJson?.dependencies?.['posthog-js'],
         forceInstall,
         askBeforeUpdating: false,
+        installDir: options.installDir,
+        integration: constants_1.Integration.nextjs,
     });
     await (0, clack_utils_1.installPackage)({
         packageName: 'posthog-node',
@@ -89,9 +90,16 @@ async function runNextjsWizard(options) {
         alreadyInstalled: !!packageJson?.dependencies?.['posthog-node'],
         forceInstall,
         askBeforeUpdating: false,
+        installDir: options.installDir,
+        integration: constants_1.Integration.nextjs,
+    });
+    const router = await (0, utils_1.getNextJsRouter)(options);
+    const relevantFiles = await getRelevantFilesForNextJs(options);
+    analytics_1.analytics.capture('wizard interaction', {
+        action: 'detected relevant files',
+        integration: constants_1.Integration.nextjs,
+        number_of_files: relevantFiles.length,
     });
-    const router = await (0, utils_1.getNextJsRouter)();
-    const relevantFiles = await getRelevantFilesForNextJs();
     const installationDocumentation = getInstallationDocumentation({
         router,
         host,
@@ -103,13 +111,23 @@ async function runNextjsWizard(options) {
         installationDocumentation,
         wizardHash,
     });
+    analytics_1.analytics.capture('wizard interaction', {
+        action: 'detected files to change',
+        integration: constants_1.Integration.nextjs,
+        files: filesToChange,
+    });
     const changes = [];
     for (const filePath of filesToChange) {
         const fileChangeSpinner = clack_1.default.spinner();
+        analytics_1.analytics.capture('wizard interaction', {
+            action: 'processing file',
+            integration: constants_1.Integration.nextjs,
+            file: filePath,
+        });
         try {
             let oldContent = undefined;
             try {
-                oldContent = await fs.promises.readFile(path_1.default.join(constants_1.INSTALL_DIR, filePath), 'utf8');
+                oldContent = await fs.promises.readFile(path_1.default.join(options.installDir, filePath), 'utf8');
             }
             catch (readError) {
                 if (readError.code !== 'ENOENT') {
@@ -128,10 +146,15 @@ async function runNextjsWizard(options) {
                 wizardHash,
             });
             if (newContent !== oldContent) {
-                await updateFile({ filePath, oldContent, newContent });
+                await updateFile({ filePath, oldContent, newContent }, options);
                 changes.push({ filePath, oldContent, newContent });
             }
             fileChangeSpinner.stop(`${oldContent ? 'Updated' : 'Created'} file ${filePath}`);
+            analytics_1.analytics.capture('wizard interaction', {
+                action: 'processed file',
+                integration: constants_1.Integration.nextjs,
+                file: filePath,
+            });
         }
         catch (error) {
             await (0, clack_utils_1.abort)(`Error processing file ${filePath}`);
@@ -139,16 +162,24 @@ async function runNextjsWizard(options) {
     }
     await addOrUpdateEnvironmentVariables({
         projectApiKey,
-        host,
+        installDir: options.installDir,
+    });
+    analytics_1.analytics.capture('wizard interaction', {
+        action: 'added environment variables',
+        integration: constants_1.Integration.nextjs,
+    });
+    const packageManagerForOutro = packageManagerFromInstallStep ?? (await (0, clack_utils_1.getPackageManager)(options));
+    await (0, clack_utils_1.runPrettierIfInstalled)({
+        installDir: options.installDir,
+        integration: constants_1.Integration.nextjs,
     });
-    const packageManagerForOutro = packageManagerFromInstallStep ?? (await (0, clack_utils_1.getPackageManager)());
-    await (0, clack_utils_1.runPrettierIfInstalled)();
     clack_1.default.outro(`
 ${chalk_1.default.green('Successfully installed PostHog!')} ${`\n\n${aiConsent
         ? `Note: This uses experimental AI to setup your project. It might have got it wrong, pleaes check!\n`
         : ``}You should validate your setup by (re)starting your dev environment (e.g. ${chalk_1.default.cyan(`${packageManagerForOutro.runScriptCommand} dev`)})`}
 
 ${chalk_1.default.dim(`If you encounter any issues, let us know here: ${constants_1.ISSUES_URL}`)}`);
+    await analytics_1.analytics.shutdown('success');
 }
 async function askForAIConsent() {
     return await (0, telemetry_1.traceStep)('ask-for-ai-consent', async () => {
@@ -171,7 +202,7 @@ async function askForAIConsent() {
         return aiConsent;
     });
 }
-async function getRelevantFilesForNextJs() {
+async function getRelevantFilesForNextJs({ installDir, }) {
     const filterPatterns = ['**/*.{tsx,ts,jsx,js,mjs,cjs}'];
     const ignorePatterns = [
         'node_modules',
@@ -182,13 +213,13 @@ async function getRelevantFilesForNextJs() {
         'next-env.d.*',
     ];
     const filteredFiles = await (0, fast_glob_1.default)(filterPatterns, {
-        cwd: constants_1.INSTALL_DIR,
+        cwd: installDir,
         ignore: ignorePatterns,
     });
     return filteredFiles;
 }
-async function detectNextJs() {
-    const packageJson = await (0, clack_utils_1.getPackageDotJson)();
+async function detectNextJs(options) {
+    const packageJson = await (0, clack_utils_1.getPackageDotJson)(options);
     const hasNextInstalled = (0, package_json_1.hasPackageInstalled)('next', packageJson);
     if (hasNextInstalled)
         return constants_1.Integration.nextjs;
@@ -238,32 +269,38 @@ async function generateFileChanges({ filePath, content, changedFiles, unchangedF
     });
     return response.newContent;
 }
-async function updateFile(change) {
-    const dir = path_1.default.dirname(path_1.default.join(constants_1.INSTALL_DIR, change.filePath));
+async function updateFile(change, { installDir }) {
+    const dir = path_1.default.dirname(path_1.default.join(installDir, change.filePath));
     await fs.promises.mkdir(dir, { recursive: true });
-    await fs.promises.writeFile(path_1.default.join(constants_1.INSTALL_DIR, change.filePath), change.newContent);
+    await fs.promises.writeFile(path_1.default.join(installDir, change.filePath), change.newContent);
 }
-async function addOrUpdateEnvironmentVariables({ projectApiKey, host, }) {
-    const envVarContent = `# Posthog\nNEXT_PUBLIC_POSTHOG_KEY=${projectApiKey}\nNEXT_PUBLIC_POSTHOG_HOST=${host}\n`;
-    const dotEnvLocalFilePath = path_1.default.join(constants_1.INSTALL_DIR, '.env.local');
-    const dotEnvFilePath = path_1.default.join(constants_1.INSTALL_DIR, '.env');
+async function addOrUpdateEnvironmentVariables({ projectApiKey, installDir, }) {
+    const envVarContent = `# Posthog\nNEXT_PUBLIC_POSTHOG_KEY=${projectApiKey}`;
+    const dotEnvLocalFilePath = path_1.default.join(installDir, '.env.local');
+    const dotEnvFilePath = path_1.default.join(installDir, '.env');
     const targetEnvFilePath = fs.existsSync(dotEnvLocalFilePath)
         ? dotEnvLocalFilePath
         : dotEnvFilePath;
     const dotEnvFileExists = fs.existsSync(targetEnvFilePath);
-    const relativeEnvFilePath = path_1.default.relative(constants_1.INSTALL_DIR, targetEnvFilePath);
+    const relativeEnvFilePath = path_1.default.relative(installDir, targetEnvFilePath);
     if (dotEnvFileExists) {
         const dotEnvFileContent = fs.readFileSync(targetEnvFilePath, 'utf8');
         const hasProjectApiKey = dotEnvFileContent.includes(`NEXT_PUBLIC_POSTHOG_KEY=${projectApiKey}`);
-        const hasHost = dotEnvFileContent.includes(`NEXT_PUBLIC_POSTHOG_HOST=${host}`);
-        if (hasProjectApiKey && hasHost) {
+        if (hasProjectApiKey) {
             clack_1.default.log.success(`${chalk_1.default.bold.cyan(relativeEnvFilePath)} already has the necessary environment variables.`);
         }
         else {
             try {
-                const newContent = dotEnvFileContent
-                    .replace(/^NEXT_PUBLIC_POSTHOG_KEY=.*$/m, `NEXT_PUBLIC_POSTHOG_KEY=${projectApiKey}`)
-                    .replace(/^NEXT_PUBLIC_POSTHOG_HOST=.*$/m, `NEXT_PUBLIC_POSTHOG_HOST=${host}`);
+                let newContent = dotEnvFileContent;
+                if (dotEnvFileContent.match(/^NEXT_PUBLIC_POSTHOG_KEY=.*$/m)) {
+                    newContent = dotEnvFileContent.replace(/^NEXT_PUBLIC_POSTHOG_KEY=.*$/m, `NEXT_PUBLIC_POSTHOG_KEY=${projectApiKey}`);
+                }
+                else {
+                    if (!dotEnvFileContent.endsWith('\n')) {
+                        newContent += '\n';
+                    }
+                    newContent += envVarContent;
+                }
                 await fs.promises.writeFile(targetEnvFilePath, newContent, {
                     encoding: 'utf8',
                     flag: 'w',
@@ -287,7 +324,7 @@ async function addOrUpdateEnvironmentVariables({ projectApiKey, host, }) {
             clack_1.default.log.warning(`Failed to create ${chalk_1.default.bold.cyan(relativeEnvFilePath)} with environment variables for PostHog. Please add them manually. Error: ${error.message}`);
         }
     }
-    const gitignorePath = getDotGitignore();
+    const gitignorePath = getDotGitignore({ installDir });
     if (gitignorePath) {
         const gitignoreContent = fs.readFileSync(gitignorePath, 'utf8');
         const envFiles = ['.env', '.env.local'];
@@ -309,7 +346,7 @@ async function addOrUpdateEnvironmentVariables({ projectApiKey, host, }) {
     else {
         try {
             const newGitignoreContent = `.env\n.env.local\n`;
-            await fs.promises.writeFile(path_1.default.join(constants_1.INSTALL_DIR, '.gitignore'), newGitignoreContent, {
+            await fs.promises.writeFile(path_1.default.join(installDir, '.gitignore'), newGitignoreContent, {
                 encoding: 'utf8',
                 flag: 'w',
             });
@@ -320,8 +357,8 @@ async function addOrUpdateEnvironmentVariables({ projectApiKey, host, }) {
         }
     }
 }
-function getDotGitignore() {
-    const gitignorePath = path_1.default.join(constants_1.INSTALL_DIR, '.gitignore');
+function getDotGitignore({ installDir, }) {
+    const gitignorePath = path_1.default.join(installDir, '.gitignore');
     const gitignoreExists = fs.existsSync(gitignorePath);
     if (gitignoreExists) {
         return gitignorePath;