#Need help with Electron + preact/react + signals + tailwind + hot reload

38 messages · Page 1 of 1 (latest)

honest wasp
#

Electron + preact + signals + tailwind; i am new to all of them at the same time only little superficial knowledge on each, working on each of them alone for a little while. now i have been living 15 hours of hell this entire day trying to get them to work together with my close to none knowledge becuase i dont even know enough about package.json or how things are being watched or how nodejs work.. please help me set them up to work together

brittle kindle
#

i would try to get them working one at a time

#

what are you trying to build? 🙂

honest wasp
#

all kinds of windows apps, combining personal web projects to give a ui to my already existing backend and task managers windows projects using python/c++

#

lets focus on the ui part since thats what am trying to make sure works in electron first ..
the most i can do right now are these combinations:
electron as the base and;

  • react + tailwind + hot reload
  • only preact + htm with no signals
hollow plaza
#

first you must have the knowledge for technologies such as webpack, babel, loaders etc.

honest wasp
#

how much knowledge are we talking i shall acquire, i have no idea what will work with electron . maybe give example names for these things that i know to know about. like you did with webpack and babel
and if you can a brief little description why should i use this and that so i can draw a map what does what

hollow plaza
#

for why you should use these technologies i mentioned is because "hot reload" basically translates to these.

#

to be honest with you i would just use boilerplate

#

have you ever worked with boilerplate do you know what im talking about ?

honest wasp
#

there is no perfect boilerplate, and none of them allow me to use signals, you signals from preact ?

hollow plaza
#

boilerplates are scaffolds i dont think there is classification such as being perfect or not. if you are new to all of these things

#

you should grab a boilerplate that is close to what you want to achieve and build upon it

#

making hot reload work with webpacks is quite a headache

#

other thing is if you didnt worked with react that much you shouldnt start with preact

#

preact doesnt have that massive community react has, so very little source material

honest wasp
#

i dont need preact itself all i care about is the signals from there, there is a boilerplate that have most of the features (react, hot reload, tailwind) you know how can i add signals to the mix ?

hollow plaza
#

i think you are confused. what is different about signals and react state ?

#

can you describe that ?

honest wasp
#

much much less headache from my perspective, less code, less unnecessary renders with much less lines of code and overall better experience. its such a simple thing to add, you have all the knowledge i am "confused" about, do you have any idea to add this or not

hollow plaza
#

you cant mix preact/signal with react while also being responsible coder. this isnt normal. signal doesnt have better syntax either you cant beat react's functional component and callback state functionality in response to your less code as well

#

thats why i said you are confused because you basically want to integrate preact's part of base code into the react

#

then why use react anyways

#

just go with preact

honest wasp
#

i dont care which i should use they are too similar
all i care about is the modularity of react or preact with signals and tailwind and hot reload or even without hot reload

#

if hot reload is a headache forget about it, lets just mix electron with preact and tailwind

hollow plaza
#

Thats why i said you shouldnt implementing signals into react. im not recommending something im stating a fact no one does that its not normal. i dont know any other way to say this more politely...

First you should grab this boilerplate
https://github.com/electron-react-boilerplate/electron-react-boilerplate

and then implement webpack changes from this edited boilerplate
https://github.com/tbdsux/erb-tailwind

erb-tailwind is basically fork from the other one but the author has added tailwind but its not up-to-date so thats why writing these two if you just dont care about being up-to-date then go with the erb-tailwind

after that all you have to do is replace react with preact which shouldnt be hard.

honest wasp
#

thank you
but it has been proven to be hard for me haha
how can i replace preact with react ?

#

i got the boilerplate, for simplicity and to prevent errors from my end i will not update to not mess things up
from that boilerplate how can i replace preact with react

hollow plaza
#

I dont think there is such a tutorial for you to know how to refactor codebase thats just a thing you learn by experience. still should be fairly simple because even tho boilerplate uses react in its name it doesnt have that large impact on the code. whole boilerplate is tailored towards hot-reload and electron.

#

and for the difference between erb-tailwind it really just a 50 lines of codes that should be replaced, its about postcss & autoresolve for tailwind's smart capability to only add necessary class

honest wasp
#

hi friend !
i found a solution on a random yt video
all you need is install @preact/signals-react
and import signal and others based on what you need like effect which is similar to useEffect in a sense

this is good because you maintain all your functionality of react, with the added benefit of being able to manage your states with signal

#

thank you for trying to help, now good night ive been tyring to get things to work from far to long approx ~18 hours now lol. i hope someone find it useful

brittle kindle
#

sometimes it just helps to get away from the screen and come back at it with a fresh mind 😛

honest wasp
#

@brittle kindle i am using this boilerplate now can you help me understand whats going on so i dont get lost. Whats webpack how are things working together whats up with all these dependancies like webpack or whatever is watching for changes and how to integerate anymore addons or dependencies in this pipline if i ever needed to in the future!

brittle kindle