GitHub - loai-kanou/nextron: ⚡ Next.js Electron ⚡

Support

Nextron vs Next.js

nextron	next
`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 >= 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

Usage

Create Application with Template

We can use examples/* as a template.

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

# 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

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/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 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 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/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/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/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 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 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 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-javascript-tailwindcss

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

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

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

examples/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-ant-design

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

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

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

examples/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-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-tailwindcss

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

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

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

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>

Maintainers ⚡

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

License

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

Name		Name	Last commit message	Last commit date
Latest commit History 1,725 Commits
.github		.github
examples		examples
lib		lib
.babelrc		.babelrc
.gitignore		.gitignore
.node-version		.node-version
LICENSE		LICENSE
README.md		README.md
babel.js		babel.js
dev.js		dev.js
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

License

loai-kanou/nextron

Folders and files

Latest commit

History

Repository files navigation

Support

Nextron vs Next.js

Package Manager

My Belief for Nextron

Usage

Create Application with Template

Run Electron with Development Mode

Production Build

Build Options

Build Configuration

nextron.config.js

Custom Babel Config for the Main Process

Tips

Next.js' Webpack Processes

The Basic of React Hooks :)

Examples

Develop

Basic

Developing examples/*

Maintainers ⚡

Related

License

About

Resources

License

Stars

Watchers

Forks

Languages

Developing `examples/*`