maxstue / vite-reactts-electron-starter Goto Github PK

Hello,

Thank you so much for putting this template together. I am new to Electron and this has been super helpful in getting up to speed.

I noticed that auto-reload is very easy on the Renderer process, but I have to restart "yarn dev" everytime I make changes to code in the electron/ folder (index.ts and preload.ts). Is there any way to have these files auto-compile into JS and auto-reload every time I save the files? If this is not possible, what command can I run in a separate terminal while having to "CTRL+C and yarn dev"? Can I use nodemon to handle this?

Thanks in advance

Love your work!

How I can buy you a coffee?
Maybe Github sponsorship?

As the title, I love the idea of this repo since I couldn't find an easier way to initialize a project, but the packages will quickly get outdated. I'm a bit of a newb, so not sure if this would work, but what if you left the package versions open using "*"?

Thanks again!
I just installed them all myself so they would install to the highest version.

I'm using a new version at the moment

    "electron": "^11.3.0",
    "electron-builder": "^22.9.1",
    "esbuild": "^0.8.53",
    "typescript": "^4.1.2",
    "vite": "^2.0.4",

etc

my App.tsx looks like this

import type * as React from 'react'

import { ipcRenderer } from 'electron'
import { useEffect } from 'react'

function App() {
  useEffect(() => {
    ipcRenderer.send('test', 'test') // here
  }, [])

  return (
    <div tw="h-screen w-screen flex flex-col pt-12">
      <div>Test</div>
    </div>
  )
}

export default App

If i run yarn dev on this, it doesn't render anything, but starts up. No terminal or dev-tools console errors. If I comment out ipcRenderer.send line, then it renders. I've made sure I have a corresponding event in Main, with no difference. What am I missing? This should work, right?

...Edit1

Actually, there are a couple errors:

client:188 ReferenceError: __dirname is not defined
    at index.js:4
    at chunk.2VCUNPV2.js?v=6b15f8ee:4
    at dep:electron:1

...

client:190 [hmr] Failed to reload /App.tsx. This could be due to syntax errors or importing non-existent modules. (see errors above)

...Edit 2

Seems I can get it to work by changing the import in App.tsx to const { ipcRenderer } = window.require('electron')

and

windowOptions.webPreferences.contextIsolation to false, in index.ts

But, I have to imagine something about both of these changes is maybe not ideal? I would be happy for a better or alternative pattern.
... unless this is fine? I don't know electron extremely well. Please advise

sometime after building the project the assets are not working properly

Hello,

I have an issue in the production build.
My assets are well build by vite. But the files are not available in my electron build. Below a screenshot:

Any idea how to fix this issue and have the assets available in production build?
Thanks

To support multiple package managers, because everyone has other preferences, there should be a solution to support the main three package managers:

• npm
• yarn
• pnpm

ACs

• Make it more clear in the docs what the package manager is on the main branch and how to switch to a different manager
• is there a better solution than having multiple branches for mupltiple managers ?

Out of the box the .env file does not load anything through import.meta.env. Pre-existing env vars and any newly added ones are just undefined.

Hello,
I am having troubles distributing the electron app with your template. Even though the files include the out folder, the js files produced by vite are not included in the executable of the electron app. It uses my local files. If I delete these files, the application cannot load the js files. And if I use a CI/CD to build the app I cannot use the application. Any idea how to fix it? I found the electron-builder do difficult to understand.
Thanks in advance for this template anyway. I found it very useful

Could you add eslint + prettier?

I cloned the repo and installed the stuff. It works nice, but while browsing the files I found some issue:

Type '{ auto: true; exclude: string[]; }' is not assignable to type 'DepOptimizationOptions'.
  Object literal may only specify known properties, and 'auto' does not exist in type 'DepOptimizationOptions'.ts(2322)
index.d.ts(1770, 5): The expected type comes from property 'optimizeDeps' which is declared here on type 'UserConfig'

I checked the index.d.ts (vite/dist/node/index.d.ts) and it looks like:

export declare interface DepOptimizationOptions {
    /**
     * By default, Vite will crawl your index.html to detect dependencies that
     * need to be pre-bundled. If build.rollupOptions.input is specified, Vite
     * will crawl those entry points instead.
     *
     * If neither of these fit your needs, you can specify custom entries using
     * this option - the value should be a fast-glob pattern or array of patterns
     * (https://github.com/mrmlnc/fast-glob#basic-syntax) that are relative from
     * vite project root. This will overwrite default entries inference.
     */
    entries?: string | string[];
    /**
     * Force optimize listed dependencies (must be resolvable import paths,
     * cannot be globs).
     */
    include?: string[];
    /**
     * Do not optimize these dependencies (must be resolvable import paths,
     * cannot be globs).
     */
    exclude?: string[];
    /**
     * Options to pass to esbuild during the dep scanning and optimization
     *
     * Certain options are omitted since changing them would not be compatible
     * with Vite's dep optimization.
     *
     * - `external` is also omitted, use Vite's `optimizeDeps.exclude` option
     * - `plugins` are merged with Vite's dep plugin
     * - `keepNames` takes precedence over the deprecated `optimizeDeps.keepNames`
     *
     * https://esbuild.github.io/api
     */
    esbuildOptions?: Omit<BuildOptions_2, 'bundle' | 'entryPoints' | 'external' | 'write' | 'watch' | 'outdir' | 'outfile' | 'outbase' | 'outExtension' | 'metafile'>;
    /**
     * @deprecated use `esbuildOptions.keepNames`
     */
    keepNames?: boolean;
}

I believe it's [email protected]. Please note, the app runs okay, it's just this annoying error listed :/

Hello! Thank you for your wonderful template.
I'm making great use of them for learning and development.

In the current ignorePattern, the default build destination src/out/ is not added, so lint is taking a long time to run.
Is there something I'm unaware of, like an intention?
If not, I am going to create a PR for what I have added.

Hi, i tried using custom-electron-titlebar with your starter to change title bar color but not working. Then, only displaying the white blank view. Do you have another way to do this?

How should I communicate with electron??
Below code is giving Uncaught ReferenceError: global is not defined

function App() {
	const sendMessageToElectron = () => {
		global.ipcRenderer.send('message', 'Hello World');
	};
	return (
		<div className=' flex flex-col justify-center items-center h-screen bg-gray-800 space-y-4'>
			<button
				className='bg-yellow-400 py-2 px-4 rounded focus:outline-none shadow hover:bg-yellow-200'
				onClick={sendMessageToElectron}>
				Click Me
			</button>
		</div>
	);
}

After the yarn dependency is complete, execute yarn dev, and the script reports an error

yarn dev

`Yarn run v1.22.10

$ concurrently "SET BROWSER=none && yarn dev:vite" " yarn dev:electron

/bin/sh: -c: line 0: unexpected EOF while looking for matching `"'

/bin/sh: -c: line 1: syntax error: unexpected end of file

error Command failed with exit code 2.`

Solution:
"dev": "concurrently "yarn dev:vite" " yarn dev:electron"",

Add a custom/frameless Window Appbar.

I just tried this out and it worked on the browser but it shows a bunch of errors on the electron app itself.

electron-is-dev is provided as a dev dependency and therefore is not bundled when using npm run dist, however it is used as a dependency in main, hence it raises an exception.

Hey, thx for creating this awesome boilerplate. Currently I'm facing an issue while packaging the app. After packaging the app with npm run dist I tried to open the .exe inside the win-unpacked folder and all it shows is a blank white page. So I did some debugging and went to the out folder inside ./src and opened the index.html file in the browser. This is where I see this error:

index.html

Access to script at 'file:///D:/Repos/< appname >/src/out/assets/index.44eb8550.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, ipns, https, chrome-untrusted, ipfs, data, chrome-extension, chrome.

index.44eb8550.js

Failed to load resource: net::ERR_FAILED

index.html

Access to script at 'file:///D:/Repos/< appname >/src/out/assets/vendor.efff610f.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, ipns, https, chrome-untrusted, ipfs, data, chrome-extension, chrome.

vendor.efff610f.js

Failed to load resource: net::ERR_FAILED

The thing that baffles me is that a few days ago I was working on another project using this same template and after packaging it, everything worked perfectly. So I opened the compiled index.html of that project in the browser and the same errors as before occur BUT when I open the Electron App, everything works as expected.

So if anyone could help me out, it would be greatly appreciated. I don't know if the source code is required but if it is I would be happy to post it :)

All pacakges should be upgraded to the newest version