Nextron

Next.js + Electron

Desktop app framework Next.js

saltyshiomix/nextron nextron

README

nextron

Support

Nextron vs Next.js

nextron	next
---------------	------------------
`v9.x`	`v13.x`
`v8.x`	`v12.x`
`v7.x`	`v11.x`
`v6.x`	`v10.x`
`v5.x`	`v9.x`
`v4.x`	`v8.x`
`v2.x`	`v7.x`
`v1.x`	`v6.x`

Package Manager

npm, yarn and pnpm are supported.

My Belief for Nextron

1. Show a way of developing desktop apps with only web knowledge

1. Easy to use

1. Be transparent and open to OSS developers

Usage

Create Application with Template

We can use examples/* as a template.

To create the examples/with-tailwindcss, run the command below:

```
# with npx
$ npx create-nextron-app MY_APP --example with-tailwindcss
# with yarn
$ yarn create nextron-app MY_APP --example with-tailwindcss
# with pnpm
$ pnpm dlx create-nextron-app MY_APP --example with-tailwindcss
```

Run Electron with Development Mode

Run npm run dev, and nextron automatically launches an electron app.

```json
{
"scripts": {
"dev": "nextron"
}
}
```

Production Build

Run npm run build, and nextron outputs packaged bundles under the dist folder.

```json
{
"scripts": {
"build": "nextron build"
}
}
```

nextron or nextron dev Options

--renderer-port (default: 8888)

It specifies next dev server port:

```json
{
"scripts": {
"dev": "nextron --renderer-port 7777"
}
}
```

--run-only (default: undefined)

It suppresses hot reloading of the main process:

```json
{
"scripts": {
"dev": "nextron --run-only"
}
}
```

--startup-delay (default: 0)

It waits until renderer process is ready (milliseconds):

```json
{
"scripts": {
"dev": "nextron --startup-delay 3000"
}
}
```

--electron-options (default: undefined)

We can pass electron args via --electron-options:

```json
{
"scripts": {
"dev": "nextron --electron-options=\"--no-sandbox\"
}
}
```

nextron build Options

NOTE:

- To build macOS binary, your host machine must be macOS!

- Please consider to use electron-builder.yml instead of these CLI options.

- Command Line Interface (CLI) - electron-builder

- Common Configuration - electron-builder

To build Windows 32 bit version, run npm run build:win32 like below:

```json
{
"scripts": {
"build": "nextron build",
"build:mac": "nextron build --mac",
"build:mac:universal": "nextron build --mac --universal",
"build:linux": "nextron build --linux",
"build:win32": "nextron build --win --ia32",
"build:win64": "nextron build --win --x64"
}
}
```

--config (default: ./electron-builder.yml)

```json
{
"scripts": {
"build": "nextron build --config ./configs/electron-builder.prod.yml"
}
}
```

--publish (default: undefined)

Note

Highly recommend to use electron-builder.yml:

https://www.electron.build/configuration/publish

--no-pack (default: undefined)

This option skips packaging by electron-builder:

```json
{
"scripts": {
"build": "nextron build --no-pack"
}
}
```

Build Configuration: electron-builder.yml

Edit electron-builder.yml for custom build configurations:

```yml
appId: com.example.nextron
productName: My Nextron App
directories:
output: dist
buildResources: resources
files:
- from: .
filter:
- package.json
- app
publish: null # see https://www.electron.build/configuration/publish
```

For more information, please check out electron-builder official configuration documents.

Custom Config: nextron.config.js

```js
module.exports = {
// specify an alternate main src directory, defaults to 'main'
mainSrcDir: 'main',
// specify an alternate renderer src directory, defaults to 'renderer'
rendererSrcDir: 'renderer',
// main process' webpack config
webpack: (config, env) => {
// do some stuff here
return config
},
}
```

Custom Babel Config for Main Process

We can extends the default babel config of main process by putting .babelrc in our project root like this:

.babelrc:

```json
{
"presets": ["nextron/babel"]
}
```

Examples

See examples folder for more information.

```
# with npx
$ npx create-nextron-app my-app --example basic-lang-javascript
# with yarn
$ yarn create nextron-app my-app --example basic-lang-javascript
# with pnpm
$ pnpm dlx create-nextron-app my-app --example basic-lang-javascript
```

examples/basic-lang-typescript

```
# with npx
$ npx create-nextron-app my-app --example basic-lang-typescript
# with yarn
$ yarn create nextron-app my-app --example basic-lang-typescript
# with pnpm
$ pnpm dlx create-nextron-app my-app --example basic-lang-typescript
```

examples/basic-launch-app-from-url

This example shows how to open your app from browser URL.

Note: this example works only production build!

```
# with npx
$ npx create-nextron-app my-app --example basic-launch-app-from-url
# with yarn
$ yarn create nextron-app my-app --example basic-launch-app-from-url
# with pnpm
$ pnpm dlx create-nextron-app my-app --example basic-launch-app-from-url
# --------------------------------------------------------------
# Production build
$ yarn build (or `npm run build` or `pnpm run build`)
```

After production build, open your-custom-protocol://open?token=jwt-value in your browser, then the app will be shown like a magic!

If you want to change schema URL, please edit electron-builder.yml#protocols:

```yml
protocols:
name: Your App Name
schemes: [your-custom-protocol-edited]
```

Then, you can see the app from URL: your-custom-protocol-edited://any-uri-here?data=include-any-data.