DEV Community

Shiono Yoshihide
Shiono Yoshihide

Posted on

"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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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-dev-image

yarn build

yarn-build-image

Conclusion

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

May the code be with you!

Top comments (18)

Collapse
 
burzumumbra profile image
Ronald Flores Sequeira

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

Collapse
 
saltyshiomix profile image
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 :)

Collapse
 
burzumumbra profile image
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)

Thread Thread
 
saltyshiomix profile image
Shiono Yoshihide

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

Thread Thread
 
burzumumbra profile image
Ronald Flores Sequeira • Edited

This is what happens with Build

Yarn Build

Thread Thread
 
saltyshiomix profile image
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.*)

Thread Thread
 
burzumumbra profile image
Ronald Flores Sequeira

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

Node Dev test

Thread Thread
 
burzumumbra profile image
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).

Thread Thread
 
burzumumbra profile image
Ronald Flores Sequeira

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

Thread Thread
 
saltyshiomix profile image
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!

Thread Thread
 
burzumumbra profile image
Ronald Flores Sequeira • Edited

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

Thread Thread
 
saltyshiomix profile image
Shiono Yoshihide

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

Thread Thread
 
burzumumbra profile image
Ronald Flores Sequeira

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

Yarn Succeed

Yarn Succeed

Collapse
 
burzumumbra profile image
Ronald Flores Sequeira

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

Collapse
 
saltyshiomix profile image
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
Collapse
 
burzumumbra profile image
Ronald Flores Sequeira

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

Thread Thread
 
saltyshiomix profile image
Shiono Yoshihide • Edited

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:

nextron

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