File: README.md

My Belief for Nextron

Show a way of developing desktop apps with only web knowledge
Easy to use
Be transparent and open to OSS developers

Next.js vs Nextron

next	nextron
`v16.x`	`v10.x`
`v14.x` ~ `v16.x`	`v9.x`
`v12.x` ~ `v13.x`	`v8.x`
`v11.x`	`v7.x`
`v10.x`	`v6.x`
`v9.x`	`v5.x`
`v8.x`	`v4.x`
`v7.x`	`v2.x` ~ `v3.x`
`v6.x`	`v1.x`

Nextron v10 - [CHANGELOG](https://github.com/saltyshiomix/nextron/blob/main/CHANGELOG.md)

Migration Guide (Breaking Changes)

Upgrade nextron from v9 to v10
Rename main/background.ts to main/main.ts
Rename package.json#main field to app/main.js

That's it!

ESM Support

package.json
- Set package.json#type to module
next.config.js
- Use export default instead of module.exports
Codebase
- Replace __dirname to import.meta.dirname

Usage

Create Application with Templates

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"
  }
}

Directory Structures

text

.
├── main
│   ├── app.ts
│   └── preload.ts
├── renderer
│   ├── next.config.ts
│   ├── pages
│   │   ├── home.tsx
│   │   └── next.tsx
│   ├── preload.d.ts
│   ├── public
│   │   └── images
│   │       └── logo.png
│   └── tsconfig.json
├── resources
│   ├── icon.icns
│   └── icon.ico
├── nextron.config.ts
├── electron-builder.yml
├── package.json
└── tsconfig.json

`next.config.ts`

// `./renderer/next.config.ts`

import { NextConfig } from 'next'

const config: NextConfig = {
  // we need to export static files so as Electron can handle them
  output: 'export',

  distDir:
    process.env.NODE_ENV === 'production'
      ? // we want to change `distDir` to "../app" so as nextron can build the app in production mode!
        '../app'
      : // default `distDir` value
        '.next',

  // e.g. home.html => home/index.html
  trailingSlash: true,

  // we need to disable image optimization, because it is not compatible with `{ output: 'export' }`
  images: {
    unoptimized: true,
  },
}

export default config

`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

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
copyright: Copyright © 2020 Yoshihide Shiono
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 Webpack Config for Main Process: `nextron.config.ts`

import { NextronConfig } from 'nextron'

const config: NextronConfig = {
  // 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
  },
}

export default config

Examples

[examples/basic-lang-javascript](./examples/basic-lang-javascript)

# 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](./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](./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.

[examples/basic-store-data](./examples/basic-store-data)

# with npx
npx create-nextron-app my-app --example basic-store-data

# with yarn
yarn create nextron-app my-app --example basic-store-data

# with pnpm
pnpm dlx create-nextron-app my-app --example basic-store-data

[examples/custom-build-options](./examples/custom-build-options)

# with npx
npx create-nextron-app my-app --example custom-build-options

# with yarn
yarn create nextron-app my-app --example custom-build-options

# with pnpm
pnpm dlx create-nextron-app my-app --example custom-build-options

[examples/custom-renderer-port](./examples/custom-renderer-port)

# with npx
npx create-nextron-app my-app --example custom-renderer-port

# with yarn
yarn create nextron-app my-app --example custom-renderer-port

# with pnpm
pnpm dlx create-nextron-app my-app --example custom-renderer-port

[examples/with-ant-design](./examples/with-ant-design)

# with npx
npx create-nextron-app my-app --example with-ant-design

# with yarn
yarn create nextron-app my-app --example with-ant-design

# with pnpm
pnpm dlx create-nextron-app my-app --example with-ant-design

[examples/with-chakra-ui](./examples/with-chakra-ui)

# with npx
npx create-nextron-app my-app --example with-chakra-ui

# with yarn
yarn create nextron-app my-app --example with-chakra-ui

# with pnpm
pnpm dlx create-nextron-app my-app --example with-chakra-ui

[examples/with-emotion](./examples/with-emotion)

# with npx
npx create-nextron-app my-app --example with-emotion

# with yarn
yarn create nextron-app my-app --example with-emotion

# with pnpm
pnpm dlx create-nextron-app my-app --example with-emotion

[examples/with-material-ui](./examples/with-material-ui)

# with npx
npx create-nextron-app my-app --example with-material-ui

# with yarn
yarn create nextron-app my-app --example with-material-ui

# with pnpm
pnpm dlx create-nextron-app my-app --example with-material-ui

[examples/with-next-i18next](./examples/with-next-i18next)

# with npx
npx create-nextron-app my-app --example with-next-i18next

# with yarn
yarn create nextron-app my-app --example with-next-i18next

# with pnpm
pnpm dlx create-nextron-app my-app --example with-next-i18next

[examples/with-tailwindcss](./examples/with-tailwindcss)

# 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

Develop

Basic

git clone https://github.com/saltyshiomix/nextron.git
cd nextron
pnpm install
npx lefthook install
pnpm dev # default is examples/basic-lang-javascript

Developing `examples/*`

pnpm dev <EXAMPLE-FOLDER-NAME>

Developing for your own project

Install development version of nextron

cd nextron
npm install
npm run build
npm link

Install linked nextron in your project

cd your-project
npm link nextron

On every change in nextron, run npm run build in nextron folder and restart your project

Maintainers ⚡

For more information, please see Looking for maintainers ⚡ #244.

Community

You already create apps with nextron? Feel free to share your apps or services: Made by nextron? #406

create-nextron-app - Create Nextron (Next.js + Electron) apps in one command ⚡

License

This project is licensed under the terms of the MIT license.

File: examples/with-tailwindcss/README.md

Usage

Create an App

text

# 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

Install Dependencies

text

$ cd my-app

# with npm
$ npm install

# with yarn
$ yarn install

# with pnpm
$ pnpm install

Use it

text

# development mode
$ npm run dev (or `yarn dev` or `pnpm run dev`)

# production build
$ npm run build (or `yarn build` or `pnpm run build`)

File: examples/with-next-i18next/README.md

Usage

Create an App

text

# with npx
$ npx create-nextron-app my-app --example with-next-i18next

# with yarn
$ yarn create nextron-app my-app --example with-next-i18next

# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-next-i18next

Install Dependencies

text

$ cd my-app

# with npm
$ npm install

# with yarn
$ yarn install

# with pnpm
$ pnpm install

Use it

text

# development mode
$ npm run dev (or `yarn dev` or `pnpm run dev`)

# production build
$ npm run build (or `yarn build` or `pnpm run build`)

File: examples/with-material-ui/README.md

Usage

Create an App

text

# with npx
$ npx create-nextron-app my-app --example with-material-ui

# with yarn
$ yarn create nextron-app my-app --example with-material-ui

# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-material-ui

Install Dependencies

text

$ cd my-app

# with npm
$ npm install

# with yarn
$ yarn install

# with pnpm
$ pnpm install

Use it

text

# development mode
$ npm run dev (or `yarn dev` or `pnpm run dev`)

# production build
$ npm run build (or `yarn build` or `pnpm run build`)

File: examples/with-emotion/README.md

Usage

Create an App

text

# with npx
$ npx create-nextron-app my-app --example with-emotion

# with yarn
$ yarn create nextron-app my-app --example with-emotion

# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-emotion

Install Dependencies

text

$ cd my-app

# with npm
$ npm install

# with yarn
$ yarn install

# with pnpm
$ pnpm install

Use it

text

# development mode
$ npm run dev (or `yarn dev` or `pnpm run dev`)

# production build
$ npm run build (or `yarn build` or `pnpm run build`)

File: examples/with-chakra-ui/README.md

Usage

Create an App

text

# with npx
$ npx create-nextron-app my-app --example with-chakra-ui

# with yarn
$ yarn create nextron-app my-app --example with-chakra-ui

# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-chakra-ui

Install Dependencies

text

$ cd my-app

# with npm
$ npm install

# with yarn
$ yarn install

# with pnpm
$ pnpm install

Use it

text

# development mode
$ npm run dev (or `yarn dev` or `pnpm run dev`)

# production build
$ npm run build (or `yarn build` or `pnpm run build`)

File: examples/with-ant-design/README.md

Usage

Create an App

text

# with npx
$ npx create-nextron-app my-app --example with-ant-design

# with yarn
$ yarn create nextron-app my-app --example with-ant-design

# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-ant-design

Install Dependencies

text

$ cd my-app

# with npm
$ npm install

# with yarn
$ yarn install

# with pnpm
$ pnpm install

Use it

text

# development mode
$ npm run dev (or `yarn dev` or `pnpm run dev`)

# production build
$ npm run build (or `yarn build` or `pnpm run build`)

Resources

https://ant.design

File: examples/custom-renderer-port/README.md

Usage

Create an App

text

# with npx
$ npx create-nextron-app my-app --example custom-renderer-port

# with yarn
$ yarn create nextron-app my-app --example custom-renderer-port

# with pnpm
$ pnpm dlx create-nextron-app my-app --example custom-renderer-port

Install Dependencies

text

$ cd my-app

# with npm
$ npm install

# with yarn
$ yarn install

# with pnpm
$ pnpm install

Use it

text

# development mode
$ npm run dev (or `yarn dev` or `pnpm run dev`)

# production build
$ npm run build (or `yarn build` or `pnpm run build`)

File: examples/custom-build-options/README.md

Usage

Create an App

text

# with npx
$ npx create-nextron-app my-app --example custom-build-options

# with yarn
$ yarn create nextron-app my-app --example custom-build-options

# with pnpm
$ pnpm dlx create-nextron-app my-app --example custom-build-options

Install Dependencies

text

$ cd my-app

# with npm
$ npm install

# with yarn
$ yarn install

# with pnpm
$ pnpm install

Use it

text

# development mode
$ npm run dev (or `yarn dev` or `pnpm run dev`)

# production build
$ npm run build (or `yarn build` or `pnpm run build`)

File: examples/basic-store-data/README.md

Usage

Create an App

text

# with npx
$ npx create-nextron-app my-app --example basic-store-data

# with yarn
$ yarn create nextron-app my-app --example basic-store-data

# with pnpm
$ pnpm dlx create-nextron-app my-app --example basic-store-data

Install Dependencies

text

$ cd my-app

# with npm
$ npm install

# with yarn
$ yarn install

# with pnpm
$ pnpm install

Use it

text

# development mode
$ npm run dev (or `yarn dev` or `pnpm run dev`)

# production build
$ npm run build (or `yarn build` or `pnpm run build`)

File: README.md Copy Chapter

My Belief for Nextron Copy Chapter

Next.js vs Nextron Copy Chapter

Nextron v10 - [CHANGELOG](https://github.com/saltyshiomix/nextron/blob/main/CHANGELOG.md) Copy Chapter

Migration Guide (Breaking Changes) Copy Section

ESM Support Copy Section

Usage Copy Chapter

Create Application with Templates Copy Section

Run Electron with Development Mode Copy Section

Production Build Copy Section

Directory Structures Copy Chapter

`next.config.ts` Copy Chapter

`nextron` or `nextron dev` Options Copy Chapter

`--renderer-port` (default: `8888`) Copy Section

`--run-only` (default: `undefined`) Copy Section

`--startup-delay` (default: `0`) Copy Section

`--electron-options` (default: `undefined`) Copy Section

`nextron build` Options Copy Chapter

`--config` (default: `./electron-builder.yml`) Copy Section

`--publish` (default: `undefined`) Copy Section

`--no-pack` (default: `undefined`) Copy Section

Build Configuration: `electron-builder.yml` Copy Section

Custom Webpack Config for Main Process: `nextron.config.ts` Copy Chapter

Examples Copy Chapter

[examples/basic-lang-javascript](./examples/basic-lang-javascript) Copy Section

[examples/basic-lang-typescript](./examples/basic-lang-typescript) Copy Section

[examples/basic-launch-app-from-url](./examples/basic-launch-app-from-url) Copy Section

[examples/basic-store-data](./examples/basic-store-data) Copy Section

[examples/custom-build-options](./examples/custom-build-options) Copy Section

[examples/custom-renderer-port](./examples/custom-renderer-port) Copy Section

[examples/with-ant-design](./examples/with-ant-design) Copy Section

[examples/with-chakra-ui](./examples/with-chakra-ui) Copy Section

[examples/with-emotion](./examples/with-emotion) Copy Section

[examples/with-material-ui](./examples/with-material-ui) Copy Section

[examples/with-next-i18next](./examples/with-next-i18next) Copy Section

[examples/with-tailwindcss](./examples/with-tailwindcss) Copy Section

Develop Copy Chapter

Basic Copy Section

Developing `examples/*` Copy Section

Developing for your own project Copy Section

Maintainers ⚡ Copy Chapter

Community Copy Chapter

Related Copy Chapter

License Copy Chapter

File: examples/with-tailwindcss/README.md Copy Chapter

Usage Copy Chapter

Create an App Copy Section

Install Dependencies Copy Section

Use it Copy Section

File: examples/with-next-i18next/README.md Copy Chapter

Usage Copy Chapter

Create an App Copy Section

Install Dependencies Copy Section

Use it Copy Section

File: examples/with-material-ui/README.md Copy Chapter

Usage Copy Chapter

Create an App Copy Section

Install Dependencies Copy Section

Use it Copy Section

File: examples/with-emotion/README.md Copy Chapter

Usage Copy Chapter

Create an App Copy Section

Install Dependencies Copy Section

Use it Copy Section

File: examples/with-chakra-ui/README.md Copy Chapter

Usage Copy Chapter

Create an App Copy Section

Install Dependencies Copy Section

Use it Copy Section

File: examples/with-ant-design/README.md Copy Chapter

Usage Copy Chapter

Create an App Copy Section

Install Dependencies Copy Section

Use it Copy Section

Resources Copy Chapter

File: examples/custom-renderer-port/README.md Copy Chapter

Usage Copy Chapter

Create an App Copy Section

Install Dependencies Copy Section

Use it Copy Section

File: README.md

My Belief for Nextron

Next.js vs Nextron

Nextron v10 - [CHANGELOG](https://github.com/saltyshiomix/nextron/blob/main/CHANGELOG.md)

Migration Guide (Breaking Changes)

ESM Support

Usage

Create Application with Templates

Run Electron with Development Mode

Production Build

Directory Structures

`next.config.ts`

`nextron` or `nextron dev` Options

`--renderer-port` (default: `8888`)

`--run-only` (default: `undefined`)

`--startup-delay` (default: `0`)

`--electron-options` (default: `undefined`)

`nextron build` Options

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

`--publish` (default: `undefined`)

`--no-pack` (default: `undefined`)

Build Configuration: `electron-builder.yml`

Custom Webpack Config for Main Process: `nextron.config.ts`

Examples

[examples/basic-lang-javascript](./examples/basic-lang-javascript)

[examples/basic-lang-typescript](./examples/basic-lang-typescript)

[examples/basic-launch-app-from-url](./examples/basic-launch-app-from-url)

[examples/basic-store-data](./examples/basic-store-data)

[examples/custom-build-options](./examples/custom-build-options)

[examples/custom-renderer-port](./examples/custom-renderer-port)

[examples/with-ant-design](./examples/with-ant-design)

[examples/with-chakra-ui](./examples/with-chakra-ui)

[examples/with-emotion](./examples/with-emotion)

[examples/with-material-ui](./examples/with-material-ui)

[examples/with-next-i18next](./examples/with-next-i18next)

[examples/with-tailwindcss](./examples/with-tailwindcss)

Develop

Basic

Developing `examples/*`

Developing for your own project

Maintainers ⚡

Community

Related

License

File: examples/with-tailwindcss/README.md

Usage

Create an App

Install Dependencies

Use it

File: examples/with-next-i18next/README.md

Usage

Create an App

Install Dependencies

Use it

File: examples/with-material-ui/README.md

Usage

Create an App

Install Dependencies

Use it

File: examples/with-emotion/README.md

Usage

Create an App

Install Dependencies

Use it

File: examples/with-chakra-ui/README.md

Usage

Create an App

Install Dependencies

Use it

File: examples/with-ant-design/README.md

Usage

Create an App

Install Dependencies

Use it

Resources

File: examples/custom-renderer-port/README.md

Usage

Create an App

Install Dependencies

Use it