Switch from NextJS -> Vite / plain React for demos

[rkistner]

NextJS's server-side rendering mostly just conflicts with our local-first approach, with multiple workarounds required to make it functional. This attempts to simplify the supabase-todolist demo by not using NextJS.

The app is mostly unchanged. The main changes are:

1. Use Vite as a bundler.
2. Use react-router instead of NextJS navigation.
3. Shuffle the providers around a bit to better work with react-router.
4. Move lists out as a separate TodoListsWidget.

In the future, it will also allow:

1. Using react-router's loaders to load data before navigating to a new page - see POC: Preloading queries #84

This similarly migrates the Yjs demo, adds a new "example-nextjs" to still have the basic boilerplate for NextJS available.

This also fixes some null-check issues, giving better feedback when credentials are not provided.

TODO:

• Check if more config or dependencies can be cleaned up.
• Rename demo to react-supabase-todolist.
• Do the same for the Yjs demo.
• Add a new basic NextJS demo, to still have a working example (similar to the current Vite demo).
• Fully offline-capable PWA.

[benitav]

We probably need to mention setting this field (and renaming this file) in the Readme?

[rkistner]

Actually getting sync to work would also require setting up a connector. The other two examples (example-vite and example-webpack) also don't have anything for that.

Do you think it's worth expanding all those examples, perhaps with instructions using temporary development tokens?

[guillempuche]

As newcomer, fake auth connection is good for learning and testing purposes.

[benitav]

IIRC we published those to showcase bundling with these frameworks; I think showcasing the sync setup is also going to be helpful, but could also be a future addition. If we implement this later I'd just say we add a note here explaining how this field would be used, or remove it.

…

On Wed, Mar 6, 2024 at 2:05 PM Ralf Kistner ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In demos/example-nextjs/.env.local.template <#83 (comment)> : > @@ -0,0 +1 @@ +NEXT_PUBLIC_POWERSYNC_URL= Actually getting sync to work would also require setting up a connector. The other two examples (example-vite and example-webpack) also don't have anything for that. Do you think it's worth expanding all those examples, perhaps with instructions using temporary development tokens? — Reply to this email directly, view it on GitHub <#83 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABYH5IFFYLF7TCI56ZGPHYLYW4BB5AVCNFSM6AAAAABD6D6DGSVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMYTSMJZGU3DCOBWGA> . You are receiving this because you commented.Message ID: ***@***.***>

[rkistner]

IIRC we published those to showcase bundling with these frameworks; I think showcasing the sync setup is also going to be helpful, but could also be a future addition. If we implement this later I'd just say we add a note here explaining how this field would be used, or remove it.

@benitav I added minimal notes on configuring the example with a development token.