oliverschwendener / electron-fluent-ui

Template for developing Electron applications using TypeScript and Fluent UI React components

Electron + Fluent UI React

This is a repo to quickly start the development of an electron application with Fluent UI React.

Development

• Install dependencies

  $ npm install
  

• Run app in dev mode

  $ npm run dev
  

• Lint files

  $ npm run lint
  

• Perform typecheck

  $ npm run typecheck
  

• Run tests

  $ npm run test
  

• Build and package app

  $ npm run build && npm run package
  

electron-fluent-ui's Issues

Can't Import any component from Electron

When I import { desktopCapturer } from "electron";
and use it like this:
desktopCapturer.getSources({ types: ['window', 'screen'] })
Uncaught ReferenceError: __dirname is not defined

[Feature Request] - Turn this into a starter template

Describe the solution you'd like
The ability to run either npm || npx create-electron-fluent-ui, very similar to how you can run npm create-react-app my-app

Describe alternatives you've considered
Copy the repo, make adjustments

Additional context
Interesting article on in Build a starter Template

Completely white background until window is resized

This seems to be an issue both in the release template executable, as well when running a clean install with "npm run dev", or in a built project packaged using a clean install of this project. The background stays completely white, ignoring the "backgroundMaterial: 'mica' or 'acryllic' attributes set on window creation. I have tried my best to find a fix for this issue, to no avail. I have replicated this issue on another machine running Windows 11 as well. Setting "frame: false" fixes the issue, although for most purposes having "frame: true" is important. Also launching the app on a secondary screen seems to fix the issue, for some reason. Although this isn't either a suitable solution to the problem. Doing something like "window.resizeBy(790,680);" works too, but again, not ideal.