tried a new vanilla typescript project #54

mrose · 2024-10-11T18:17:41Z

mrose
Oct 11, 2024

Hi, I found myself really excited about React19 and discovered that Meta only recommends Next.js, which is awfully heavy for a learning experience. There have been several attempts (notably Fastify) to cobble together an alternative, but this one looked best so I gave it a whirl! Thanks very much for your effort! Just reading the code has been revelatory.
The documentation provided was good but I had to skip around to get a working Counter example, and had a few things which might be relevant or helpful:

I had to add "react": "0.0.0-experimental-204a551e-20240926", to my dev dependencies to import { useState } from react in my Counter component.
For Typescript, Vite installed a tsconfig.json which referenced two others, tsconfig.node.json (for the node/vite side) and tsconfig.app.json (for the browser side). I took my best guesses but TS config seems to be a dark science....
After successfully starting the dev server, I suffered a hydrating mismatch

the error display did not show all the detail that was in the console
fixed by updating to <body cz-shortcut-listen="true"> tag in main.tsx (added because of ColorZilla browser extension)

Vite's CLI lets me press 'q' to quit in terminal, would it be hard to implement? If not I will Ctrl-C, ok....
Finally the documentation is unclear whether the .react-server directory should be committed. I am going to add it to my .gitignore and see what happens.

Thanks again for some great work. And if you'd like to see the project lmk.

lazarv · 2024-10-11T20:01:19Z

lazarv
Oct 11, 2024
Maintainer

Hi, @mrose! Welcome and thanks for checking out this framework!
The documentation is still not in the best shape and I'm not satisfied with it yet, but there are still a lot to do on the framework side.

You don't need to install any of the React dependencies to work with the framework, even when using TypeScript. You just need @types/react and @types/react-dom and your best option right now is to use the tsconfig.json provided in the documentation at https://react-server.dev/integrations/typescript or copy one from one of the examples you can find in this repo at https://github.com/lazarv/react-server/tree/main/examples. You don't need a tsconfig.app.json and a tsconfig.node.json when using @lazarv/react-server. Vite generates these for client and SSR builds.

Browser extensions can interfere with React hydration. I'll check out the ColorZilla extension specifically, but information shown in the error overlay and in the console should be the same. I would much appreciate if you could create an issue for this as it sounds like a bug in error handling when using the development mode.

I'm planning to provide much more than a 'q' shortcut key to exit the development server, but my current priority is to finally upgrade to the latest Vite 6, but there are breaking changes I need to resolve.

You don't need to commit .react-server into your repo, but this is the default output directory which is used during development mode and production build is using this directory too, so you need this directory to run the framework in production mode.

If you would like to get a review and provide some feedback on your project, I'm happy to do so! Just please be patient as it will take some time for me to get there, I'm quite busy lately.

0 replies

mrose · 2024-10-18T14:11:36Z

mrose
Oct 18, 2024
Author

Hi, thanks for your reply!
It would be a waste of your time to check out the colorzilla extension, many extensions add special attributes so the fix is up to the developer. I tried to repro today but could not but promise to submit an issue when I can.
I appreciate the offer of a code review, it is pretty obvious that you're very busy and I haven't hit anything substantial yet.

Can you please let me know the best way to use the runtime context (https://react-server.dev/framework/configuration#runtime)?
Also a quick pointer on how to log and where the logs are kept would be much appreciated.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

tried a new vanilla typescript project #54

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

tried a new vanilla typescript project #54

Uh oh!

Uh oh!

mrose Oct 11, 2024

Replies: 2 comments

Uh oh!

lazarv Oct 11, 2024 Maintainer

Uh oh!

mrose Oct 18, 2024 Author

mrose
Oct 11, 2024

lazarv
Oct 11, 2024
Maintainer

mrose
Oct 18, 2024
Author