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
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:
{
"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!
My Belief for Nextron
- Show a way of developing desktop apps only web knowledge
- Easy to use
- 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
Next, nextron-dev.js
webpacks main process and generates app/background.js
.
Finally, nextron-dev.js
starts Electron process:
$ npx electron .
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"
}
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
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
Finally, packaging binaries by electron-builder
:
$ npx electron-builder
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
}
}
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
examples/with-javascript-ant-design
$ nextron init my-app --template with-javascript-ant-design
examples/with-typescript-less
$ nextron init my-app --template with-typescript-less
examples/with-typescript-material-ui
$ nextron init my-app --template with-typescript-material-ui
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)
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?