search

t3-oss / create-t3-turbo

Clean and simple starter repo using the T3 Stack along with Expo React Native
https://turbo.t3.gg
MIT License
4.51k stars 375 forks source link

feat: Add an example/tutorial on how to create more client T3 Next.JS apps that consume the main Next.js backend #444

Open dBianchii opened 1 year ago

dBianchii commented 1 year ago

Describe the feature you'd like to request

As I was using this awesome project, I realized it wasn't so simple for me to add a new client T3 Next.JS application. I was wondering if we could have a tutorial/example featuring how a new T3 app can be added to apps folder with proper API consumption of the main Next.JS app.

Describe the solution you'd like to see

A tutorial OR an implemented example in the apps folder featuring how to add a new client/frontend T3 Next.js application that can consume /api/auth and /api/trpc from the main Next.JS app.

I was trying to do this myself, and kind of managed it to work for consuming the /api/trpc route from the main app. But it wasn't so simple, as I had to enable CORS and also correctly setup getBaseUrl() function to point to the correct endpoint. (Which wasn't a big deal). Right now, I am stuck trying to figure out how to make this second client nextjs app consume the /api/auth endpoint of the main one. Here are some of the things that aren't clear to me:

I understand this might be too much to have in the project, and possibly wouldn't be a good idea to have it configured with the default template. But I was wondering if anyone would like to create such tutorial so that more people could easily add as many T3 projects as they like, all consuming the same backend

Additional information

No response

juliusmarminge commented 1 year ago

I don't have time to make a proper guide right now, if anyone wants to do so feel free, might be good to put in docs as part of #401

For some references, see

ashutosh887 commented 1 year ago

@juliusmarminge @dBianchii I would like to work on this one! Please assign

juliusmarminge commented 1 year ago

@juliusmarminge @dBianchii I would like to work on this one! Please assign

Awesome, feel free to submit a draft PR when you've started to let others know you're working on it. I tend to not assign people since often times it leads to stale issues since someone thinks the issue is being worked on when it might not be :/

ashutosh887 commented 1 year ago

Sure @juliusmarminge How do you want the apps to be? I mean what tutorials do we need actually?

juliusmarminge commented 1 year ago

I mean what tutorials do we need actually?

I think it should be a step by step guide on how to start a new app and set it up to consume the trpc api. (if it's a "browser-based-environment" we could also show how to setup next-auth for it but that's a bit more tricky so we can leave that for a follow up if you want)

Not sure what the OP thinks is necessary?

dBianchii commented 1 year ago

Hi @juliusmarminge, @ashutosh887 I added this when I encountered some friction in being able to implement a new Next.JS app. So, some things that come to mind:

One thing I would find interesting would be to add a new Next.JS app in the template that consumes the main backend one. But I do understand that this involves adding more prolonged maintenance to this repo, and is probably not prefered.

Oh, wanted to add that I had created this image for my project some time ago (to help visualize). Might not be what everyone wants to do, but this is kind of the gist of what I think makes sense, for parts to be able to talk to each other. Leaving it here in case it can be helpful: image

ashutosh887 commented 1 year ago

Let me create a sample application with Next.js 13 from scratch and figure things out if you suggest @juliusmarminge @dBianchii

dBianchii commented 1 year ago

Let me create a sample application with Next.js 13 from scratch and figure things out if you suggest @juliusmarminge @dBianchii

Let me know if I can help with anything. Either through suggestions or getting this set up. I'm very new to open source, so I'm just tagging along and trying things out to see how I go

dBianchii commented 10 months ago

Hi @ashutosh887, do you have a working example of this? I am really struggling to get NextAuth working in another Next.Js client app

DawidWraga commented 9 months ago

any updates on this?

AyoCodess commented 8 months ago

Wouldn’t it make more sense to have an app called “backend” which all the other apps consumed.

peterkibuchi commented 7 months ago

I was trying to do this myself, and kind of managed it to work for consuming the /api/trpc route from the main app. But it wasn't so simple, as I had to enable CORS and also correctly setup getBaseUrl() function to point to the correct endpoint. (Which wasn't a big deal).

Right now, I am stuck trying to figure out how to make this second client nextjs app consume the /api/auth endpoint of the main one.

Hi @dBianchii. You mentioned that you were easily able to get a second NextJS app to consume the tRPC backend being served from the first NextJS app, and was only having trouble getting the auth set up. Would you mind sharing how you did it, or better yet point me to an example repo?

I've been working on a project with a similar setup — 2 separate client NextJS apps, with one supposed to consume the tRPC endpoint served on the other. The docs suggest using trpc-openapi but I ran into a bunch of issues trying to implement that approach.

I'm considering combining them into a single monorepo but I'm not sure how to consume the tRPC endpoint on the second client side app. I'm using clerk so I don't think auth will be an issue.

fe-franco commented 4 days ago

Hi, I'm trying to setup a vite frontend, but when i try to import a component from @acme/ui it doesn't build an throws this error:

Error: The following dependencies are imported but could not be resolved:

  @acme/ui/button

But I the @acme/ui package is in the package.json

Does anyone have some insight on how to fix this?