Adequate Infosoft
Question:
Building an Electron app from scratch
In the previous blog, >Building an Electron App from Scratch (Part 1), we learned about Electron, starting with npm, creating a browser window, and adding Typescript. Now its time to move on to building a real desktop application. In this blog, we will learn to create an app website, add React, and bundle it with Webpack.
Read our blog on >how to integrate SASS into the build and consume a UI toolkit.
We will start with a simple HTML code and make it more complicated as we go.
The electron code must also be modified so that the file is loaded rather than example.com.
Since electron is running out/electron/index.js, we load index.html to that path. We need to transfer our website from src/website/index.html to out/website/index.html.
Now, add a quick copy command to our build script in package.json:
And a quick npm run start shows off the new content:
It's looking very simple. Let’s add some more code to make it more interactive.
With the end of this code, we have a minimal page skeleton in HTML. Now we can start writing typescript to make it a real interactive application. To make use of the compiled javascript in the out/ folder, our copied html file refers index.js rather than the index.ts we've created.
Building a website with React
React is an extremely powerful framework that allows us to write pure functions, but to >build this application with React using widgets, we will not go too deep in React. So let's start with installing npn.
We need to make tweaks to our build process to get React up and running, such as changing the jsx setting in tsconfig.json to 'react' instead of 'preserve'. We also need to invoke React to update the DOM with the ReactDOM.render(element, contents) method.
Finally, we need to grab type definitions for react and react-dom to provide type-checking and code completion features.
Now, we will pull in the React libraries over the CDN and make a few changes in the code. Here’s how it all looks:
Bundling javascript files together
We must figure out how to ship React alongside our app. We're currently referencing React from an online CDN, but we don't want our desktop application to depend on an internet resource.
We'll also need to find out how to break our app into numerous files that reference each other as it gets more involved.
Webpack will solve these issues. We'll use it for simple tasks for now, but webpack setting is notoriously difficult.
Webpack's main function is to bundle our module references and package our code with React. That module boilerplate typescript converted our import * as React from "react"; calls into? That calls a genuine module system.
Here is how we can add npm modules to get started:
Here in the abode written codes, webpack and webpack-cli provide the build tool. Additionally, we require ts-loader so that it can be integrated with the typescript compiler and added to the build process. Instead of using a hosted CDN, we are now pulling react and react-dom from npm.
Webpack's configuration is done all in one place, unlike some other build tools where we specify a series of steps that source code must go through. This is how our initial webpack configuration looks:
Now, we have to replace the call to tsc in the package.json build script with webpack --config webpack.website.config.js and run it. This gist shows our index.js's enormous size increase. The overall structure and how each library we depend on has been inlined into a module system can be seen without understanding every line. The file contains our compiled index.tsx at the bottom.
The above Webpack setup produces the website side of the application. Because the electron process runs in a node and the website process runs in a browser environment, several features, like the module system, will be different, so we require unique configurations for each. Electron configuration:
Most of the content is above code, just like the previous one. However, the main difference strikes in the target : 'electron-main' and node: { __dirname: false } lines.
The former affects some module loading settings; for instance, our electron import in src/electron/index.ts is converted into a regular node require("electron") call rather than being handled directly by webpack, and electron itself is not inlined into the bundle. The latter is necessary to make loading our local index.html work.
We can also ask webpack to copy the index.html file for us since it is currently only handling our typescript code. We could just use a straightforward file copy plugin. However the html-webpack-plugin can make webpack perform a little bit more intelligently. We add the following to our config after using npm to install the plugin:
Now that webpack has been installed, it will actually read our index.html file, add a script tag that calls the webpack entry point, and then write it to the output folder. As a result, when writing the HTML, we don't need to be aware of the entry point's name, nor do we need to add a copy step to our npm build script.
Additionally, webpack supports the --watch parameter, so our build:watch script continues to function as normal.
This is now our screen will look like after all the above coding
In the previous blog, Building an Electron App from Scratch (Part 1), we learned about Electron, starting with npm, creating a browser window, and adding Typescript. Now its time to move on to building a real desktop application. In this blog, we will learn to create an app website, add React, and bundle it with Webpack.
We will start with a simple HTML code and make it more complicated as we go.
The electron code must also be modified so that the file is loaded rather than example.com.
Since the electron is running out/electron/index.js, we load index.html to that path. We need to transfer our website from src/website/index.html to out/website/index.html.
Now, add a quick copy command to our build script in package.json:
And a quick npm run start shows off the new content:
It looks very simple. Let’s add some more code to make it more interactive.
With the end of this code, we have a minimal page skeleton in HTML. Now we can start writing typescript to make it a real interactive application. To make use of the compiled javascript in the out/ folder, our copied html file refers to index.js rather than the index.ts we've created.
Building a website with React
React is an extremely powerful framework that allows us to write pure functions, but to build this application, we will not go too deep in React. So lets start with installing npn.
We need to make tweaks to our build process to get React up and running, such as changing the jsx setting in tsconfig.json to 'react' instead of 'preserve'. We also need to invoke React to update the DOM with the ReactDOM.render(element, contents) method. Finally, we need to grab type definitions for react and react-dom to provide type-checking and code completion features.
Now, we will pull in the React libraries over the CDN and make a few changes in the code. Here’s how it all looks:
Bundling javascript files together
We must figure out how to ship React alongside our app. We're currently referencing React from an online CDN, but we don't want our desktop application to depend on an internet resource.
We'll also need to find out how to break our app into numerous files that reference each other as it gets more involved.
Webpack will solve these issues. We'll use it for simple tasks for now, but webpack setting is notoriously difficult.
Webpack's main function is to bundle our module references and package our code with React. That module boilerplate typescript converted our import * as React from "react"; calls into? That is called a genuine module system.
Here is how we can add npm modules to get started:
Here in the abode written codes, webpack and webpack-cli provide the build tool.
Additionally, we require a ts-loader so that it can be integrated with the typescript compiler and added to the build process. Instead of using a hosted CDN, we are now pulling react and react-dom from npm.
Webpack's configuration is done all in one place, unlike some other build tools where we specify a series of steps that the source code must go through. This is how our initial webpack configuration looks:
Now, we have to replace the call to tsc in the package.json build script with webpack --config webpack.website.config.js and run it. This gist shows our index.js's enormous size increase. The overall structure and how each library we depend on has been inlined into a module system can be seen without understanding every line. The file contains our compiled index.tsx at the bottom.
The above Webpack setup produces the website side of the application. Because the electron process runs in a node and the website process runs in a browser environment, several features, like the module system, will be different, so we require unique configurations for each. Electron configuration:
Most of the content is above code, just like the previous one. However, the main difference strikes in the target : 'electron-main' and node: { __dirname: false } lines.
The former affects some module loading settings; for instance, our electron import in src/electron/index.ts is converted into a regular node require("electron") call rather than being handled directly by webpack, and electron itself is not inlined into the bundle. The latter is necessary to make loading our local index.html work.
We can also ask webpack to copy the index.html file for us since it is currently only handling our typescript code. We could just use a straightforward file copy plugin. However, the html-webpack-plugin can make webpack perform a little bit more intelligently. We add the following to our config after using npm to install the plugin:
Now that webpack has been installed, it will actually read our index.html file, add a script tag that calls the webpack entry point, and then write it to the output folder. As a result, when writing the HTML, we don't need to be aware of the entry point's name, nor do we need to add a copy step to our npm build script.
Additionally, webpack supports the --watch parameter, so our build:watch script continues to function as normal.
This is now our screen will look like after all the above coding