examples for react

[pavelpalonko]

Hello!
Could you please add some examples with react?
I understand you are using this package for ssr server.
Perhaps you could share the minimum configuration for this purpose? Were there any problems with integration?

I would like to use this library in conjunction with babel register.

[laverdet]

babel-register is a nonstarter because that is CommonJS. You don't need it though because TypeScript can transpile JSX to JS. You want a loader and not a registration hook (the old way of doing things). We use https://github.com/braidnetworks/loaderkit/tree/main/packages/ts. There is a more popular package here: https://github.com/privatenumber/tsx/blob/7c47074652790e8225bb9c0d3123fc92e75d3695/docs/dev-api/node-cli.md. We use a custom loader for consistent values of import.meta.url [https://github.com/privatenumber/tsx/issues/448].

React is tough because it is a client/server interdisciplinary project. Getting SSR working is easy enough but showing how to combine the client & server requires at least Webpack or Vite. It would be a very complicated "minimal" example.

[pavelpalonko]

Thanks for the reply! I will check out your links.

As for babel-register - I've already sorted it out, it really doesn't fit. (maybe in the future when they add esm support).

The main problem I am facing is the inability to read css modules files. And most likely the same problem will occur for other files, such as pictures. + alias paths.

All this was solved by babel-register, but it is slow. Well, restarting the ssr server for development after each change (using nodemon) is also not very fast. Perhaps you see a solution for working with css modules, etc., or have already implemented it yourself. In any case, thanks!

[laverdet]

Yup, these would all be loaders. The problem with a simple example is that you end up needing to build an entire framework. We've actually built the framework for our site but it contains some custom behavior that would need to be generalized before open sourcing. I would definitely like to do that work eventually since I think the loader feature in nodejs is really cool and powerful.

Each loader is 100-200 lines of code, it's nothing too complicated--

The CSS loader uses postcss and dispatches the same plugins that we have configured in Webpack. The main thing is that we use exported CSS class names which allows compression on CSS classnames (ex: .component-name becomes .xyz).

For the file loader it starts a local HTTP service which hosts the files and then forwards those URLs to both the SSR pipeline and the client Webpack bundle.

[pavelpalonko]

Sounds very interesting! Perhaps you could share the code for these loaders? I would be very grateful :) I haven't had to write them myself yet, but I think I could figure it out and adapt the code to my needs. Thank you.