Build an Electron + Next.js app for speed ⚡

(The screenshot above is a top page of examples/with-typescript-material-ui.)

Support

nextron	next
v2.x / v3.x	v7.x
v1.x	v6.x

My Belief for Nextron

1. Show a way of developing desktop apps only web knowledge
2. Easy to use
3. Be transparent (Open to OSS developers)

Otherwise Specified

• If you need more performance with Electron, you should see these boilerplates
  • szwacz/electron-boilerplate
  • chentsulin/electron-react-boilerplate
• If you want to use Nextron as production, please take responsibility for your actions
• But, if you have any troubles, questions or ideas, I'll support you, I promise

Usage

Install

$ npm install --global nextron@latest

Create Application

To create <MY-APP>, just run the command below:

$ nextron init <MY-APP>

Or, you can use a create-nextron-app command without installing the nextron command globally:

# with npx
$ npx create-nextron-app <MY-APP>

# with yarn
$ yarn create nextron-app <MY-APP>

Create Application with Template

You can use examples/* apps as a template.

To create the examples/with-typescript-material-ui app, run the command below:

# with `nextron`
$ nextron init <MY-APP> --template with-typescript-material-ui

# with npx
$ npx create-nextron-app <MY-APP> --example with-typescript-material-ui

# with yarn
$ yarn create nextron-app <MY-APP> --example with-typescript-material-ui

Run Electron with Development Mode

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

{
  "scripts": {
    "dev": "node build/nextron.js"
  }
}

Production Build

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

{
  "scripts": {
    "build": "node build/nextron.js build"
  }
}

Build Options

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

{
  "scripts": {
    "build": "node build/nextron.js build",
    "build:all": "node build/nextron.js build --all",
    "build:win32": "node build/nextron.js build --win --ia32",
    "build:win64": "node build/nextron.js build --win --x64",
    "build:mac": "node build/nextron.js build --mac --x64",
    "build:linux": "node build/nextron.js build --linux"
  }
}

CAUTION: To build macOS binary, your host machine must be macOS!

Build Configuration

Edit package.json#build properties for custom build configuration.

{
  "build": {
    "appId": "com.example.nextron",
    "productName": "My Nextron App",
    "copyright": "Copyright © 2018 Yoshihide Shiono",
    "directories": {
      "output": "dist",
      "buildResources": "resources"
    },
    "publish": null
  }
}

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

Examples

See examples folder for more information.

Or you can start the example app by nextron init <app-name> --template <example-dirname>.

To list all examples, just type the command below:

$ nextron list

examples/custom-build-options

# with `nextron`
$ nextron init my-app --template 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

examples/custom-server

# with `nextron`
$ nextron init my-app --template custom-server

# with npx
$ npx create-nextron-app my-app --example custom-server

# with yarn
$ yarn create nextron-app my-app --example custom-server

examples/custom-server-nodemon

# with `nextron`
$ nextron init my-app --template custom-server-nodemon

# with npx
$ npx create-nextron-app my-app --example custom-server-nodemon

# with yarn
$ yarn create nextron-app my-app --example custom-server-nodemon

examples/custom-server-typescript

# with `nextron`
$ nextron init my-app --template custom-server-typescript

# with npx
$ npx create-nextron-app my-app --example custom-server-typescript

# with yarn
$ yarn create nextron-app my-app --example custom-server-typescript

examples/ipc-communication

# with `nextron`
$ nextron init my-app --template ipc-communication

# with npx
$ npx create-nextron-app my-app --example ipc-communication

# with yarn
$ yarn create nextron-app my-app --example ipc-communication

examples/parameterized-routing

# with `nextron`
$ nextron init my-app --template parameterized-routing

# with npx
$ npx create-nextron-app my-app --example parameterized-routing

# with yarn
$ yarn create nextron-app my-app --example parameterized-routing

examples/with-javascript

# with `nextron`
$ nextron init my-app --template with-javascript

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

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

examples/with-javascript-ant-design

# with `nextron`
$ nextron init my-app --template with-javascript-ant-design

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

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

examples/with-javascript-material-ui

# with `nextron`
$ nextron init my-app --template with-javascript-material-ui

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

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

examples/with-typescript

# with `nextron`
$ nextron init my-app --template with-typescript

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

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

examples/with-typescript-less

# with `nextron`
$ nextron init my-app --template with-typescript-less

# with npx
$ npx create-nextron-app my-app --example with-typescript-less

# with yarn
$ yarn create nextron-app my-app --example with-typescript-less

examples/with-typescript-material-ui

# with `nextron`
$ nextron init my-app --template with-typescript-material-ui

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

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

Develop

Basic

$ git clone https://github.com/saltyshiomix/nextron
$ cd nextron
$ yarn
$ yarn dev # default is examples/with-javascript-material-ui

Developing examples/*

$ yarn dev <EXAMPLE-FOLDER-NAME>

Related

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