nextron

    7.1.0 • Public • Published

    NPM version NPM downloads Package License (MIT) AWESOME NEXTJS

    Support

    Nextron vs Next.js

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

    1. Show a way of developing desktop apps 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-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>
    

    Related

    License

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

    Install

    npm i nextron

    DownloadsWeekly Downloads

    751

    Version

    7.1.0

    License

    MIT

    Unpacked Size

    26.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • lacymorrow
    • saltyshiomix