Theo's Typesafe Cult•2y ago

Public folder from create-t3-app trpc router?

My google-fu is failing me! Can I access the content in the public folder from the API? I tried referencing it the way I would on the frontend ("/images/file/path.svg") and it doesn't seem to be able to see the files. I know I could append the domain, but I would like to access the files directly rather than over http.

12 Replies

barry•2y ago

You can't as when on the server, it doesn't know the url of itself? If that makes sense. So you have to find out the url of your site and prefix the path with it. Like: On client side, the js has access to your domain, let's just say https://example.vercel.com and therefore doing /lol automatically points to https://example.vercel.com/lol On the server side, it does not have access to https://example.vercel.com and doesn't work like expected

CuriouslyCory•2y ago

I was hoping the public folder would still be available through some direct file pathing, but I guess the whole point is that they're not part of the source package.

barry•2y ago

It would be almost impossible to know the path to that folder since you don't own it (the server) assuming you're using Vercel Also assuming they're even in the same "local system"

CuriouslyCory•2y ago

Guessing I could add something to the bundler to pull them into a src folder or I can maintain a duplicate copy of them internally.

barry•2y ago

Or setup your own cdn

CuriouslyCory•2y ago

I have image files that I need to use in the router and don't want to deal with the bandwidth or time for downloading them each request. Mostly a timing thing since I only have 10seconds of processing time before it hits the timeout wall.

KP•2y ago

maybe u can do something like whats mentioned on the trpc docs to get ur base url

function getBaseUrl() {
  if (typeof window !== "undefined")
    // browser should use relative path
    return "";
  if (process.env.VERCEL_URL)
    // reference for vercel.com
    return `https://${process.env.VERCEL_URL}`;
  if (process.env.RENDER_INTERNAL_HOSTNAME)
    // reference for render.com
    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
  // assume localhost
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

function getBaseUrl() {
  if (typeof window !== "undefined")
    // browser should use relative path
    return "";
  if (process.env.VERCEL_URL)
    // reference for vercel.com
    return `https://${process.env.VERCEL_URL}`;
  if (process.env.RENDER_INTERNAL_HOSTNAME)
    // reference for render.com
    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
  // assume localhost
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

KP•2y ago

taken from https://trpc.io/docs/nextjs#4-create-trpc-hooks

Usage with Next.js | tRPC

Next.js makes it easy for you to build your client and server together in one codebase. tRPC makes it easy to share types between them, ensuring typesafety for your application's data fetching.

CuriouslyCory•2y ago

I definitely could. I just need to find the best way to access them directly instead of via http.

barry•2y ago

Can't that way.

CuriouslyCory•2y ago

const fetchLocalImage = async (fileName: string): Promise<Buffer> => {
  const dirRelativeToPublicFolder = `images/collections/layers/${fileName}`;

  const dir = path.resolve("./public", dirRelativeToPublicFolder);

  const data = await promises.readFile(dir);
  return Buffer.from(data);
};

const fetchLocalImage = async (fileName: string): Promise<Buffer> => {
  const dirRelativeToPublicFolder = `images/collections/layers/${fileName}`;

  const dir = path.resolve("./public", dirRelativeToPublicFolder);

  const data = await promises.readFile(dir);
  return Buffer.from(data);
};

Appears to be working, will test on vercel and report back. Confirmed. Works on Vercel prod as well.

Unknown User•2y ago

Message Not Public

Gaming

Programming

Public folder from create-t3-app trpc router?