DEV Community

Shiono Yoshihide
Shiono Yoshihide

Posted on

Release Nextron v3, Electron with Next.js apps generator

#javascript #showdev #electron #react

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,

Top comments (1)

Collapse
 
devrnsistema profile image
devrnsistema •

how do I be able to access the pages with the application and production, developing access normally by port 8888, but in production how do I do?

Read next

paharihacker profile image

A Complete Guide to React useEffect vs useLayoutEffect for Beginners

Rajesh Dhiman -

vinod3d profile image

Props Validation in React

Vinod Chandra -

nicoss54 profile image

The next improvement in Angular reactivity

Nicolas Frizzarin -

harshboricha98 profile image

Cloud Computing Beyond Containers: How Cloudflare’s Isolates Are Changing the Game

Harsh boricha -