Build an Electron + Next.js app in 3 steps

saltyshiomix

Shiono Yoshihide

Posted on July 4, 2018

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

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
💖 💪 🙅 🚩
saltyshiomix
Shiono Yoshihide

Posted on July 4, 2018

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related