DEV Community

Shiono Yoshihide
Shiono Yoshihide

Posted on • Edited on

Build an Electron + Next.js app in 3 steps

#javascript #electron #nextjs #typescript 


# 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

nextron

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)

Usage

Install 



$ 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

console

result

TODO

  • 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)

Collapse
 
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 https://yarnpkg.com/en/docs/cli/run 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

anyhoo...
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 https://github.com/okonet/lint-staged/blob/master/README.md" && exit 0

🚫💩 lint-staged installed! 
Do not forget to configure it. See https://github.com/okonet/lint-staged/blob/master/README.md
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 ()
Collapse
 
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.)

Read next

lithephp profile image

Creating a TodoList with PHP and the Lithe Framework: A Complete Guide

Lithe -

amitkumar13 profile image

Memory Leak Detection in React Native with LeakCanary

Amit Kumar -

peboycodes profile image

Stop Making These Component Mistakes

Paul Adeyele -

whiskeygerman profile image

Web canvas with generative neural networks with elements of visual programming.

German Whiskey -