1603738080
Electron
+ vue3
+ vite
Integration
vue@3.x
Released, want to try new featuresumi
+ electron
projects big, start-up speed is not ideal; with the vite
try count a reserve program ^ _ ^踩坑记
// vite.config.ts -> rollupInputOptions -> plugins
plugins: [
{
name: '@rollup/plugin-cjs2esm',
transform(code, filename) {
if (filename.includes('/node_modules/')) {
return code
}
const cjsRegexp = /(const|let|var)[\n\s]+(\w+)[\n\s]*=[\n\s]*require\(["|'](.+)["|']\)/g
const res = code.match(cjsRegexp)
if (res) {
// const Store = require('electron-store') -> import Store from 'electron-store'
code = code.replace(cjsRegexp, `import $2 from '$3'`)
}
return code
},
}
],
Author: caoxiemeihao
Source Code: https://github.com/caoxiemeihao/electron-vue-vite
#vuejs #vue #javascript
1656586800
This template is used to build vite + electron + nestjs projects. Build whit esbuild, crazy fast!
NOTE: Main process is built with esbuild. After some modifications, it currently supports emitDecoratorMetadata
.
This is a template based on my repo: fast-vite-electron. In the main process, I integrated nestjs. In the main process, you can build your code just as you would write a nestjs backend. Desktop clients built from this template can quickly split the electron when you need to switch to B/S.
# install dependencies
yarn # npm install
# run in developer mode
yarn dev # npm run dev
# build
yarn build # npm run build
In order to use with pnpm
, you'll need to adjust your .npmrc
to use any one the following approaches in order for your dependencies to be bundled correctly (ref: #6389):
node-linker=hoisted
public-hoist-pattern=*
shamefully-hoist=true
My blog post:
Author: ArcherGu
Source code: https://github.com/ArcherGu/fast-vite-nestjs-electron
License: MIT license
1594580460
This electronic foosball goal system will make score markers a thing of the past
Like most of us, Joey Cumeras Khan has been stuck inside for the last couple of months. As a foosball fan, this not only meant plenty of time to play with his fellow housemates but also the perfect opportunity to tech out his table with an automated scoring system.
Khan’s setup works by tracking goals via an LED and LDR pair situated in each player’s scoring tray. When a ball drops into the net, the score state is picked up by the sensor as a lack of light, thus signaling the controlling Arduino Nano that a goal has been made. This info is sent to an Orange Pi Zero, which runs a web app to display the current score on both players’ phones.
To get started, one simply has to scan a QR code on the side of the table. This prompts the scoreboard along with some custom sounds and a reset interface to enhance your game experience!
#arduino #nano #electron #electronic
1656576000
This template is used to build vite + electron projects.
NOTE: Main process is built with esbuild. After some modifications, it currently supports emitDecoratorMetadata
.
In the past, I've been building desktop clients with vue + vue-cli-plugin-electron-builder, and they work very well. But as the project volume grows, webpack-based build patterns become slower and slower.
The advent of vite and esbuild greatly improved the development experience and made me feel lightning fast ⚡.
It took me a little time to extract this template and thank you for using it.
# install dependencies
yarn # npm install
# run in developer mode
yarn dev # npm run dev
# build
yarn build # npm run build
In order to use with pnpm
, you'll need to adjust your .npmrc
to use any one the following approaches in order for your dependencies to be bundled correctly (ref: #6389):
node-linker=hoisted
public-hoist-pattern=*
shamefully-hoist=true
My blog post:
Author: ArcherGu
Source code: https://github.com/ArcherGu/fast-vite-electron
License: MIT license
1618401013
Electronic medical records are the digital patient records that medical care providers use to give patients treatments. Many hospitals use electronic medical records to help them handle their patient care easily. EMR software development systems are built into the hospital’s software system and these can be used easily by authorized people only. Hospitals, clinics and other medical care providing centres can gain many benefits from the use of electronic medical records software. These systems are developed to make the lives of healthcare workers much easier and to easily transfer data from anywhere and anytime.
#emr software development #electronic medical records software #electronic medical records development, #ehr software development #electronic health records software #webdevelopment
1594398720
In this article, I’ll share how you can avoid some of the mistakes I made when learning about Electron.js. I hope it helps!
A couple of months back, I decided to focus more on building my side product, taggr. I was inspired to build it because of how many photos I have on my computer.
For those of us that keep a backup of their pictures, those collections often get so big and complex that they become a full-time job to manage. A mix of folders and sub-folders may contain instant messaging picture backups, hi-resolution pictures from your trip to Bali, your uncle’s wedding, or last-year’s bachelor party.
Always keeping such collections tidy is tedious (believe me, I have tried for years). It’s also hardto discover the shots that you love the most, hidden deep within the folders.
So taggris a desktop app that solves that problem. It lets users rediscover their memories while keeping their privacy.
I am building taggr as a cross-platform desktop application. Here I’ll share some of the things I’ve learned about cross-platform app development with Electron.js that I wish I knew from the beginning. Let’s get started!
Before presenting my takeaways on this ongoing journey with Electron, I would like to give a little more background about myself and the requirements of taggr.
Every developer comes from a different background, and so do the requirements of the applications they develop.
Contextualizing the choices I made for this project may help future developers select the right tools based on their needs and expertise (rather than what is hyped out there – GitHub 🌟, I am looking at you).
J
As mentioned earlier, from the beginning I envisioned taggr as a cross-platform application. The app would perform all the required pre-processing and machine-learning computations client-side due to the focus on privacy.
As a one-person show, I wanted to be able to write my app once and ship it to different systems without losing my sanity.
From my side, I am a front end engineer in love with the web and JavaScript. I previously worked with Java and C#, but I enjoy the flexibility that the web provides and its vibrant ecosystem.
Having experienced first hand the pain of using tools like Eclipse RCP to build client-side apps before, I knew I didn’t want to work with that tech again.
In short, my stack requirements for taggr boiled down to something like the following:
As you can see, the requirements do not read as: I should use React with Redux, observables, and WebSockets. Those are lower-level implementation details, and they should be decided upon_ when and if_ the need arises.
Pick the right tool for the job rather than picking a stack from the beginning, disregarding the problems at hand.
So, after furious googling, I decided to give Electron a try. I hadn’t used that framework before, but I knew that many companies were using it successfully in products such as Atom, VS Code, Discord, Signal, Slack and more.
Open-source and with out-of-the-box compatibility with both the the JS and Node ecosystems (Electron is build using Chromium and Node), Electron.js was an attractive tool for the work at hand.
I won’t go too much into detail regarding the rest of the stack, as I repeatedly changed core parts (persistence and view layers) when needed, and it falls out of the scope of this article.
However, I would like to mention Tensorflow.js, which enables running training and deploying ML models directly in the browser (with WebGL) and Node (with C bindings), without installing specific runtimes for ML in the host.
So back to Electron – thinking it was perfect, the fun began.
Enough talk about the background. Let’s dive into the takeaways.
#electron #electron.js