remix-electron - GitLite

KO | EN

gitlite — search

#javascript #react #golang #go #android #rust #deep-learning #docker #nodejs #windows #kubernetes #awesome-list #pytorch #openai

remix-electron

(★ 302)

Electron integration for Remix ⚛💿

파일 탐색기

최종 버전 다운로드 (.zip)

- - checks.yml
- - .gitignore
  - package.json
  - tsconfig.json
  - tsup.config.mts
- - .gitignore
  - .npmrc
  - nodemon.json
  - package.json
  - README.md
  - remix.config.js
  - remix.env.d.ts
  - tsconfig.json
- - .gitignore
  - nodemon.json
  - package.json
  - remix.config.js
  - remix.env.d.ts
  - tsconfig.json
- - .gitignore
  - nodemon.json
  - package.json
  - remix.config.js
  - remix.env.d.ts
  - tsconfig.json
- - .gitignore
  - package.json
  - playwright.config.ts
  - tsconfig.json
.gitignore
.npmrc
.prettierignore
.prettierrc.json
biome.json
knip.json
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
screenshot.png
tsconfig.base.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/itsMapleLeaf/remix-electron

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd remix-electron

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i remix-electron electron

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# remix-electron

Electron integration for Remix

![demo screenshot](https://raw.githubusercontent.com/itsMapleLeaf/remix-electron/main/screenshot.png)

## Setup

Use degit to create a new project from the template.

```sh
npx degit itsMapleLeaf/remix-electron/workspaces/template my-desktop-app
```

### Adding to an existing Remix project

Install remix-electron and electron:

```bash
npm i remix-electron electron
```

Add a file at `desktop/index.js` to run the electron app. The `initRemix` function returns a url to load in the browser window.

```ts
// desktop/index.js
const { initRemix } = require("remix-electron")
const { app, BrowserWindow } = require("electron")
const { join } = require("node:path")

/** @type {BrowserWindow | undefined} */
let win

app.on("ready", async () => {
	try {
		const url = await initRemix({
			serverBuild: join(process.cwd(), "build/index.js"),
		})

win = new BrowserWindow({ show: false })
		await win.loadURL(url)
		win.show()
	} catch (error) {
		console.error(error)
	}
})
```

Build the app with `npm run build`, then run `npx electron desktop/index.js` to start the app! 🚀

## Using Electron APIs

Importing `"electron"` directly in route files results in Electron trying to get bundled and called in the browser / renderer process.

To circumvent this, create a `electron.server.ts` file, which re-exports from electron. The `.server` suffix tells Remix to only load it in the main process. You should use `.server` for any code that runs in the main process and uses node/electron APIs.

```ts
// app/electron.server.ts
import electron from "electron"
export default electron
```

```ts
// app/routes/_index.tsx
import electron from "~/electron.server"

export function loader() {
	return {
		userDataPath: electron.app.getPath("userData"),
	}
}
```

Likewise, for any code running in the renderer process, e.g. using the [clipboard](https://www.electronjs.org/docs/latest/api/clipboard) module, you can use the `.client` suffix. Renderer process modules require `nodeIntegration`.

```ts
// desktop/index.js
function createWindow() {
	// ...
	win = new BrowserWindow({
		// ...
		webPreferences: {
			nodeIntegration: true,
		},
	})
}
```

## API

### `async initRemix({ serverBuild[, publicFolder, mode, getLoadContext] })`

Initializes remix-electron. Returns a promise with a url to load in the browser window.

Options:

- `serverBuild`: The path to your server build (e.g. `path.join(process.cwd(), 'build')`), or the server build itself (e.g. required from `@remix-run/dev/server-build`). Updates on refresh are only supported when passing a path string.

- `mode`: The mode the app is running in. Can be `"development"` or `"production"`. Defaults to `"production"` when packaged, otherwise uses `process.env.NODE_ENV`.

- `publicFolder`: The folder where static assets are served from, including your browser build. Defaults to `"public"`. Non-absolute paths are resolved relative to `process.cwd()`.

- `getLoadContext`: Use this to inject some value into all of your remix loaders, e.g. an API client. The loaders receive it as `context`.

- `esm`: Set this to `true` to use remix-electron in an ESM application.

<details>
<summary>Load context TS example</summary>

**app/context.ts**

```ts
import type * as remix from "@remix-run/node"

// your context type
export type LoadContext = {
	secret: string
}

// a custom data function args type to use for loaders/actions
export type DataFunctionArgs = Omit<remix.DataFunctionArgs, "context"> & {
	context: LoadContext
}
```

**desktop/main.js**

```ts
const url = await initRemix({
	// ...

/** @type {import("~/context").LoadContext} */
	getLoadContext: () => ({
		secret: "123",
	}),
})
```

In a route file:

```ts
import type { DataFunctionArgs, LoadContext } from "~/context"

export async function loader({ context }: DataFunctionArgs) {
	// do something with context
}
```

</details>

## Motivation

Electron has [a comprehensive list of security recommendations](https://www.electronjs.org/docs/latest/tutorial/security) to follow when building an app, especially if that app interacts with the web. Which includes, but is not limited to:

- Using `preload.js` files to expose specific electron functionality to your app, via globals
- Using IPC communication
- Avoiding `remote.require` (which has since been removed)

These practices can lead to a lot of awkward boilerplate and splitting up related code across multiple files and domains.

With `remix-electron`, you can freely use Electron APIs in Remix loader functions. It's a Node process with full Node capabilities, with access to the full Electron API, none of which runs in the browser.

The browser only receives data and renders a view. Additionally, you can neatly colocate your main process code right beside the related renderer code in a route file.

Thinking about it another way: it's like a normal Remix web app, except Electron is your backend.