DEV Community

Shiono Yoshihide
Shiono Yoshihide

Posted on • Updated on


Build an Electron + Next.js app in 3 steps

# 1. Install
$ npm i -g nextron

# 2. Create nextron app (with template of `examples/with-javascript-material-ui`)
$ nextron init test-app --template with-javascript-material-ui

# 3. Run development mode
$ cd test-app
$ yarn (or `npm install`)
$ yarn dev (or `npm run dev`)
Enter fullscreen mode Exit fullscreen mode


Just released nextron@0.7.5.

Main Changes

  • Fix almost all bugs
  • Upgrade to electron@^2.0.4
  • Upgrade to next@6.1.1
  • Smaller dependencies
  • Easy cli like nextron init test-app
  • More examples (The screenshot above is a top page of examples/with-javascript-material-ui)



$ npm install --global nextron
Enter fullscreen mode Exit fullscreen mode

Create Application

To create <MY-APP>, just run the command below:

$ nextron init <MY-APP>
Enter fullscreen mode Exit fullscreen mode

Create Application with Template

You can use examples/* sample apps as templating.

To create the example/with-typescript app, run the command below:

$ nextron init <MY-APP> --template with-typescript
Enter fullscreen mode Exit fullscreen mode

Run Electron with Development Mode

Run npm run dev, and nextron automatically launches the electron app.

  "scripts": {
    "dev": "nextron"
Enter fullscreen mode Exit fullscreen mode

Production Build

Run npm run build, and nextron outputs packaged bundles under the dist folder.

  "scripts": {
    "build": "nextron build"
Enter fullscreen mode Exit fullscreen mode




  • More examples
  • More CLI options
    • ex1.) nextron build --all
    • ex2.) nextron build --ia32 --win
  • Watch changes and hot reloading both main and renderer processes

Top comments (2)

proteles profile image
Aaron • Edited

You forgot to add "npm install" to your instructions in step 3 after "cd test-app"
otherwise you will get error running yarn dev the first time.

$ cd test-app
$ yarn dev
yarn run v1.7.0
$ nextron
env: node\r: No such file or directory
error Command failed with exit code 127.
info Visit for documentation about this command.

should be

$ cd test-app
$ npm install
$ yarn dev

you can also use the "npm run dev" command instead of "yarn dev"
$ npm run dev

the output from npm install

> fsevents@1.2.4 install /dev/nextron_example/test-app/node_modules/fsevents
> node install

> pre-commit@1.2.2 install/dev/nextron_example/test-app/node_modules/fs-jetpack/node_modules/pre-commit
> node install.js

> spawn-sync@1.0.15 postinstall /dev/nextron_example/test-app/node_modules/fs-jetpack/node_modules/spawn-sync
> node postinstall

> uglifyjs-webpack-plugin@0.4.6 postinstall /dev/nextron_example/test-app/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

> electron@2.0.4 postinstall /dev/nextron_example/test-app/node_modules/electron
> node install.js

> lint-staged@3.6.1 postinstall /dev/nextron_example/test-app/node_modules/fs-jetpack/node_modules/lint-staged
> echo "πŸš«πŸ’© lint-staged installed! 
Do not forget to configure it. See" && exit 0

πŸš«πŸ’© lint-staged installed! 
Do not forget to configure it. See
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

added 497 packages from 578 contributors, removed 112 packages, updated 901 packages and audited 10508 packages in 33.888s
found 0 vulnerabilities

then I ran yarn dev...

$ yarn dev

> test-app@1.0.0 dev /dev/nextron_example/test-app
> nextron

βœ” Building renderer process
β Ή Building main process

 DONE  Compiled successfully in 290ms                                                                                                                                                                                                                 4:11:22 PM

βœ” Building main process

Done! Nextron app started!
2018-07-06 16:11:24.240 Electron Helper[990:29586] Couldn't set selectedTextBackgroundColor from default ()

saltyshiomix profile image
Shiono Yoshihide • Edited

Thank you for your testing nextron!

Could you try nextron@0.6.8?

(I fixed some npm installation problem.)

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another β€œCoder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.