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