Usage with TRPC? (Combining with server code)

[pat-mw]

Hi there!

Really pleased to have stumbled on this template, as it has shown me a path forward for integrating more complex features into my site where I was previously considering using Wized or porting my entire application to React using Devlink.

I am a programmer at heart, so whilst Wized is very appealing - I prefer the flexibility that managing my own codebase allows, especially when it comes to integrations with other services.

---- INTRO ----

With NodeJS servers, my approach recently has been to use TRPC. TRPC offers a typescript-safe way of handling requests from client to server. It is part of the T3 Stack for NextJS (create-t3-app) which I have become very familiar with.

Whilst the set up is a little bit of a pain, the end result is a really smooth DX when making requests to my server and parsing the response.

Rather than writing convoluted functions that use fetch/axios, and then parsing JSON and defining my types manually - TRPC abstracts away all the complexities and offers typehinting and server calls with a single line of code.

---- PROBLEM ----

I have set up my TRPC server according to the official documentation, and then set up my vanilla client according to the following guide: https://trpc.io/docs/client/vanilla

However, I am having issues getting this to actually work within the finsweet developer starter boilerplate.

My scripts are correctly registered, and are running as expected within Webflow, but I am getting the following error in the console whenever I make a request using trpc:

The 404 error seems to suggest that the trpc server isn't actually running, despite typehinting working on my client, and no errors in the trpc configurations.

---- CLOSING ----

I would appreciate some guidance on integrating TRPC. Under the hood, it should be no different to fetch requests so I am not sure what I am doing wrong - perhaps there is extra configuration needed to actually set up the server, which I am missing.

I would be happy to share access to my repo if this would help.

Thanks in advance for any guidance you can provide!

Best,
Patrick

[alexiglesias93]

Hey @pat-mw, can you provide a repro?

[pat-mw]

Hey @alexiglesias93

Appreciate your prompt response.

Absolutely, here is my repo:
https://github.com/pat-mw/webflow-farrago

---

TRPC Server can be run using pnpm dev:server (Port: 3333)
Finsweet client can be run using pnmp dev (Port: 3000)

---

Let me know if anything needs clarification.
I'm following the documentation here w.r.t. TRPC vanilla implementation
https://trpc.io/docs/client/vanilla

[pat-mw]

@alexiglesias93

The 'helloWorld' script is the one currently testing a server call using TRPC.

[pat-mw]

Hey @alexiglesias93

I've simplified the TRPC setup following the example here:
https://github.com/trpc/trpc/tree/main/examples/standalone-server

Now, I can verify that the server is running and executing correctly, the 404 error is gone, however I'm still getting the following error when the response is sent to the client:

The only difference between this set up and the one in the above example is the compilation to js step within the finsweet boilerplate (Please see package.json commands for reference)
It seems like there is some syntax error being raised and I'm not really sure why.

---

This simplified example is on my branch 'simple' and BOTH client and server can be run together by executing: pnpm dev

[pat-mw]

@alexiglesias93 Have you had any chance to play around with this?
I'm sure you're busy with many other things and I don't want to distract you but I want to know whether there is any possiblity that this stack is going to work -- I'm hoping to crunch over the next few weeks building new features into our website to launch in the New year and if it's unlikely that TRPC works then this will influence the decisions we make internally.

Thanks in advance for any advice!!

[pat-mw]

Hey @alexiglesias93 Sorry to keep pressing on this.
Final attempt: do you think you or anyone on the Finsweet team will be able to guide me in implementing this?

Thank you.
Pat