Release Nextron v3, Electron with Next.js apps generator
Tags: javascript, showdev, electron, react
Published: 2018-10-19 12:41:58

---
title: Release Nextron v3, Electron with Next.js apps generator
published: true
description: Build an Electron + Next.js app without any effort.
tags: javascript,showdev,electron,react
---

After a half year of development, [Nextron](https://github.com/saltyshiomix/nextron) reached v3.

## What is Nextron ?

Electron with Next.js apps **generator**.

You can use Nextron like this:

```bash
# 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:

```json
{
  "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!

![dist](https://thepracticaldev.s3.amazonaws.com/i/m6et734h6t8q6xfmctpt.png)

## My Belief for Nextron

1. Show a way of developing desktop apps only web knowledge
1. Easy to use
1. 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:

```bash
# 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:

```bash
$ npx electron .
```

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

```json
// package.json
{
  "main": "app/background.js"
}
```

### Production Build (`node build/nextron.js build`)

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

```bash
$ 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`:

```bash
$ node build/build.production.js
```

Finally, packaging binaries by `electron-builder`:

```bash
$ npx electron-builder
```

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

```json
// 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](https://github.com/saltyshiomix/nextron/tree/master/examples) folder for more information.

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

### [examples/custom-build-options](https://github.com/saltyshiomix/nextron/tree/master/examples/custom-build-options)

```bash
$ nextron init my-app --template custom-build-options
```

<p align="center"><img src="https://i.imgur.com/ZWNgF2C.png"></p>

### [examples/with-javascript-ant-design](https://github.com/saltyshiomix/nextron/tree/master/examples/with-javascript-ant-design)

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

<p align="center"><img src="https://i.imgur.com/PiEKeIZ.png"></p>

### [examples/with-typescript-less](https://github.com/saltyshiomix/nextron/tree/master/examples/with-typescript-less)

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

<p align="center"><img src="https://i.imgur.com/cWBEdDR.png"></p>

### [examples/with-typescript-material-ui](https://github.com/saltyshiomix/nextron/tree/master/examples/with-typescript-material-ui)

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

<p align="center"><img src="https://i.imgur.com/DNOsAH0.png"></p>

## 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](https://github.com/saltyshiomix)

Thank you for your reading this article! :)

Best,