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:
- develop whole renderer process with Next.js!
- 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!
Top comments (18)
Wow I never expected to find what I need so randomly, I'll test it on the week.
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 :)
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)
For now, default
yarn buildcommand generates all platform builds.Ok, I'll add build options for each platform today :)
This is what happens with Build
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.*)yarn dev runs well, not the node command. No problem all code have bugs, I'll test with version 0.1.
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).
I'll test later on my PC (I'm at work right now)
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:
So avoid npx bugs, Nextron has no requirements like
npm >= 5.2now!I'm on my way to work, i'll test it, another option could be that Windows don't support build for OS X
nextron@0.3.4is now released, which fixesyarn builderror problem mainly on Windows!(I tested Windows 7 (64bit) :)
It fail the first time, but on the second try it succeed.
(Windows 10 Home x64)
Thanks for the hard work, I'll keep testing it, hope to see great support for the project, already 1k download.
Fix almost all bugs, now released
nextron@0.6.1<3Upgraded dependencies:
electron@^2.0.4next@6.1.1Peer dependencies:
react@^16react-dom@^16Here is sample:
Glad to hear that,I'll be testing later in the day.
Implemented some examples like Material UI <3
You can try it by the command like below:
Hope you can see it:
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?