Dockerizing client and server into separate containers with Node serving SSR

[romatou]

Hello there 👋,

I'm currently preparing my project for deployment and trying to dockerize client and server into separate containers for better scalability. The project uses Vite, Node, React and I have implemented SSR like in the example here.

The problem is that I don't know how to import my entry-server.cjs file into Node and use its function render to create a layout of the page.

Help would be appreciated a lot.

Here is my code block

server/index.ts

  ...
  let render: (url: string) => string
   
  ...

    if (isProd) {
      // without docker it was like this
      render =  (await import(resolve("../client/dist/entry-server.cjs"))).render
    }
  }

  app.use('*', async (req, res) => {
    try {
      const url = req.originalUrl
      const appHtml = render(url)

      if (!isProd) {
        template = await vite.transformIndexHtml(url, template)
      }

      const html = template.replace(`<!--ssr-->`, appHtml)

      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      !isProd && vite.ssrFixStacktrace(e as Error)
    }
})

client/src/entry-server.tsx

export default function render(url: string | Partial<Location>) {
  return ReactDOMServer.renderToString(
    <React.StrictMode>
      <ErrorBoundary>
        <Provider store={store}>
          <StaticRouter location={url}>
            <App />
          </StaticRouter>
        </Provider>
      </ErrorBoundary>
    </React.StrictMode>
  )
}