vercel / platforms

A full-stack Next.js app with multi-tenancy and custom domain support. Built with Next.js App Router and the Vercel Domains API.
https://app.vercel.pub
5.66k stars 745 forks source link

A few issues when running locally #238

Closed umaar closed 1 year ago

umaar commented 1 year ago

This is looking really good! Could you add some clear instructions in the readme for how to get all of this working locally?

Could you add some instructions for how to run this locally? I guess that's what https://vercel.com/guides/nextjs-prisma-postgres is for? Trying to follow along does work! But a few minor notes: Currently seeing this:

 ➜ npx create-next-app --example https://github.com/vercel/platforms vercel-platforms
Need to install the following packages:
  create-next-app@13.4.8
Ok to proceed? (y) y
Creating a new Next.js app in /Users/me/Downloads/vercel-platforms.

Downloading files from repo https://github.com/vercel/platforms. This might take a moment.

Installing packages. This might take a couple of minutes.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: next@13.4.9-canary.1
npm ERR! node_modules/next
npm ERR!   next@"13.4.9-canary.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12.2.5 || ^13" from next-auth@4.22.1
npm ERR! node_modules/next-auth
npm ERR!   next-auth@"4.22.1" from the root project
npm ERR!   peer next-auth@"^4" from @next-auth/prisma-adapter@1.0.7
npm ERR!   node_modules/@next-auth/prisma-adapter
npm ERR!     @next-auth/prisma-adapter@"^1.0.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Aborting installation.
  npm install has failed.

Anyway after installing with --legacy-peer-deps I see some other issues:

 ➜ npx prisma db push
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database

Error: Prisma schema validation - (get-config wasm)
Error code: P1012
error: Environment variable not found: POSTGRES_URL_NON_POOLING.
  -->  schema.prisma:7
   |
 6 |   url = env("POSTGRES_PRISMA_URL") // uses connection pooling
 7 |   directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
   |

Validation Error Count: 1
[Context: getConfig]

Prisma CLI Version : 4.16.2

Also I think some clarity could be made for TEAM_ID_VERCEL= - what if you don't have a team but want to play around with this?

After adding that in, npm run dev -> navigate to http://localhost:3000 but it redirects to: https://vercel.com/blog/platforms-starter-kit. Realise the correct URL should be: http://app.localhost:3000/login

When things are up and running, I can make posts, but get a 404 when I try to view them, etc. at http://my-local-test-site-1.localhost:3000/

perkail commented 1 year ago

You need to run it with --legacy-peer-deps

shashankbhat2 commented 1 year ago

change next:"13.4.9-canary.1" to "next": "13.4.8" for the first error

steven-tey commented 1 year ago

Here's the link to the guide to set this up locally: https://vercel.com/guides/nextjs-multi-tenant-application

(the guide OP linked is not the right one)

Also, good catch about these errors, thank you, will fix them now!

steven-tey commented 1 year ago

Update: #247 should fix the first error!

steven-tey commented 1 year ago

For the second error, you'll need to get the POSTGRES_URL_NON_POOLING from Vercel Postgres and add it to your env file!

Just pushed a commit that updates the .env.example file (and the guide too): https://github.com/vercel/platforms/commit/9120f4716016928632e755147a326f7e5eb07402

Dannydoesdev commented 1 year ago

Hi @steven-tey - I was running through the new platforms guide and wanted to call out that pnpm i --legacy-peer-deps seems to be an invalid flag. At least in my version of pnpm - v8.6.7

I'm new to using pnpm, for some reason pnpm i alone only worked for me once I create ~/.npmrc and added auto-install-peers=true. There are probably other solutions out there but wanted to let you know about the non existent flag in case you need to update the article 😊

image
steven-tey commented 1 year ago

Great catch, thank you @Dannydoesdev! I just updated the guide to stick with pnpm i:

CleanShot 2023-07-10 at 19 19 10

Dannydoesdev commented 1 year ago

Glad to help @steven-tey!

davidmturner commented 1 year ago

Environment variables aren't configured at that point in the guide. So running pnpm dev won't lead to happiness.

octavioamu commented 1 year ago

For those stuck as me running locally this config worked for me

NEXTAUTH_URL=http://app.localhost:3000
NEXT_PUBLIC_ROOT_DOMAIN=localhost

And change L44 on middleware from "localhost:3002" to "localhost:3000"

afrozegithub commented 1 year ago

@octavioamu With this tweak I was able to get the login page of github but when i click "Login with github"... I get the following error:

app.localhost sent an invalid response. ERR_SSL_PROTOCOL_ERROR

Any thoughts?

ragzor commented 1 year ago

this will fix if you set env variable VERCEL to empty i.e process.env.VERCEL=""

ref: stackoverflow

octavioamu commented 1 year ago

@afrozegithub did you used https://github-client-generator.vercel.app/ to generate the github app ?

prodkt commented 1 year ago

app.localhost sent an invalid response. ERR_SSL_PROTOCOL_ERROR

^^^^ Gives same to me. If I try to remove the '1' from env "VERCEL="1"" than when you click the login with GitHub nothing happens just sits on same login screen and that spits out zero console errors to explain. But what seems to be the culprit is the forced HTTPS at the block here, not sure what follows fixing that.

The only sort of error logging I'm able to get might not be helpful and only pops up when in the VSCode terminal -- dev still going -- and in chrome hard refresh throws this in the vscode terminal: [next-auth][error][JWT_SESSION_ERROR] https://next-auth.js.org/errors#jwt_session_error decryption operation failed { message: 'decryption operation failed', stack: 'JWEDecryptionFailed: decryption operation failed\n' +

On all other fronts it appears this doesn't work. Spun up a clean windows VM (I'm on mac)...pulled repo, supplied env, same outcome. app.localhost sent an invalid response. ERR_SSL_PROTOCOL_ERROR because its forcing HTTPS into the url string. I can confirm I have not used https on "http://app.localhost:3000" in either my env or my Github developers app

hegelstad commented 1 year ago

When building locally you need to use .env and not any variants like .env.local or .env.development.local.

Otherwise it will cause an error:

~/github/platforms main !5 ❯ pnpm build

> @ build /Users/nikolai/github/platforms
> prisma generate && prisma db push && next build

Prisma schema loaded from prisma/schema.prisma

✔ Generated Prisma Client (4.16.2 | library) to ./node_modules/.pnpm/@prisma+client@4.16.2_prisma@4.16.2/node_modules/@prisma/client in 81ms
You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database

Error: Prisma schema validation - (get-config wasm)
Error code: P1012
error: Environment variable not found: POSTGRES_URL_NON_POOLING.
  -->  schema.prisma:7
   |
 6 |   url = env("POSTGRES_PRISMA_URL") // uses connection pooling
 7 |   directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
   |

Validation Error Count: 1
[Context: getConfig]

Prisma CLI Version : 4.16.2
 ELIFECYCLE  Command failed with exit code 1.
AfricanRealEstates commented 5 months ago

@hegelstad You are correct ✅️. You should use env when building locally to fix the error.