Typescript + Electron = 🔥
ฝัง
- เผยแพร่เมื่อ 18 ก.ย. 2024
- Hello Everyone ! Today I will be creating a secure TypeScript application using NodeJS/ Electron/ HTML and CSS. This is a very simple process to setup and can really help you write secure and safe applications when using types inside electron.
Down below I left some of the code I used in case you wanna copy it down and get started right away. If you enjoyed this content please like and leave a commend down below with any channel suggestions. In future videos we will continue to make our electron app by creating icons, a buildable exe file and much much more.
// PowerShell / CMD Commands & other useful information.
* npm install --save typescript
* npm install --save-dev @types/electron electron
* tsc --config
* npm init -y
// package.json important bits
{
"main": "./dist/index.js",
"devDependencies": {
"@types/electron": "^1.6.10",
},
"scripts": {
"start": "npm run build && electron .",
"build": "tsc"
},
Lastly for typescript errors you can add this flag to remove any errors caused by html or the contextBridge inside the render process.
// @ts-expect-error
// @ts-expect-error
// Typescript electron tutorial series
i think i heard that typescript is now included for Electron so no need for @types/electron. Isn’t it?
You are absolutely correct. I did that as habit but yes it is totally unneeded. Good catch xD
@@tylerlaceby what changes with @types/electron ?
@@sebastiandavidestradaojeda6064 nothing really. Just electron has type definitions included by default. So it just makes it unneeded to install them separately
Very nicely done!
Very Professional. Hope your chanal will grow and other people find your chanal.
Wow.. precise and well explained. You sir earned a sub :)
Awesome video, here I recommend a better flow with scripts:
`yarn add npm-run-all rimraf`
Edit your scripts:
"clean": "rimraf dist",
"build:ts": "tsc -p .",
"build:electron": "electron-builder .",
"build": "npm-run-all clean build:*",
"start:ts": "yarn build:ts --watch",
"start:electron": "electron .",
"start": "npm-run-all start:*"
Totally agree. The idea was more for quick explanation but yea I think having organized scripts is vital.
Thanks xD
@@tylerlaceby It's very considerate of you. No wonder I enjoyed the video😁
Supperb!!
Tysm for your great video.
So i guess we can't even launch Typescript files directly with electron. Like do electron only read javascript ?
Yes typescript is not a language which can be ran. It’s sole purpose it to be translated into JavaScript. React, Deno, node or any other library / framework/ runtime all use JavaScript.
The V8 w fine which actually runs your code only runs JavaScript. Typescript is transpired into JavaScript before being run. Electron is no different. Electron is a nodejs library which means it only runs JavaScript.
You can write typescript and transpile it to JavaScript but NO runtime directly runs typescript. Deno for example lets you “run” typescript code. In reality it’s just doing the transpilation for you.
@@tylerlaceby Oooh, ok, thank you for your answer and brief explanation !!
I smashed the subscribe button.. I learned :D
Haha thanks.
let's see this
Awesome :3
I thought that there would be something better than //@ts-expect-error. Are you sure that's the best on can get? Isn't there some export, import thing to which one can hold to? Any way your channel is very good an this video is super helpful!!! Thanks a lot!!!
So when using typescript and accessing the DOM they say it could be undefined because it could possibly be undefined.
I used @ts ignore there however for elements you know exist you can simply do as HTMLElement or whatever.
A good example would be
const element = document.getElementById(“button”) as HTMLButtonElement
This should give you typing for that type of element as well as remove the comment from
Above.
If you have any other questions feel free to reach out.
Also check out the video I made on doing a typing a context bridge so you have types for that if you haven’t. It is very helpful with typescript
@@tylerlaceby would You please explicitly add the link to the video you refer to, thanks in advance, the one on context bridge, please
You just left how to build it for production, but well done :)
Excellent video! However, why do you guys always "speed through" the most important part? I had to view at 1/2 speed to pick up all the details at 8:00.
I try to take the tutorial slow. Ill keep that in mind for future videos however.
I needed to set `moduleResolution` to `node` in order to import from `electron`.
Thank you. You just ended 2 hours of suffering.
Following this after 3 years, I got an error indicating the it can not import the OS module from the renderer, it only worked if I set nodeIntegration flag to true in the webPreferences
Yep. This is no longer the preferred way to do things. It is considered a bad security practice to use node integration. This is because the browser context should NOT have access to node.
You should be using context isolation. Which means no node integration. For this you will use IPC communication to send and review messages between the renderer and main process.
I have a few videos about preload scripts and IPC. I highly suggest watching those for best practices. Also feel free to reach out on discord if you have additional questions.
Pretty sure that error handling of yours is bad practice. AFAIK, the proper way would be to cast the type to TypeScripts appropriate HTML tag interface which would prevent the possibly optional error from occurring. You would also need to check if it is null or not to be compliant with a basic ESLint setup.
Thanks for the information, and I agree, however this is a tutorial on basic of typescript and electron and I and it would be a way longer waste of everyone's time to show them that as well. I appreciate the feedback however, go find a tutorial on anything and I bet you 90% of them are skipping error handling and stuff for the sake of showing how a feature or part works. xD
Im not saying this is the way to write EVERY ts app but I am trying to show people how to setup typescript since there are already very few resources on youtube, Thanks :)
is it possible to use imports with not commonjs? I am having issues using ESNext, NodeNext, node16, ES2023/ES2022 (target). Can't seem to find the correct configuration.
Yes you can. You need to specify the "type" field in the package.json to be that of "module".
Then make sure your type script config outputs the corresponding type.
Hey, great video +1 sub!
Would you mind sharing the vscode theme and font used in the video?
I think that’s Dracula or Dracula italics.
Sadly I don’t know about the font.
Hey, great turorial! I have a problem tho. trying to import some other ts file in renderer gives "exports is not defined" error. Is there any fix for it other than importing in preload? I'm trying to import a class so it doesn't work properly if I just use exposeInMainWorld.
So inside the renderer process I myself cant find out how to allow includes without messing up the node process compilation. I have been thinking that if you compile the render process ts files separately from the node ones it should work but I have yet to test it.
@@tylerlaceby I actually managed to fix it. You just need to define exports on window object in preloader so that exports exists as a namespace. But I had to disable isolated thingy in webPreferences. You might also be able to use API with the same name tho.
@@thatalbeeguy So what do you mean set window.exports = something?
Im actually genuinly curious lol as this is something that bugs me in projects that I am working on and I have stupid work arounds lol
@@tylerlaceby yes, my workaround was to disable context isolation and set window.exports = exports. But you could probably try contextBridge.exposeInMainWorld('exports', exports). I haven't tried second one tho so I'm not sure.
@@tylerlaceby I dare to snoop into this conversation and say I'd also like to know please, thanks in advance
How we use import statement in our ts file?
?
Thanks for the video. No idea how it works for you, but for me, electron is unable to find the index.html because he is searching it inside the dist folder. 1 hour to figure out how to fix it and still have no idea.
I obviously cannot help without more info. However I suggest you log the ____dirnname and then use path.join() with that to get you to the correct folder.
If you’re still having issues reach out on my discord and I’ll help you sort it out.
Hi. I had gotten an error too (I forgot what it said). Try changing mainWindow.loadfile("./index.html") to mainWindow.loadfile("src/index.html"). If we did everything correctly, and if that doesn't fix the error, then I would say that this video's code is unfortunately out of date. I'm not sure.
Thanks.
Thank you very much for your video! But it shows an error for me: "Unable to load preload script: " I followed exactly what you did.
Is there a repository for this coe? Will be helpful.
Sorry but none of my electron videos have a repo.
everything works until you actually import a module in the main.ts
Sorry to hear that. Message me on discord and hopefully I can help
how would open the OS browser from the Electron app
So with electron you use the shipped chromium browser.
Bruh, you are so quite. I can't hear sh*t. Turned my volume all up and it was still barely recognizable. Had to use a headphone amp :(
Yea sorry about that man. I literally just bought a new microphone and it should be a 1000 times better. We’re you able to figure it out ?
If not I recently created a very basic npm package for generating electron apps for TH-cam videos.
If you do npm install new-electron-project -g.
Then run npx new-electron-project
You can select typescript app and have a really good starting point.
Again sorry bout the trash quality mic. My new one should arrive today or tomorrow
@@tylerlaceby No problem. I was lucky I had a decent amp laying around haha. Actually your quality isn't bad, one could say it's very good. It's just pretty low in volume. Good tutorial, though.
@@comedyclub333 yea it’s gonna be good buying a actual decent Mic. Hopefully next video will be better lol.
Also thx. Trying to figure out how to best deliver content without skipping the important stuff but also not taking forever.
Yeah, neat .. it doesn't work
Sorry to hear that. If you need help let me know as everything I outlined in this video has helped plenty of people.
@@tylerlaceby I am running 12 different projects spanning across a half a decade worth of versions. I am beyond help.
Besides, context isolation (and the performance impact of it) might just be a deal breaker for me.
Thx
This is not working. I get no cores and the console says
// @ts-expect-error
coreCount?.innerText = `Core Count: ${api.threads}`;
Uncaught: ReferenceError: api is not defined
any idea how to fix this?
I would suspect that the preload is not defined properly. api is shorthand for window.api so if you want to make sure console.log(window.api) inside your dev tools and make sure its not undefined.
If its undefined then the problem is inside your preload script. Make sure the exposeInMainWorld name matches api.
If this is still causing you issues you can send me a message on Discord and I will hop in a voice call if you would like. My Discord: JSimplified#9121
Thanks for replying. I’ll check this out tomorrow. I am afk.
Here because your core counts arent showing up correctly?
- cmd+option+i to open your console
- do you see "Unable to lead preload script" even though the path is correct?
- try adding `nodeIntegration: true,` in your webPreferences obj in index.ts
NodeIntegration is insecure and not recommended for security purposes. I am a tad confused what you are talking about as my core counts seem correct.
If you need help feel free to message me but please don’t recommend enabling node integration as it’s a really outdated practice.
I have a ryzen 5 2600 which has 6 cores and 12 cores.
Inside the code I properly and using api.threads which gives me 12.
So nope everything is correct for my machine. Also using node integration is a big no no. Please take a look at the election docs regarding nodeIntegration and why it’s deprecated.
www.electronjs.org/docs/latest/tutorial/security
Apologies, my comment was not to you or your video but more geared for folks who were visiting the comments because they were stuck on the core count part of your video like I was.
For some reason I was not able to access context bridge until I added that line.