GitHub

Support

Nextron vs Next.js

nextron	next
`v5.x`	`v9.x`
`v4.x`	`v8.x`
`v2.x` / `v3.x`	`v7.x`
`v1.x`	`v6.x`

👍 JavaScript frontend/backend
👍 TypeScript frontend/backend
👍 TypeScript frontend/Python backend

Package Manager

npm, yarn and pnpm >= v4 are supported.

My Belief for Nextron

Show a way of developing desktop apps only web knowledge
Easy to use
Be transparent and 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>

# with pnpx
$ pnpx 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> --example 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

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

Install Dependencies

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 © 2018 Yoshihide Shiono
directories:
  output: dist
  buildResources: resources
files:
  - from: .
    filter:
      - package.json
      - app
publish: null

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: (defaultConfig, env) => {
    // do some stuff here
    return defaultConfig;
  },
};

Additional Entries

module.exports = {
  webpack: (defaultConfig, env) => Object.assign(defaultConfig, {
    entry: {
      // electron main process
      background: './main/background.js',
      // we can require `config.js` by using `require('electron').remote.require('./config')`
      config: './main/config.js',
    },
  }),
};

Tips

Next.js' Webpack Processes

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

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

// pages/home.jsx

import electron from 'electron';

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

  // we should check it like this
  const remote = electron.remote || false;
  if (remote) {
    // we can use `electron.remote`
    // 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.

So we must use react state as follows:

// pages/home.jsx

import electron from 'electron';
import React, { useState, useEffect } from 'react';

// prevent SSR webpacking
const remote = electron.remote || false;

const Home = () => {
  const [config, setConfig] = useState({});

  useEffect(() => {
    // componentDidMount()
    if (remote) {
      // require `./main/config.js` from `./main/background.js`
      // and set the config
      setConfig(remote.require('./config').default);
    }

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

  return (
    <React.Fragment>
      <p>Message: {config.message}</p>
    </React.Fragment>
  );
};

export default Home;

Examples

See examples folder for more information.

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

To list all examples, just type the command below:

$ nextron list

examples/api-routes

# with `nextron`
$ nextron init my-app --example api-routes

# with npx
$ npx create-nextron-app my-app --example api-routes

# with yarn
$ yarn create nextron-app my-app --example api-routes

# with pnpx
$ pnpx create-nextron-app my-app --example api-routes

examples/custom-build-options

# with `nextron`
$ nextron init my-app --example 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 pnpx
$ pnpx create-nextron-app my-app --example custom-build-options

examples/custom-main-entry

# with `nextron`
$ nextron init my-app --example 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 pnpx
$ pnpx create-nextron-app my-app --example custom-main-entry

examples/custom-renderer-port

# with `nextron`
$ nextron init my-app --example 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 pnpx
$ pnpx create-nextron-app my-app --example custom-renderer-port

examples/custom-server

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

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

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

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

examples/custom-server-nodemon

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

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

examples/custom-server-typescript

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

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

examples/ipc-communication

# with `nextron`
$ nextron init my-app --example 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 pnpx
$ pnpx create-nextron-app my-app --example ipc-communication

examples/parameterized-routing

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

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

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

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

examples/remote-require

# with `nextron`
$ nextron init my-app --example remote-require

# with npx
$ npx create-nextron-app my-app --example remote-require

# with yarn
$ yarn create nextron-app my-app --example remote-require

# with pnpx
$ pnpx create-nextron-app my-app --example remote-require

examples/store-data

# with `nextron`
$ nextron init my-app --example 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 pnpx
$ pnpx create-nextron-app my-app --example store-data

examples/web-worker

# with `nextron`
$ nextron init my-app --example web-worker

# with npx
$ npx create-nextron-app my-app --example web-worker

# with yarn
$ yarn create nextron-app my-app --example web-worker

# with pnpx
$ pnpx create-nextron-app my-app --example web-worker

examples/with-javascript

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

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

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

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

examples/with-javascript-ant-design

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

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

examples/with-javascript-emotion

# with `nextron`
$ nextron init my-app --example with-javascript-emotion

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

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

# with pnpx
$ pnpx create-nextron-app my-app --example with-javascript-emotion

examples/with-javascript-material-ui

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

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

examples/with-python

# with `nextron`
$ nextron init my-app --example with-python

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

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

# with pnpx
$ pnpx create-nextron-app my-app --example with-python

examples/with-typescript

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

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

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

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

examples/with-typescript-emotion

# with `nextron`
$ nextron init my-app --example with-typescript-emotion

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

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

# with pnpx
$ pnpx create-nextron-app my-app --example with-typescript-emotion

examples/with-typescript-less

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

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

examples/with-typescript-material-ui

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

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

examples/with-typescript-python-api

(Note: When working with the with-typescript-python-api example, see the example's readme file for python setup details)

# with `nextron`
$ nextron init my-app --example with-typescript-python-api

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

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

# with pnpx
$ pnpx create-nextron-app my-app --example with-typescript-python-api

Develop

Basic

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

pnpm or npm are also supported.

Developing `examples/*`

$ yarn dev <EXAMPLE-FOLDER-NAME>

License

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

Name		Name	Last commit message	Last commit date
Latest commit History 1,438 Commits
.github		.github
examples		examples
lib		lib
.babelrc		.babelrc
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
dev.js		dev.js
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json

License

Sondro/nextron

Folders and files

Latest commit

History

Repository files navigation

Support

Nextron vs Next.js

Package Manager

My Belief for Nextron

Otherwise Specified

Usage

Install

Create Application

Create Application with Template

Install Dependencies

Run Electron with Development Mode

Production Build

Build Options

Build Configuration

nextron.config.js

Additional Entries

Tips

Next.js' Webpack Processes

The Basic of React Hooks :)

Examples

Develop

Basic

Developing examples/*

Related

License

About

Resources

License

Stars

Watchers

Forks

Languages

Developing `examples/*`