Skip to content

Instantly share code, notes, and snippets.

@PavithMadusara
Last active March 19, 2023 16:01
Show Gist options
  • Save PavithMadusara/cf9b3df12ecbeed6965ae1a75b54c2dc to your computer and use it in GitHub Desktop.
Save PavithMadusara/cf9b3df12ecbeed6965ae1a75b54c2dc to your computer and use it in GitHub Desktop.
Electron Application with Node Serial Port and React

npm create electron-app app-name --template=webpack

Install Node Serial

npm install serialport npm i -D electron-rebuild

Add this to package.json scrips

"install":"electron-rebuild"

run npm install

npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react npm i react react-dom

create .babelrcfile and add

 {"presets": ["@babel/preset-env", "@babel/preset-react"]}

add to the webpack.rules.js

 {
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}

renderer.js

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
console.log('Loaded React.');
ReactDOM.render(<div>Test.</div>, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>

</head>
<body>
<div id="root"></div>
</body>
</html>
@MarkoVcode
Copy link

Hi, thanks for the manual it helped me a lot.
Do you know what changes do i need to make in the webpack config to let serialport to be packed properly.
I got this infamous error:

webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

@Gcunhaa
Copy link

Gcunhaa commented Oct 24, 2022

Hi, thanks for the manual it helped me a lot. Do you know what changes do i need to make in the webpack config to let serialport to be packed properly. I got this infamous error:

webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

Did you find anything useful? Im stuck in this aswell

@kprinssu
Copy link

This is an issue with the Electron Forge webpack template, see electron/forge#2949

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment