#Astro Vite Devserver export

8 messages · Page 1 of 1 (latest)

vivid fossil
#

Guys quick question, I've asked like a couple of months ago if I could access the vite server from my node application, because in development I can only either run my astro front-end or nodejs backend, and it's kind of annoying

I wanna be able to do something similar to this in my node app

const vite = await createViteServer({
    server: { middlewareMode: true },
    appType: 'custom'
  })

 app.use(vite.middlewares)```
 
Not sure if this is possible now in Astro?
vivid fossil
#

I managed to get what I needed using a hack, I'm writing it here in case anyone needs it.

Basically I had an Express backend and Astro frontend glued with tRPC.

All I had to do in the development env was run one instance of nodemon(or whatever your normal nodejs development tool you use) on port 3000 and Astro dev on port 3001. Then I just proxied all requests from 3000 to 3001, except my backend routes, the ones I might change in the backend. That way I had both development environments on port 3000.

Here is the example code:

if (process.env.NODE_ENV === "development") {
  console.log("DEVELOPMENT MODE ACTIVE");
  app.use(cors());
  //proxy all requests except trpc to the astro dev instance.
  app.use(
    "/",
    proxy("http://localhost:3001/", {
      filter: function (req, res) {
        return !req.url.includes("/trpc/") && !req.url.includes("/api");
      },
    })
  );
}```

And for tRPC client, Had to change the url to port 3000 like this:

```ts
const devHost = "localhost:3000";
const devOrSSR =
  import.meta.env.SSR || document.location.host.includes("localhost:");
export const client = createTRPCProxyClient<AppRouter>({
  links: [
    // call subscriptions through websockets and the rest over http
    splitLink({
      condition(op) {
        return op.type === "subscription";
      },
      true: wsLink({
        client: createWSClient({
          retryDelayMs: (attempt) => {
            return 500;
          },
          url: devOrSSR
            ? `ws://${devHost}/trpc`
            : `wss://${document.location.host}/trpc`,
        }),
      }),
      false: httpBatchLink({
        url: devOrSSR ? `http://${devHost}/trpc` : "/trpc",
      }),
    }),
  ],
});```
#

Hope this helps someone because it's really annoying when you have an express backend and astro frontend

#

Also this is the command line I use to run both instances
from packages.json

"scripts": {"dev": "concurrently \"astro dev --port 3001\" \"tsc -w\" \"tsc-alias -w\" \"nodemon -r dotenv/config --experimental-specifier-resolution=node ./dist/src/app.js\"",
   } ```
vivid fossil
#

So I found a better way to proxy the requests using vite. This allows HMR to work json vite: { server: { proxy: { "/trpc": { target: "http://localhost:3001/", ws: true, }, "/api": "http://localhost:3001/", "/auth/*": "http://localhost:3001/", }, }, }

hazy burrow
#

Hi @vivid fossil this is fantastic could I tempt you into putting a pr together for the docs, this would be amazing to have documented for others my friend

vivid fossil
#

Never written docs before, if you have some guidelines that would help. If so I can try and do it in my free time

hazy burrow
#

we do and a great wee docs team that can help get it over the line for you aswell