Skip to content

KitsuneDev/nextron

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

# 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

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

About

⚡ Electron + NEXT.js ⚡

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 85.3%
  • JavaScript 14.7%