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 

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 

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

{ "scripts": { "dev": "node build/nextron.js", "build": "node build/nextron.js build" } } 

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. 

Then, desktop binaries are in the dist directory!

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 

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

Finally, nextron-dev.js starts Electron process:

$ npx electron . 

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" } 

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 

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 

Finally, packaging binaries by electron-builder:

$ npx electron-builder 

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 } } 

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 

examples/with-javascript-ant-design

$ nextron init my-app --template with-javascript-ant-design 

examples/with-typescript-less

$ nextron init my-app --template with-typescript-less 

examples/with-typescript-material-ui

$ nextron init my-app --template with-typescript-material-ui 

About Support

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,