Michael De Abreu

Posted on Jan 27, 2018

Electron with Typescript using ts-node

#typescript #electron #angular

In my last post, I talked about how to Integrate Angular-CLI with Electron. One of the things that was missing was the use of Typescript, oposite to vanilla Javascript, though Electron's main is a Node based engine, so almost everything about ES2015 and ES2016 should work, some newer features are still missing as current version, 1.7.11, is based on node 7.9. And, types are still missing, because of JavaScript. Using Electron with Typescript, is really simple, but we would need to install some modules.

Installing dependencies

We move to the Electron entry folder. In the case the you are integrating with Angular-CLI following my guide, it would be electron folder. Then, we run:



npm install -D typescript ts-node

typescript: Well, this is actually what we want to use.
ts-node: TypeScript execution environment and REPL for node. This will resolver all the .ts files on the fly.

Creating tsconfig.json

Run npx tsc --init if you are using npm 5.2+ to create the tsconfig.json. As is it will work, so we will leave it.

Updating files

We need to modify how the application runs.

Create a folder named src, this will be our development folder.
Move index.js to src and rename it index.ts. This is now a Typescript file.
Create a new index.js in the application root, with the following content. ```typescript

require('ts-node').register(); // This will register the TypeScript compiler
require('./src'); // This will load our Typescript application


## Running Electron
Now it's time to try, and run `npm start` if you are following the integration guide, or `electron .` if you don't have the associated script.

You should see something like this:
![electron-error](https://thepracticaldev.s3.amazonaws.com/i/z1g6mt642m943tunr9my.png)

This is fine. Because we are using `__dirname` as our folder root, now Electron can't find the app source. 

## Updating `index.ts`
Hopefully, the solution is really simple. Just change `__dirname` in the `path.join` function with `app.getAppPath()`. 

*What getAppPath() is?* [Docs](https://electronjs.org/docs/api/app#appgetapppath)
This is a Electron function that will resolve to the root of the application path. 

## Running Electron (again)
If everything went fine, you should now see your application running inside Electron.

# Notes
This is just a guide to show how this _work_. However, I don't recommend use `ts-node` as a production solution. Also, I have not test the `getAppPath` function in a bundle application, so it may fail. 

# Moving forward
We have now a Electron application written in Typescript. It could optimize for production by using a build system, such Webpack. Also, we could target `es6` in the `tsconfig` file as Electron main will work fine with es2015. 

Uses of native modules are something that seems to have interest of users, so I'll probably made a guide about using them.

# See also
- [Integration an Angular-CLI application with Electron](https://dev.to/michaeljota/integrating-an-angular-cli-application-with-electron-34mi/)

Top comments (13)

Joe Pea • May 29 '19

I've been using ts-node while developing an app, and it works great! But when it comes time to bundle the application (f.e. using electron-forge, or similar), then something happens and it doesn't work anymore. Have you had luck bundling your ts-node-using application?

Michael De Abreu • May 30 '19

For building you should consider use Webpack or similar to bundle your code. ts-node it's great for development, but it wasn't made for production environments.

Joe Pea • Jun 1 '19

Ts-node is working great in production. The application startup speed difference is totally imperceivable (and we have quite a bit of code!). The nice thing is that imports compile to native Node.js require() calls, which is much more flexible than with Webpack. The file path you specify is actually what you're working with, which is valuable. We can do nice runtime tricks with the imports (requires) that are otherwise difficult to do with Webpack. It's nice to be able to work with the actual underlying system that way.

Michael De Abreu • Jun 3 '19

For node_modules requires, you can use npmjs.com/package/Webpack-node-ext.... I would really consider use Webpack, but it seems it's safe to use ts-node (github.com/TypeStrong/ts-node/issu...).

Joe Pea • Jun 3 '19

Ah, thanks for sharing webpack-node-externals. That could come handy when I find myself in an existing webpack/node project.

Mark Elphinstone-Hoadley • Aug 20 '19

Did you manage to get debugging to work in vscode or similar? I've had problems getting breakpoints to work. It just ignores them when it is in a file that isn't native JS.

xemanet • Nov 7 '18

Hello Michael

I'm create a SSR with typescript and node-express-react-mongoDB-sequelize-mysql and I want integrate with electron to run on the win desktop. Thats all! ;)

All run correctly but there is no human way to make it work whith electron.

Imports errors, Document is not defined, electron window no open...etc

Can you tell me some resources where to find help on this?.

Thanks!

Michael De Abreu • Nov 7 '18

Hi! You may face some troubles with native modules in the first place, as Electron bundle its own version of Node, that may or may not be different from yours.

Aside of this, what are your expectations of this applications? Does this should run on it's own? Does this should display data from an api REST? It really depends upon what you are expecting to archive.

If you want an application that runs on its own, and need a database, I would suggest you to use another kind of database. Maybe rxdb, that have a mongo compatible query system.

If you want an applications that display data from an api REST, then you just want to use the React part of the app. You may want to separate the React client entirely of the stack, to be able to use it in Electron and in Express.

You could setup an express server inside the Electron app, but this is kind of unlikely scenario to be needed.

xemanet • Nov 7 '18

Hi!

This app will have to work in a Pc windows that has installed a business management application(BMA) with mysql and apache(nginx). The user has a online shop in internet(mysql) and this app will manage actualized regs between BMA and Online Shop.(Clients, orders, products and products' images).
This app contains a poolling loop(4 timers) when opening it that run on , Socket.io to comunicate with user in react page, mongodb for store logs in pc and default values(mongodb) that user can modify with comunicate with databases with get and post of express.

I have separate server and client, and webpack compile in dist folder.

All run correctly in development and production.
The next step was integrate electron in app and this is the problem.

All app was write in nodejs javascript with babel and babel node for run it to use imports instead of require, and with errors of electron I opted to change the code to Typescript(much better of course) but the errrors continue.
If in main entry of pckage.jsfor I indicate dist/client.js, electron send error "document is not defined". If I indicate production.ts send error in imports Unexpected identifier.

I'm a bit lost and I do not find much on the internet.
Can you give me some information about it?

Thank you very much for answering!!

Michael De Abreu • Nov 7 '18

You want to bundle the React app into Electron, so you would probably need to do just that. Have you try to create an Electron application before? The tutorial is very useful for a first app. :).