What is Elecrue?
First of all let me tell you the main point of this elecrue thing.
Elecrue is a boilerplate generator npm package, it generates the boiler code for electron with react or vue with tailwindcss.
Elecrue provides you following starter code templates:-
- React-Electron-JS
- React-Electron-TS
- React-Electron-Tailwindcss-JS
- React-Electron-Tailwindcss-TS
- Vue-Electron-JS
How to install Elecure?
npm i -g elecrue
How to use it?
It is pretty straight forward to use it. Type elecrue in your command line. It will ask you for choosing a template, after choosing the template. It will ask you the name of the project name, after typing the name. Elecrue will download all the node packages in your project folder. Ta-da! You are ready to rock! 🎉
FAQs
1.) Why Elecrue doesn't use IPC?
Let me break this down, Why didn't I used IPC.
What is IPC?
IPC is a set of two things, ipcMain & ipcRenderer. They both helps to send signals and receive from electron to receiver, by doing this you can get some information from electron to react or vue. As React and Vue are restricted to src folders only.
Why didn't I used IPC?
As I above paragraph, I explained that both react & vue, can't go outside of src folder. So most people use IPC in most ideal conditions. But IPC can be tedious to work with.
For example, If you want to create a file with one click of a button. It might sound easy, but it is hard to execute, as the button is in react, but you can't set the function to create a file in react as react is a client-side technology. But electron can do it easily with the fs module from the node, but we also need to create the file when the button is clicked. So how will we connect this? IPC would right?. Nope, Ipc is a heck alot of work and chances are low for it to work (For me at least).
If boil the problem down, we need to trigger the function in electron, which is to create a file.
The solution to this problem I found was, To host an express server in electron on localhost:5001 (If I remember correctly). And set up an endpoint for creating the file, Like /create-file. So when the button will be clicked in react, onClick will fetch the localhost:5001/create-file triggering the function to create a file in electron, as the only electron can use fs.
2.) Is there would be any future updates?
Yes, I will maintain the project and will update it when if any of the used libraries are updated.
3.) Am I am going to add more templates?
Yes, But depending on your suggestions. You can comment on this blog, about the template you want like svelte with electron. Or you can make an issue on Elecrue's Github Repo
Got to go
I hope you liked the Elecrue. Star it on Github 🌟.
I also hope you understand, Why I didn't use IPC. If you have any doubts ask me in the comments, I will surely reply. And if you wanna learn new things with others, or looking to work on some cool projects, check out ByteSlash Discord Server, it is an awesome community to grow yourself with others, everyone is there to help you including me.
If you haven't read my previous blog, do check it out:- What is open source and How to repay it.
Have a good day,
Rajvir Singh
Top comments (16)
I hope you all found Elecrue helpful, If you guys have any feedback about my writing style or presentation style, I will surely hear. And let me know, If you guys want any new template to be added in Elecrue.
Have a good day,
Rajvir Singh
Thanks for this project. It seems useful. But from my experience not using IPC and hosting a local web server usually causes problems with the antivirus. So, I strongly suggest the usage of IPC.
I think it is my mistake, not having enough experience for using IPC correctly. I will surely give a try to IPC, if it got good with me, I will surely update this article and the project. Thanks Alot for the comment
A little update Giuseppe, I tried IPC, but I am not able to import the ipcRenderer into react file. Let me know if you got any solution to this problem
Here there is an example: medium.com/folkdevelopers/the-ulti...
Oh I was following that article. But I got window require error, and then I tried with only require then I also got error. At the end I tried with import, but the I got error about
fs.writeSync not defindsomething like that. Can you try on your local pc, maybe it work? Let me know, and thanks for the replyingWell done 🎉. Looks very promising, I'll give it a try later at home. But I still think the IPC is the way to go, writing a fake api and running a node server seems way more complicated than properly setting up IPC. In a project at work, using IPC with react hooks make things very smooth. If the problem is implementing it in your project, maybe have a look at other boiler plates to get an idea how they do. 😉
Yeah I think too, as IPC is specifically is built for doing this specific task, and it would be obvious that it would be way better than the express api. I don't know why but it came to be hard for me, Maybe it can be my fault so I will try again, by looking at other boiler plates, as you said 😉. Let me know if you have any suggestion about it or if you can guide me setting up IPC with react hooks.
Stay Healthy,
Have a nice day
Cool project, i would love to have tailwind added in Vue template too. Great work man
Sure I will surely add tailwind to vue template too, sorry for not having it in the first place, As I am mainly good at react so thats why I was little confused about vue templates, But yeah I will surely add it. Thanks for the suggestion Shahriyar, Try contributing if you like
Hey Shahriyar, I have added the tailwindcss to vue template, I hope you will like it. Do check it out, Have a good day
Yo cool project! And great article on it...all the best!!
Thanks Bro
Great but how can I use Vue with bootstrap
I will surely add it Adedayo, Thanks for the suggestion
clouwood.com/the-easiest-way-to-co...