Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Add instructions for cross subdomain development #1336

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Add instructions for cross subdomain development
robbie-c committed Aug 1, 2024

Unverified

This user has not yet uploaded their public signing key.
commit 7cf5489e3ceb9ba744f196113757cd1b2fe253cb
3 changes: 2 additions & 1 deletion playground/nextjs/.gitignore
Original file line number Diff line number Diff line change
@@ -35,4 +35,5 @@ yarn-error.log*
*.tsbuildinfo
next-env.d.ts
.next/
.yalc
.yalc
certificates
27 changes: 27 additions & 0 deletions playground/nextjs/README.md
Original file line number Diff line number Diff line change
@@ -25,3 +25,30 @@ If you need to provide environment variables, you can do so:
NEXT_PUBLIC_POSTHOG_KEY='<your-local-api-key>' NEXT_PUBLIC_POSTHOG_HOST='http://localhost:8000' pnpm dev
```

### Testing cross-subdomain tracking

We can locally debug the cross-domain behaviour of posthog-js by editing our /etc/hosts file to point some fake
subdomains to localhost. There are a few steps required to do this, these are the instructions for doing this on MacOS
with Chrome:

Add the following to your /etc/host file:
```
127.0.0.1 www.posthog.dev
127.0.0.1 app.posthog.dev
```

To restart your DNS server on MacOS, run:
```bash
sudo killall -HUP mDNSResponder
```

Run this modified command to start the server. It will ask you to for sudo permissions to create a self-signed cert for https.

```bash
NEXT_PUBLIC_POSTHOG_KEY='<your-local-api-key>' NEXT_PUBLIC_POSTHOG_HOST='http://localhost:8000' pnpm dev-crossdomain
```

You can now open the subdomains we added to the host file, but you will likely see a warning about unsafe certificates. To get around this, in Chrome you can type `thisisunsafe` to bypass the warning.
The subdomains are:
* [https://www.posthog.dev:3000](https://www.posthog.dev:3000)
* [https://app.posthog.dev:3000](https://app.posthog.dev:3000)
3 changes: 2 additions & 1 deletion playground/nextjs/package.json
Original file line number Diff line number Diff line change
@@ -4,7 +4,8 @@
"private": true,
"scripts": {
"clean-react": "cd ../../react && rm -rf ./node_modules/",
"dev": "pnpm run link-posthog-js && pnpm run clean-react && next dev",
"dev": "pnpm run link-posthog-js && pnpm run clean-react && next dev --experimental-https",
"dev-crossdomain": "pnpm run link-posthog-js && pnpm run clean-react && NEXT_PUBLIC_CROSSDOMAIN=1 next dev --experimental-https",
"build": "pnpm run build-posthog-js && pnpm run link-posthog-js && pnpm run clean-react && next build",
"start": "next start",
"lint": "next lint",
12 changes: 12 additions & 0 deletions playground/nextjs/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -37,6 +37,18 @@ export default function Home() {
<span>Autocapture a &gt; span</span>
</a>
<a href={'https://www.google.com'}>External link</a>
{isClient && typeof window !== 'undefined' && process.env.NEXT_PUBLIC_CROSSDOMAIN && (
<a
className="Button"
href={
window.location.host === 'www.posthog.dev:3000'
? 'https://app.posthog.dev:3000'
: 'https://www.posthog.dev:3000'
}
>
Change subdomain
</a>
)}

<button className="ph-no-capture">Ignore certain elements</button>