Unfortunately, I discovered later that Windows has some compatibility problems. Specifically, the background blur effect seems to be supported only on MacOS. Also path separators are different: on Windows you should use `\` instead of `/`.
set backgroundMaterial to 'acrylic' will make the background blur take effect on windows11 const window = new BrowserWindow({ backgroundMaterial: 'acrylic' // on Windows 11 })
Hey Antonio 👋 So awesome to hear from you! Your channel was super inspiring, and it really got me pumped up to try doing the same thing. Thanks a bunch for being such a positive influence! 🌟
Hey, thanks so much! Yes, I heard that Tauri is the next big thing after Electron for his performances. Never had the chance to test it with React or Solid.
This is amazing, youtube instructors hardly make full projects with electron js, Thank you so much. I am definitely working on this and adding it to my portfolio🙏🏽🙏🏽🙏🏽
@@ILevizzzUnfortunately I think that the properties to make the window blurred work only on MacOS. I'll see if there is a way to make it work cross-platform.
A great Project To Have in the resume. Can I use this project and add some modification with some extra features and publish it as a open source project. If you have permission
Hello. I use your github code and use the `@shared/types` alias in `main.ts` in the project to import the types in the shared folder. When webstorm moves the mouse over the imported type, the type is not recognized and vscode is normal. Thank you
Thanks! I think it should be possible but you would need to update the file extension to look for .rtf instead of .txt. Also the enconding of those file should be kept to utf-8. As for the formatting abilities take a look at the library plugins: mdxeditor.dev/editor/docs/getting-started
@@codewithgionatha Thank you. What would the name be changed to in the file filter. Is it 'RTF.'? And would this allow underline since currently with markdown there is no underlining but it says it's possible in the MDXEditor docs.
I think you are missing the prosing styling. What MDX does is injecting the corresponding markdown as html into your document, and that html needs to be styled properly to look nice. For example if you insert an heading1, your html will then contain a corresponding h1 element (but unstyled) I resolved that problem by using tailwind-typography on the root of my markdown editor.
I think it's better to create css class draggable, instead of apply it to header .draggable { -webkit-app-region: drag; } also you can apply no-drag to all body to make sure no other element will be draggable. What do you think?
If only the header is supposed to be draggable I don't really see the point of making the entire window draggable and then disabling it with no drag 🤔 Anyway both ways are valid IMHO.
it looks really cool but unluckily there are some fancy options I can't use in Windows. For example the background can't be transparent, so there are some CSS I have to change.
@@codewithgionatha install third party extension. Then other devs can write own logics into this electron app. Ex: vscode's todo, bookmark, prettier extension.
hey sir can you help me. I need to create a folder /usr/local/bin if is not exist but if exist next step is copy the cli tools to that folder. because my app need to comunicate with that cli tool. but to perform that operation on mac aplication need a sudo access. can i make the process when user first time install my app. when aplication installer run we need to ask the permission for move the file into /usr/local/bin. how can i do that.. thank you sir. i hope you response this comment and i hope you understand my english is not good.
Im having problems with the imports on the index file in the lib folder, it doesn't let me import NoteInfo or variables for constants, if you can help me i really appreciates it
Hey I'm stuck on installing the tailwind for this project. I've rewatched "styling setup" 3 times now and I'm not going anywhere. Any fix? I'm on windows. Please and thanks
Hey, I found some info regarding having multiple windows, in the official electron-vite doc, here you go: electron-vite.org/guide/dev#multiple-windows-app
Obviously, because the property trafficLightPosition, vibrancy, and visualEffectState only works on macOS. I suggest you to read the Electron.js documentation.
Did you define this file 👇 github.com/gionathas/NoteMark/blob/a679397cc887db257487e1ea22ff98a585f80443/src/preload/index.d.ts Also you get window = undefined at static time (ts complaining) or at runtime? Btw we can discuss further on discord: discord.com/invite/mN8WD6M4dR
1:55:00 I think I have follow all of the steps, but idk why I can't import the constant from the shared folder to the main/lib folder. The shared alias working fine on renderer though. Does anybody have a clue on how to fix this? This is actually the first time I'm trying react.js so yeah.
@@RobertLugg Yes I am using, but the problem is when I pass data from main to renderer, at that time the UI is still not loaded, so the data is not recieved in renderer. But I solved that problem.
Unfortunately, I discovered later that Windows has some compatibility problems. Specifically, the background blur effect seems to be supported only on MacOS.
Also path separators are different: on Windows you should use `\` instead of `/`.
this solution is:
export const getRootDir = () =>{
return `${homedir()\\${appDirectoryName}}`
}
And styles:
body {
@apply h-full;
@apply select-none;
@apply bg-slate-900;
@apply font-mono antialiased text-white;
@apply overflow-hidden;
}
@@vmaspadlegion8215 I added it at 00:28:38
@@codewithgionatha Oh yes I saw it, I just added the version for those who are windows users.
set backgroundMaterial to 'acrylic' will make the background blur take effect on windows11
const window = new BrowserWindow({
backgroundMaterial: 'acrylic' // on Windows 11
})
Really cool and original project!
Hey Antonio 👋
So awesome to hear from you! Your channel was super inspiring, and it really got me pumped up to try doing the same thing.
Thanks a bunch for being such a positive influence! 🌟
I wouldn't really call it original when devaslife already made it 2 years ago. Not the mention the vibrancy design is quite similar.
@@OmniOmnium no one asked
@@OmniOmnium did u do also ?
Hey Antonio, Don't you have any plans for creating an electron project tutorial?
Thank god dude. There are almost no react electron projects on UA-cam. Thank you
Finally someone with something new & unique. Please bring more Electron content if possible.
Btw have you ever tried Tauri with Solid or React ?
Hey, thanks so much!
Yes, I heard that Tauri is the next big thing after Electron for his performances. Never had the chance to test it with React or Solid.
This is amazing, youtube instructors hardly make full projects with electron js, Thank you so much. I am definitely working on this and adding it to my portfolio🙏🏽🙏🏽🙏🏽
I was thinking the exact same thing.
This video pops up in my recommendation, exactly when I needed this, thanks
Thanks gionatha you helped me alot, I wish you good luck for your channel!
This video is pure Gold!!!!!!
Useful stuff! Thanks :)
That's an incredible video.
I've learnt a lot from it.
Thank you ❤
I'm glad :)
Very interesting project, just what I was looking for thanks!
Already subscribed to your channel! I noticed you make a effort to offer content based on the best technologies nowadays!
Thank you very much for your tutorial. You have opened my door to a new world.
This tutorial is gold 🔥 Thank you for sharing
This is really cool and unique project !
really liked it, gonna make this in couple of days
thanks man
Great video. Original and useful content. Well done 🎉
thanks for the tutorial, it is very detailed and helpful.👍
You are just awesome man : ) keep going 👍👍
Great great job!! Thanks for sharing, this was super helpful!
This is amazing, thanks for your sharing!
Thank you so much, Extremely useful video
Oh my... Awesome project
Great video! GJ!🤓
Thanks so much 🙏🏻
You are a life saver ;)
amazing tutorial! just finished it
Awesome video!
Great Video!
This is great
Please extend this video 👍
But, anyway, is this app supported by windows?
thanks for share this video, i love it💖
Nice channel.
Thanks for the inspiration
It was good, thank you for video!
Thank for this video 🙏🙏
This is amazing bro would try this with tauri :D
Awesome, Tauri is a great alternative to Electron :)
Im following this and trying to use Tauri instead of Electron
Great buddy; this is good
Awesome bro.. unique content
Unique and useful 👍👍👍
Transparency doesn't work in linux, but it doesn't affect the quality of the video thanks for the content.
Hey soner, thanks for letting me know 🙏
I actually didn't try it on Linux environment and unfortunately, the tutorial is heavily based on a MacOS
@@codewithgionatha it doesn't work on windows neither
@@ILevizzzUnfortunately I think that the properties to make the window blurred work only on MacOS.
I'll see if there is a way to make it work cross-platform.
@@codewithgionatha dont worry! I found a solution in the docs, its not the same as the video, but it works for me, thanks for the response
@@ILevizzz Puedes mostrar la alternativa para windows?
appreciated I am looking to learn how to make my own software.
dude can we get some more electronjs projects?
A great Project To Have in the resume. Can I use this project and add some modification with some extra features and publish it as a open source project. If you have permission
Sure, no problem 😄
@@codewithgionathaThanks 😊😊
Cool
Looks like dev as life :)
Yes 😀 I took so much inspiration from @devaslife video
Hello. I use your github code and use the `@shared/types` alias in `main.ts` in the project to import the types in the shared folder. When webstorm moves the mouse over the imported type, the type is not recognized and vscode is normal. Thank you
Is it possible to use a .rtf instead of a .txt?
Also is it possible to have formatting stack? e.g bold and italic
Great video!
Thanks! I think it should be possible but you would need to update the file extension to look for .rtf instead of .txt. Also the enconding of those file should be kept to utf-8.
As for the formatting abilities take a look at the library plugins: mdxeditor.dev/editor/docs/getting-started
@@codewithgionatha Thank you.
What would the name be changed to in the file filter. Is it 'RTF.'? And would this allow underline since currently with markdown there is no underlining but it says it's possible in the MDXEditor docs.
I am trying to use MDXEditor in a different project but the markdown is not working even after importing the plugins. Any solutions?
I think you are missing the prosing styling. What MDX does is injecting the corresponding markdown as html into your document, and that html needs to be styled properly to look nice.
For example if you insert an heading1, your html will then contain a corresponding h1 element (but unstyled)
I resolved that problem by using tailwind-typography on the root of my markdown editor.
@@codewithgionatha I configured tailwind typography as well but it still didn’t work
I think it's better to create css class draggable, instead of apply it to header
.draggable {
-webkit-app-region: drag;
}
also you can apply no-drag to all body to make sure no other element will be draggable. What do you think?
If only the header is supposed to be draggable I don't really see the point of making the entire window draggable and then disabling it with no drag 🤔
Anyway both ways are valid IMHO.
it looks really cool but unluckily there are some fancy options I can't use in Windows. For example the background can't be transparent, so there are some CSS I have to change.
add the following line in the browesr window instance backgroundMaterial: "acrylic",
Hey, if we are using something like firebase (in my case appwrite) how to configure it ?
Thank you. Could you implement a simple plugin system into this electron project and make a video.
Hey @Namal, what do you mean by plugin system?
@@codewithgionatha install third party extension. Then other devs can write own logics into this electron app. Ex: vscode's todo, bookmark, prettier extension.
@@NamalJayathunga Still I don't get it, maybe we can discuss it later on Discord, you can find me here: discord.com/invite/mN8WD6M4dR
What is your VS Code Theme?,, very nice...
What mouse and keyboard are u using for coding?
34:50 day1
1:13:13 day2
Hi, what is your theme ?
hey sir can you help me. I need to create a folder /usr/local/bin if is not exist but if exist next step is copy the cli tools to that folder. because my app need to comunicate with that cli tool. but to perform that operation on mac aplication need a sudo access. can i make the process when user first time install my app. when aplication installer run we need to ask the permission for move the file into /usr/local/bin. how can i do that.. thank you sir. i hope you response this comment and i hope you understand my english is not good.
subscribed please bring some compllex apps on electron too pls there's no one on yt who does that yet
Im having problems with the imports on the index file in the lib folder, it doesn't let me import NoteInfo or variables for constants, if you can help me i really appreciates it
Hey, maybe we can discuss this on the Discord server. Find the link in the desc. 👍
I have created a child window above the parent window.
how can i display componet on it
Hey I'm stuck on installing the tailwind for this project. I've rewatched "styling setup" 3 times now and I'm not going anywhere. Any fix? I'm on windows. Please and thanks
Discord
How do u get so smooth cursor movement bro?
How will the folder structure change if we have more windows in the application ? As there is preload and renderer for every window right?
Hey, I found some info regarding having multiple windows, in the official electron-vite doc, here you go: electron-vite.org/guide/dev#multiple-windows-app
Hello, dude. I attempted this project with my Windows 11, but the blur effect does not appear.
Obviously, because the property trafficLightPosition, vibrancy, and visualEffectState only works on macOS. I suggest you to read the Electron.js documentation.
@@MRNandemoari ohh! okay! thanks for the info :)
@@techh4ck936 No problem.
You should try this: in the src/main/index.ts, at line 17 (33:46), change 'vibrancy: 'under-window' to backgroundMaterial: 'acrylic'.
Hey, what is your vscode theme?
I always get window equal to undefined, did you do anything to avoid this error?
Did you define this file 👇 github.com/gionathas/NoteMark/blob/a679397cc887db257487e1ea22ff98a585f80443/src/preload/index.d.ts
Also you get window = undefined at static time (ts complaining) or at runtime?
Btw we can discuss further on discord: discord.com/invite/mN8WD6M4dR
How would this be possible with Nuxt instead of React?
20:04 -> i m just bookmarking n will rm my comment later.
what extension are you using to sort the import modules order
It's a VScode setting feature (settings.json file)
"editor.codeActionsOnSave": {
"source.organizeImports": "always",
},
Could you please share your vscode configs setup
Should be good to follow the code now the theme
1:55:00 I think I have follow all of the steps, but idk why I can't import the constant from the shared folder to the main/lib folder. The shared alias working fine on renderer though. Does anybody have a clue on how to fix this? This is actually the first time I'm trying react.js so yeah.
Hey if you have more info we can discuss it on Discord. Link in the description.
In electron vite using react, how do I pass data from main to renderer?
I'm pretty sure you use the IPC functions to do that.
@@RobertLugg Yes I am using, but the problem is when I pass data from main to renderer, at that time the UI is still not loaded, so the data is not recieved in renderer. But I solved that problem.
I want to be you when I grow up.
38:54 HOW?
Are you inkdrop user？
I'm not, but I took inspiration from @devaslife's video 😃
3 hr video and you're incapable of manually setting up the boilerplate? That's wild
volume is just too low,
40:40
Bloody complicated