Support

Nextron vs Next.js

| nextron | next | | --------------- | ------------------ | | v9.x | v13.x (upcoming) | | v8.x | v12.x | | v7.x | v11.x | | v6.x | v10.x | | v5.x | v9.x | | v4.x | v8.x | | v2.x / v3.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
2. Easy to use
3. Be transparent and open to OSS developers

Usage

Create Application with Template

We can use examples/* as a template.

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

# 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

For nextron v8 or below, please specify --branch option:

npx create-nextron-app MY_APP --example with-material-ui --branch release/v8

Run Electron with Development Mode

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

{
  "scripts": {
    "dev": "nextron"
  }
}

Production Build

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

{
  "scripts": {
    "build": "nextron build"
  }
}

Build Options

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

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

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

Build Configuration

Edit electron-builder.yml properties for custom build configuration.

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.

nextron.config.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 the Main Process

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

.babelrc:

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

Tips

Next.js' Webpack Processes

There are two webpack processes: server process and client one.

If we want to use some libraries that don't support SSR, we should check if the current process is whether server or client:

// pages/home.jsx

import electron from 'electron';

const Home = () => {
  // we can't use `electron.ipcRenderer` directly!
  const ipcRenderer = electron.ipcRenderer;

  // we should check it like this
  const ipcRenderer = electron.ipcRenderer || false;
  if (ipcRenderer) {
    // we can use `electron.ipcRenderer`
    // because this scope is the client webpack process
  }
};

export default Home;

The Basic of React Hooks :)

As mentioned above, we should check if the webpack process is a client because the renderer process is a web client:

// pages/home.jsx

import electron from 'electron';
import React from 'react';

const Home = () => {
  // In this scope, both of server and client processes are running
  // So if the process is server, `window` object is undefined

  React.useEffect(() => {
    // componentDidMount() like

    // In this scope, only the client process is running
    window.alert('wow');

    return () => {
      // componentWillUnmount() like
    };
  }, []);

  return <p>Hello Nextron</p>;
};

export default Home;

Examples

See examples folder for more information.

examples/basic-javascript

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

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

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

examples/basic-typescript

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

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

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

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-main-entry

# with npx
$ npx create-nextron-app my-app --example custom-main-entry

# with yarn
$ yarn create nextron-app my-app --example custom-main-entry

# with pnpm
$ pnpm dlx create-nextron-app my-app --example custom-main-entry

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/ipc-communication

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

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

# with pnpm
$ pnpm dlx create-nextron-app my-app --example ipc-communication

examples/store-data

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

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

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

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

# 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-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
$ pnpm dev # default is examples/basic-javascript

Developing examples/*

$ pnpm dev <EXAMPLE-FOLDER-NAME>

Developing for your own project

1. Install development version of nextron

$ cd nextron
$ npm install
$ npm run build
$ npm link 

2. Install linked nextron in your project

$ cd your-project
$ npm install -D @babel/runtime-corejs3 # required for nextron
$ npm link nextron

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

Maintainers ⚡

• saltyshiomix (Shiono Yoshihide)
• lacymorrow (Lacy Morrow)
• Psycokwet
• m5x5
• andirsun (Anderson Laverde)

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

Related

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

License

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