"Nextron": Electron + Next.js dream

I'm a .NET developer in Japan usually, but I love to write JavaScript/TypeScript in my spare time.

This article introduces Nextron, which can make the Electron app with Next.js.

Why?

I totally respect zeit/next.js library, but with Electron, there is no de-facto-standard for now.

So I wrote Nextron in this spare time, Golden Week, in Japan.

Once you installed nextron, THEN

• you can write all renderer codes with Next.js
• you can build all cross-platform packages for release usage by only one command.

Requirements

Nextron uses npx internally, so it requires below:

• "node": ">=8.2.0"
• "npm": ">=5.2.0"

Install

$ npm install --global nextron

Usage

# Install scaffolds for quick start
$ nextron init <YOUR-APP-NAME>
$ cd <YOUR-APP-NAME>

# for development
# it starts development process (with HMR(Hot Module Replacement) featuire)
$ yarn dev

# for production
# it builds the electron app for release usage
$ yarn build

Folder Structure

After nextron init, folder structure below is created.

.
├── common
├── main
│   └── index.js
├── package.json
├── renderer
│   ├── next.config.js
│   └── pages
│       └── home.js
└── static
    ├── icon.icns
    └── icon.ico

At this time, we can:

1. develop whole renderer process with Next.js!
2. foget to know how we build electron packages for release

with Nextron

Screenshots

yarn dev

yarn build

Conclusion

At this time, this Nextron project is highly WIP, so PRs are welcome!!

May the code be with you!

Comments

[Ronald Flores Sequeira]

Wow I never expected to find what I need so randomly, I'll test it on the week.

[Shiono Yoshihide]

I'm very glad to hear that!
Could you let me know how it was, afterwards?
On my side, I'll test it by developing markdown editor, too :)

[Ronald Flores Sequeira]

I'm testing on windows, at the moment Windows build don't finish. (My target with electron is Windows and I work on Windows) I'm gonna try on Linux. From Nextron can could it be possible to choose build OS? (I'm new to elctron)

[Shiono Yoshihide]

For now, default yarn build command generates all platform builds.
Ok, I'll add build options for each platform today :)

[Ronald Flores Sequeira]

This is what happens with Build

[Shiono Yoshihide]

Could you run node node_modules/nextron/build/javasript/start.js?

Above is internal yarn dev.

This may be webpacking main process error, so above command would tell us something.

Or, you use latest nextron(0.2.*)?
If so, i'm sorry for bugs i know that, and i'll fix them tonight(in Japan time).

nextron v0.1.* might work for you.
(npm install --global nextron@0.1.*)

[Ronald Flores Sequeira]

yarn dev runs well, not the node command. No problem all code have bugs, I'll test with version 0.1.

[Ronald Flores Sequeira]

The same error with 0.1. Just to be sure if it was my OS I tested whit github.com/SimulatedGREG/electron-vue and does build and make de package for windows (the installer and .exe).

[Ronald Flores Sequeira]

I'll test later on my PC (I'm at work right now)

[Shiono Yoshihide]

I'm testing it on my Mac, then nextron@0.3.2(now latest) can build all packages.

Your error may be npx's bug, which is containing spaces in directory path.
So I decided to change code like below:

<FROM>
exec('npx webpack --config=***', { cwd })

<TO>
exec('node_modules/.bin/webpack --config=***', { cwd })

So avoid npx bugs, Nextron has no requirements like npm >= 5.2 now!

[Ronald Flores Sequeira]

I'm on my way to work, i'll test it, another option could be that Windows don't support build for OS X

[Shiono Yoshihide]

nextron@0.3.4 is now released, which fixes yarn build error problem mainly on Windows!
(I tested Windows 7 (64bit) :)

[Ronald Flores Sequeira]

It fail the first time, but on the second try it succeed.
(Windows 10 Home x64)

[Ronald Flores Sequeira]

Thanks for the hard work, I'll keep testing it, hope to see great support for the project, already 1k download.

[Shiono Yoshihide]

Fix almost all bugs, now released nextron@0.6.1 <3

Upgraded dependencies:

• electron@^2.0.4
• next@6.1.1

Peer dependencies:

• react@^16
• react-dom@^16

Here is sample:

$ nextron init test-app
$ cd test-app

# run development mode
$ yarn dev

# release build
$ yarn build

[Ronald Flores Sequeira]

Glad to hear that,I'll be testing later in the day.

[Shiono Yoshihide]

Implemented some examples like Material UI <3

You can try it by the command like below:

# Install latest nextron
$ npm i -g nextron@latest
$ nextron -v
nextron v0.7.5

# Init a nextron app with material-ui
$ nextron init test-app --template with-javascript-material-ui

# If you are typescript lover, you can also try typescript one :)
$ nextron init test-app --template with-typescript-material-ui

# Then, start the app
$ cd test-app
$ yarn (or `npm install`)
$ yarn dev (or `npm run dev`)

Hope you can see it:

[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?