so here are steps for doing #decentralized #web #apps

if you want to use react (because your boss told you its necessary)

- use hashrouter https://reactrouter.com/en/main/router-components/hash-router

- make datauri, like this:

"data:text/html;base64,"$(cat index.html | base64 -w 0)

your app can now be shared without http server

when you need more content, upload it to relays. for small files less than 100 kB #hostr or other simple way of using event content is ok. if there is need for larger files, #filepublish #fileloader #dget gets the job done.

i highly recommend using vanilla js, as your codebase can be 1/100th of the size compared to react app.

Reply to this note

Please Login to reply.

Discussion

for bootstrapping content from #hostr with short #datauri, you can use hostr loader like this:

r = relay

k = pubkey

f = d_tag

rest of the #code is #javascript code for loading content from #nostr event

data:text/html;r=nos.lol;k=2b8d50fcc974ffb652c0ab33edebb6a9ce72cd154591969592bc8b607a4ea1f2;f=ourchan;base64,PHNjcmlwdD4KKCgpID0+IHsKICBjb25zdCByID0gIndzczovLyIgKyBsb2NhdGlvbi5ocmVmLm1hdGNoKC9kYXRhOlxTKz87cj0oW147XSspXFMqO2Jhc2U2NCwvKVsxXQogIGNvbnN0IGsgPSBsb2NhdGlvbi5ocmVmLm1hdGNoKC9kYXRhOlxTKz87az0oW147XSspXFMqO2Jhc2U2NCwvKVsxXQogIGNvbnN0IGYgPSBsb2NhdGlvbi5ocmVmLm1hdGNoKC9kYXRhOlxTKz87Zj0oW147XSspXFMqO2Jhc2U2NCwvKVsxXQoKICBkb2N1bWVudC53cml0ZSgiPHA+Y29ubmVjdGluZyB0byAiICsgciArICI8L3A+IikKICBjb25zdCBzID0gbmV3IFdlYlNvY2tldChyKQoKICBzLm9ub3BlbiA9ICgpID0+IHsKICAgIHMuc2VuZCgnWyJSRVEiLCAicSIsIHsiYXV0aG9ycyI6IFsiJyArIGsgKyAnIl0sICIjZCI6IFsiJyArIGYgKyAnIl19XScpCiAgfQoKICBzLm9ubWVzc2FnZSA9IGFzeW5jIChlKSA9PiB7CiAgICBzLmNsb3NlKCkKICAgIGRvY3VtZW50LndyaXRlKEpTT04ucGFyc2UoZS5kYXRhKVsyXS5jb250ZW50KQoKICAgIHdoaWxlKCF3aW5kb3cubG9hZGVkKXsKICAgICAgYXdhaXQgbmV3IFByb21pc2UoYyA9PiBzZXRUaW1lb3V0KGMsIDEwKSkKICAgIH0KCiAgICBkaXNwYXRjaEV2ZW50KG5ldyBDdXN0b21FdmVudCgibG9hZCIpKQogIH0KfSkoKQo8L3NjcmlwdD4K