TheLazy.Dev
Portfolio GitHub

Blog

javascript |showdev |electron |react

Release Nextron v3, Electron with Next.js apps generator

saltyshiomix

Shiono Yoshihide

Posted on October 19, 2018

Release Nextron v3, Electron with Next.js apps generator

After a half year of development, Nextron reached v3.

What is Nextron ?

Electron with Next.js apps generator.

You can use Nextron like this:

# install it
$ npm install --global nextron

# use it
$ nextron init my-app --template with-javascript
Enter fullscreen mode Exit fullscreen mode

Then, it generates my-app:

.
├── build
│   ├── build.production.js
│   ├── nextron-build.js
│   ├── nextron-dev.js
│   ├── nextron.js
│   ├── spinner.js
│   ├── webpack.base.config.js
│   └── webpack.main.config.js
├── main
│   ├── background.js
│   ├── env
│   │   ├── development.json
│   │   └── production.json
│   └── helpers
│       ├── create-window.js
│       ├── enable-hot-reload.js
│       └── index.js
├── renderer
│   ├── helpers
│   │   ├── index.js
│   │   └── resolve.js
│   ├── next.config.js
│   ├── pages
│   │   ├── home.jsx
│   │   └── next.jsx
│   └── static
│       └── logo.png
└── resources
│   ├── icon.icns
│   └── icon.ico
├── .gitignore
├── package.json
└── README.md
Enter fullscreen mode Exit fullscreen mode

In the package.json, you'll see these npm-scripts:

{
  "scripts": {
    "dev": "node build/nextron.js",
    "build": "node build/nextron.js build"
  }
}
Enter fullscreen mode Exit fullscreen mode

Run npm run dev (or yarn dev), you'll see an electron window running a development mode.

Run npm run build (or yarn build), you'll see these console output after a moment:

$ yarn build
yarn run v1.10.1
$ node build/nextron.js build
✔ Clearing previous builds
✔ Building renderer process
✔ Building main process
✔ Packaging - please wait a moment

Done! See `dist` directory
✨  Done in 116.04s.
Enter fullscreen mode Exit fullscreen mode

Then, desktop binaries are in the dist directory!

dist

My Belief for Nextron

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

Dive into Nextron

Development Mode (node build/nextron.js dev)

By default, nextron-dev.js starts development process with a port 8888 by a next command:

# starts development process by Next.js (http://localhost:8888)
$ npx next --port 8888 ./renderer
Enter fullscreen mode Exit fullscreen mode

Next, nextron-dev.js webpacks main process and generates app/background.js.

Finally, nextron-dev.js starts Electron process:

$ npx electron .
Enter fullscreen mode Exit fullscreen mode

At this time, an electron command with an arg .(current directory), search package.json#main property, then resolves a main js file.

// package.json
{
  "main": "app/background.js"
}
Enter fullscreen mode Exit fullscreen mode

Production Build (node build/nextron.js build)

First, nextron-build.js exports a renderer process as static files:

$ npx next build ./renderer
$ npx next export ./renderer
Enter fullscreen mode Exit fullscreen mode

Exported outputs are under the ./renderer/out directory, so nextron-build.js copies them to app/**/*.

Next, nextron-build.js builds main process by webpack, and gets a result of app/background.js:

$ node build/build.production.js
Enter fullscreen mode Exit fullscreen mode

Finally, packaging binaries by electron-builder:

$ npx electron-builder
Enter fullscreen mode Exit fullscreen mode

electron-builder bundles app/**/* and node_modules by default, and loads extra configs in the package.json#build property:

// package.json
{
  "build": {
    "appId": "com.example.nextron",
    "productName": "My Nextron App",
    "copyright": "Copyright © ${year} ${author}",
    "directories": {
      "output": "dist",
      "buildResources": "resources"
    },
    "publish": null
  }
}
Enter fullscreen mode Exit fullscreen mode

Final outputs are under the dist directory.

Examples

See examples folder for more information.

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

examples/custom-build-options 

$ nextron init my-app --template custom-build-options
Enter fullscreen mode Exit fullscreen mode

examples/with-javascript-ant-design 

$ nextron init my-app --template with-javascript-ant-design
Enter fullscreen mode Exit fullscreen mode

examples/with-typescript-less 

$ nextron init my-app --template with-typescript-less
Enter fullscreen mode Exit fullscreen mode

examples/with-typescript-material-ui 

$ nextron init my-app --template with-typescript-material-ui
Enter fullscreen mode Exit fullscreen mode

About Support

nextron next
v2.x / v3.x v7.x
v1.x v6.x

About Me

  • .NET and TypeScript lover
  • New to OSS, love OSS developer :)
  • Feel free to contact me via GitHub

Thank you for your reading this article! :)

Best,

💖 💪 🙅 🚩
saltyshiomix
Shiono Yoshihide

Posted on October 19, 2018

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Release Nextron v3, Electron with Next.js apps generator
javascript Release Nextron v3, Electron with Next.js apps generator

October 19, 2018