T
TanStack•5mo ago
like-gold

How do I properly configure for Offline PWA and no SSR default?

Does Tanstack Start support offline use? I would like for the app to load all the client code at first load, don't need SSR, but would like to retain Start's other features. Extra detail: I have an app that I'm wanting to convert that uses Replicache for offline functionality for some pages. Basically, the app needs to work offline for those select routes, but the others can just use cached data or route to an "You're offline page". I have no need for SSR, outside of potentially for our auth (BetterAuth). The app needs to be installable so the user can start it while offline and use the offline portions of the app.
4 Replies
other-emerald
other-emerald•5mo ago
what features of start are you looking for? just use a separate server and just tanstack router (without start) start isnt nextjs ecosystem. its just router with built in ssr + api routes
like-gold
like-goldOP•5mo ago
I was thinking about this very thing. The biggest thing we’d lose is the server functions. I suppose we could just move to something like tRPC instead. There’s another app I work on that would benefit from having SSR and Offline, but I think that could just be done with a lazy cache in a service worker. We really like the convenience of server functions. I don’t have experience with many other options outside of GraphQL, which is over kill for private RPC/API in my opinion.
secure-lavender
secure-lavender•5mo ago
What do you mean by offline mode? Like PWA? What type of features do you wish to work in a disabled network, or let's say, poor internet connections? PWA has some limitations, especially if you use a server to run some functions or render your pages.
like-gold
like-goldOP•5mo ago
Yeah, a core app feature needs to be that some of the forms are available offline and sync when online. I'm using replicache for that.
I wish there was an easy way to attach the API server (oRPC in my case) to the dev server. One nice thing about Start is that both sides easily fit in the same project... I'm having some minor issues trying to configure it. I know I can proxy an API server... but seems like something as simple as API should be easily added as middleware. 
import "tsconfig-paths/register";
import { defineConfig, Plugin } from "vite";
import solid from "vite-plugin-solid";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";
import { toNodeHandler } from "better-auth/node";
import { auth } from "~/lib/auth";
import { RPCHandler } from "@orpc/server/node";
import { router } from "~/lib/api/router";
import { NodeHttpRequest } from "@orpc/standard-server-node";

const ORPCPlugin: () => Plugin = () => {
  const handler = new RPCHandler(router);
  return {
    name: "oRPC",
    configureServer(server) {
      server.middlewares.use("/api/auth/*", toNodeHandler(auth));
      server.middlewares.use("/api*", async (req, res, next) => {
        // exactOptionalPropertyTypes makes this type not work, although it should
        const { matched } = await handler.handle(req as NodeHttpRequest, res, {
          prefix: "/api",
          context: {
            headers: req.headers,
          },
        });

        if (matched) {
          return;
        }

        next();
      });
    },
  };
};

export default defineConfig({
  plugins: [
    ORPCPlugin(),
    TanStackRouterVite({ target: "solid", autoCodeSplitting: true }),
    solid(),
    tailwindcss(),
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
  ],
});
import "tsconfig-paths/register";
import { defineConfig, Plugin } from "vite";
import solid from "vite-plugin-solid";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";
import { toNodeHandler } from "better-auth/node";
import { auth } from "~/lib/auth";
import { RPCHandler } from "@orpc/server/node";
import { router } from "~/lib/api/router";
import { NodeHttpRequest } from "@orpc/standard-server-node";

const ORPCPlugin: () => Plugin = () => {
  const handler = new RPCHandler(router);
  return {
    name: "oRPC",
    configureServer(server) {
      server.middlewares.use("/api/auth/*", toNodeHandler(auth));
      server.middlewares.use("/api*", async (req, res, next) => {
        // exactOptionalPropertyTypes makes this type not work, although it should
        const { matched } = await handler.handle(req as NodeHttpRequest, res, {
          prefix: "/api",
          context: {
            headers: req.headers,
          },
        });

        if (matched) {
          return;
        }

        next();
      });
    },
  };
};

export default defineConfig({
  plugins: [
    ORPCPlugin(),
    TanStackRouterVite({ target: "solid", autoCodeSplitting: true }),
    solid(),
    tailwindcss(),
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
  ],
});
But unfortunately the path aliases I use in the Vite build environment don't work during configuration. I'm sure I'll get into other issues where I'm trying to share code between server and client.

Did you find this page helpful?