nextron | next |
---|---|
v9.x |
v13.x (upcoming) |
v8.x |
v12.x |
v7.x |
v11.x |
v6.x |
v10.x |
v5.x |
v9.x |
v4.x |
v8.x |
v2.x / v3.x |
v7.x |
v1.x |
v6.x |
npm
, yarn
and pnpm
are supported.
- Show a way of developing desktop apps with only web knowledge
- Easy to use
- Be transparent and open to OSS developers
We can use examples/*
as a template.
To create the examples/with-material-ui
, run the command below:
# with npx
$ npx create-nextron-app MY_APP --example with-material-ui
# with yarn
$ yarn create nextron-app MY_APP --example with-material-ui
# with pnpm
$ pnpm dlx create-nextron-app MY_APP --example with-material-ui
For nextron v8 or below, please specify --branch
option:
npx create-nextron-app MY_APP --example with-material-ui --branch release/v8
Run npm run dev
, and nextron automatically launches an electron app.
{
"scripts": {
"dev": "nextron"
}
}
Run npm run build
, and nextron outputs packaged bundles under the dist
folder.
{
"scripts": {
"build": "nextron build"
}
}
To build Windows 32 bit version, run npm run build:win32
like below:
{
"scripts": {
"build": "nextron build",
"build:all": "nextron build --all",
"build:win32": "nextron build --win --ia32",
"build:win64": "nextron build --win --x64",
"build:mac": "nextron build --mac --x64",
"build:linux": "nextron build --linux"
}
}
CAUTION: To build macOS binary, your host machine must be macOS!
Edit electron-builder.yml
properties for custom build configuration.
appId: com.example.nextron
productName: My Nextron App
copyright: Copyright © 2020 Yoshihide Shiono
directories:
output: dist
buildResources: resources
files:
- from: .
filter:
- package.json
- app
publish: null # see https://www.electron.build/configuration/publish
For more information, please check out electron-builder official configuration documents.
module.exports = {
// specify an alternate main src directory, defaults to 'main'
mainSrcDir: 'main',
// specify an alternate renderer src directory, defaults to 'renderer'
rendererSrcDir: 'renderer',
// main process' webpack config
webpack: (config, env) => {
// do some stuff here
return config
},
}
We can extends the default babel config of main process by putting .babelrc
in our project root like this:
.babelrc
:
{
"presets": ["nextron/babel"]
}
There are two webpack processes: server process and client one.
If we want to use some libraries that don't support SSR, we should check if the current process is whether server or client:
// pages/home.jsx
import electron from 'electron'
const Home = () => {
// we can't use `electron.ipcRenderer` directly!
const ipcRenderer = electron.ipcRenderer
// we should check it like this
const ipcRenderer = electron.ipcRenderer || false
if (ipcRenderer) {
// we can use `electron.ipcRenderer`
// because this scope is the client webpack process
}
}
export default Home
As mentioned above, we should check if the webpack process is a client because the renderer process is a web client:
// pages/home.jsx
import electron from 'electron'
import React from 'react'
const Home = () => {
// In this scope, both of server and client processes are running
// So if the process is server, `window` object is undefined
React.useEffect(() => {
// componentDidMount() like
// In this scope, only the client process is running
window.alert('wow')
return () => {
// componentWillUnmount() like
}
}, [])
return <p>Hello Nextron</p>
}
export default Home
See examples folder for more information.
# with npx
$ npx create-nextron-app my-app --example basic-javascript
# with yarn
$ yarn create nextron-app my-app --example basic-javascript
# with pnpm
$ pnpm dlx create-nextron-app my-app --example basic-javascript
# with npx
$ npx create-nextron-app my-app --example basic-typescript
# with yarn
$ yarn create nextron-app my-app --example basic-typescript
# with pnpm
$ pnpm dlx create-nextron-app my-app --example basic-typescript
# with npx
$ npx create-nextron-app my-app --example custom-build-options
# with yarn
$ yarn create nextron-app my-app --example custom-build-options
# with pnpm
$ pnpm dlx create-nextron-app my-app --example custom-build-options
# with npx
$ npx create-nextron-app my-app --example custom-main-entry
# with yarn
$ yarn create nextron-app my-app --example custom-main-entry
# with pnpm
$ pnpm dlx create-nextron-app my-app --example custom-main-entry
# with npx
$ npx create-nextron-app my-app --example custom-renderer-port
# with yarn
$ yarn create nextron-app my-app --example custom-renderer-port
# with pnpm
$ pnpm dlx create-nextron-app my-app --example custom-renderer-port
# with npx
$ npx create-nextron-app my-app --example ipc-communication
# with yarn
$ yarn create nextron-app my-app --example ipc-communication
# with pnpm
$ pnpm dlx create-nextron-app my-app --example ipc-communication
# with npx
$ npx create-nextron-app my-app --example store-data
# with yarn
$ yarn create nextron-app my-app --example store-data
# with pnpm
$ pnpm dlx create-nextron-app my-app --example store-data
# with npx
$ npx create-nextron-app my-app --example with-ant-design
# with yarn
$ yarn create nextron-app my-app --example with-ant-design
# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-ant-design
# with npx
$ npx create-nextron-app my-app --example with-chakra-ui
# with yarn
$ yarn create nextron-app my-app --example with-chakra-ui
# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-chakra-ui
# with npx
$ npx create-nextron-app my-app --example with-emotion
# with yarn
$ yarn create nextron-app my-app --example with-emotion
# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-emotion
# with npx
$ npx create-nextron-app my-app --example with-material-ui
# with yarn
$ yarn create nextron-app my-app --example with-material-ui
# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-material-ui
# with npx
$ npx create-nextron-app my-app --example with-tailwindcss
# with yarn
$ yarn create nextron-app my-app --example with-tailwindcss
# with pnpm
$ pnpm dlx create-nextron-app my-app --example with-tailwindcss
$ git clone https://github.com/saltyshiomix/nextron.git
$ cd nextron
$ pnpm install
$ pnpm dev # default is examples/basic-javascript
$ pnpm dev <EXAMPLE-FOLDER-NAME>
- Install development version of nextron
$ cd nextron
$ npm install
$ npm run build
$ npm link
- Install linked nextron in your project
$ cd your-project
$ npm install -D @babel/runtime-corejs3 # required for nextron
$ npm link nextron
- On every change in nextron, run
npm run build
in nextron folder and restart your project
For more information, please see Looking for maintainers ⚡ #244.
- create-nextron-app - Create Nextron (Electron + Next.js) apps in one command ⚡
- Nuxtron - ⚡ Electron + Nuxt.js ⚡
This project is licensed under the terms of the MIT license.