November's Paddleball Marathon
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

nextron

5.15.2 • Public • Published

NPM version NPM downloads Package License (MIT) AWESOME NEXTJS

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

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

Otherwise Specified

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>

Related

License

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

Install

npm i nextron

DownloadsWeekly Downloads

309

Version

5.15.2

License

MIT

Unpacked Size

1.07 MB

Total Files

215

Last publish

Collaborators

  • avatar
  • avatar