#I've build widget/component that I want to bundle and use in other projects.

42 messages · Page 1 of 1 (latest)

mint yoke
#

I made some component that uses shadcn, own css and bunch of other components. I want to use that component in other projects by bundling it and hosting it so i can just add few lines of js do add that component. Component also use it's own api route but that could be moved if there is no way to bundle it like that.

Does anyone have idea how to do that?

regal plankBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

stiff hornet
#

I mean you could just make your own nom package? Is that what you mean?

#

If you want something private that changes things slightly

mint yoke
#

Okay, I'll explain everything. I am building a chatbot widget. A button, positioned at the corner of the screen, triggers a modal. This is part of my SaaS product. When a user signs up and accesses their dashboard, they can control settings like color, access, etc. The user then adds a script tag with the location where I will host the package, and includes their secret key, which enables them to use the chatbot. This ensures that only authorized users have access. I also want the widget to be compatible with platforms like Shopify, WordPress, or custom non-JavaScript environments. Does that make more sense?

dapper flume
mint yoke
#

Not really sure how to do it 🙂

dapper flume
#

äh

#

have a public key

#

and validate on serverside

#

if the requested domain is the trusted one

#

thats it

mint yoke
#

but should I do this kind of thing by packaging it with npm?

dapper flume
#

but

#

if u want to make it available for people with no knowledge i would suggest bundling a small codebase

mint yoke
#

how do i do that

dapper flume
#

and injecting it on customers page

#

i would use a bundler like webpack

#

or rollup

mint yoke
#

I used webpack yesterday but it failed but i was tired and probably didn't set it up correctly. I am doing this rn

dapper flume
#

keep the bundle size as low as possible

#

and try to keep everything on the serverside

mint yoke
#

well it is chatbot so some of the stuff can not be done serverside

dapper flume
#

yes ofc

#

im talking about the payload itself

#

u can ssr render parts of ur widget

#

yes thats it as u cant just change the origin and bypass cors

#

so its easy to verify the requested domain on the serverside

#

u dont need a private key on the clientside

#

hope that helped

mint yoke
#

i finally bundled it successfully

#

now i am going to try if it works as expected

#

also

#

its 2.47 MiB

#

in size

#

seems like a lot

#

not zipped yet

#

well it doesn't seem to be working. it bundled successfully but when i create index.html file in root it just shows the icon no interactivity. Icon is not even positioned correctly

#

should i rebuild this component in plain react?