Support
Nextron vs Next.js
nextron | next |
---|---|
v5.x |
v9.x |
v4.x |
v8.x |
v2.x / v3.x |
v7.x |
v1.x |
v6.x |
👍 JavaScript frontend/backend
👍 TypeScript frontend/backend
👍 TypeScript frontend/Python backend
Package Manager
npm
, yarn
and pnpm >= v4
are supported.
My Belief for Nextron
- Show a way of developing desktop apps only web knowledge
- Easy to use
- Be transparent and open to OSS developers
Otherwise Specified
- If you need more performance with Electron, you should see these boilerplates
- If you want to use Nextron as production, please take responsibility for your actions
- But, if you have any troubles, questions or ideas, I'll support you, I promise
Usage
Install
$ npm install --global nextron@latest
Create Application
To create <MY-APP>
, just run the command below:
$ nextron init <MY-APP>
Or, you can use a create-nextron-app
command without installing the nextron
command globally:
# with npx
$ npx create-nextron-app <MY-APP>
# with yarn
$ yarn create nextron-app <MY-APP>
# with pnpx
$ pnpx create-nextron-app <MY-APP>
Create Application with Template
You can use examples/*
apps as a template.
To create the examples/with-typescript-material-ui
app, run the command below:
# with `nextron`
$ nextron init <MY-APP> --example with-typescript-material-ui
# with npx
$ npx create-nextron-app <MY-APP> --example with-typescript-material-ui
# with yarn
$ yarn create nextron-app <MY-APP> --example with-typescript-material-ui
# with pnpx
$ pnpx create-nextron-app <MY-APP> --example with-typescript-material-ui
Install Dependencies
Run Electron with Development Mode
Run npm run dev
, and nextron automatically launches an electron app.
{
"scripts": {
"dev": "nextron"
}
}
Production Build
Run npm run build
, and nextron outputs packaged bundles under the dist
folder.
{
"scripts": {
"build": "nextron build"
}
}
Build Options
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!
Build Configuration
Edit electron-builder.yml
properties for custom build configuration.
appId: com.example.nextron
productName: My Nextron App
copyright: Copyright © 2018 Yoshihide Shiono
directories:
output: dist
buildResources: resources
files:
- from: .
filter:
- package.json
- app
publish: null
For more information, please check out electron-builder official configuration documents.
nextron.config.js
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: (defaultConfig, env) => {
// do some stuff here
return defaultConfig;
},
};
Additional Entries
module.exports = {
webpack: (defaultConfig, env) => Object.assign(defaultConfig, {
entry: {
// electron main process
background: './main/background.js',
// we can require `config.js` by using `require('electron').remote.require('./config')`
config: './main/config.js',
},
}),
};
Tips
Next.js' Webpack Processes
There are two webpack processes: a server process and client one.
If we want to use some libraries that don't support SSR(Server Side Rendering), we should check if the current process is whether a server or client:
// pages/home.jsx
import electron from 'electron';
const Home = () => {
// we can't use `electron.remote` directly!
const remote = electron.remote;
// we should check it like this
const remote = electron.remote || false;
if (remote) {
// we can use `electron.remote`
// because this scope is the client webpack process
}
};
export default Home;
The Basic of React Hooks :)
As mentioned above, we should check if the webpack process is a client because the renderer process is a web client.
So we must use react state
as follows:
// pages/home.jsx
import electron from 'electron';
import React, { useState, useEffect } from 'react';
// prevent SSR webpacking
const remote = electron.remote || false;
const Home = () => {
const [config, setConfig] = useState({});
useEffect(() => {
// componentDidMount()
if (remote) {
// require `./main/config.js` from `./main/background.js`
// and set the config
setConfig(remote.require('./config').default);
}
return () => {
// componentWillUnmount()
};
}, []);
return (
<React.Fragment>
<p>Message: {config.message}</p>
</React.Fragment>
);
};
export default Home;
Examples
See examples folder for more information.
Or we can start the example app by nextron init <app-name> --example <example-dirname>
.
To list all examples, just type the command below:
$ nextron list
examples/api-routes
# with `nextron`
$ nextron init my-app --example api-routes
# with npx
$ npx create-nextron-app my-app --example api-routes
# with yarn
$ yarn create nextron-app my-app --example api-routes
# with pnpx
$ pnpx create-nextron-app my-app --example api-routes
examples/custom-build-options
# with `nextron`
$ nextron init my-app --example custom-build-options
# 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 pnpx
$ pnpx create-nextron-app my-app --example custom-build-options
examples/custom-main-entry
# with `nextron`
$ nextron init my-app --example custom-main-entry
# 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 pnpx
$ pnpx create-nextron-app my-app --example custom-main-entry
examples/custom-renderer-port
# with `nextron`
$ nextron init my-app --example custom-renderer-port
# 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 pnpx
$ pnpx create-nextron-app my-app --example custom-renderer-port
examples/custom-server
# with `nextron`
$ nextron init my-app --example custom-server
# with npx
$ npx create-nextron-app my-app --example custom-server
# with yarn
$ yarn create nextron-app my-app --example custom-server
# with pnpx
$ pnpx create-nextron-app my-app --example custom-server
examples/custom-server-nodemon
# with `nextron`
$ nextron init my-app --example custom-server-nodemon
# with npx
$ npx create-nextron-app my-app --example custom-server-nodemon
# with yarn
$ yarn create nextron-app my-app --example custom-server-nodemon
# with pnpx
$ pnpx create-nextron-app my-app --example custom-server-nodemon
examples/custom-server-typescript
# with `nextron`
$ nextron init my-app --example custom-server-typescript
# with npx
$ npx create-nextron-app my-app --example custom-server-typescript
# with yarn
$ yarn create nextron-app my-app --example custom-server-typescript
# with pnpx
$ pnpx create-nextron-app my-app --example custom-server-typescript
examples/ipc-communication
# with `nextron`
$ nextron init my-app --example ipc-communication
# with npx
$ npx create-nextron-app my-app --example ipc-communication
# with yarn
$ yarn create nextron-app my-app --example ipc-communication
# with pnpx
$ pnpx create-nextron-app my-app --example ipc-communication
examples/parameterized-routing
# with `nextron`
$ nextron init my-app --example parameterized-routing
# with npx
$ npx create-nextron-app my-app --example parameterized-routing
# with yarn
$ yarn create nextron-app my-app --example parameterized-routing
# with pnpx
$ pnpx create-nextron-app my-app --example parameterized-routing
examples/remote-require
# with `nextron`
$ nextron init my-app --example remote-require
# with npx
$ npx create-nextron-app my-app --example remote-require
# with yarn
$ yarn create nextron-app my-app --example remote-require
# with pnpx
$ pnpx create-nextron-app my-app --example remote-require
examples/store-data
# with `nextron`
$ nextron init my-app --example store-data
# with npx
$ npx create-nextron-app my-app --example store-data
# with yarn
$ yarn create nextron-app my-app --example store-data
# with pnpx
$ pnpx create-nextron-app my-app --example store-data
examples/web-worker
# with `nextron`
$ nextron init my-app --example web-worker
# with npx
$ npx create-nextron-app my-app --example web-worker
# with yarn
$ yarn create nextron-app my-app --example web-worker
# with pnpx
$ pnpx create-nextron-app my-app --example web-worker
examples/with-javascript
# with `nextron`
$ nextron init my-app --example with-javascript
# with npx
$ npx create-nextron-app my-app --example with-javascript
# with yarn
$ yarn create nextron-app my-app --example with-javascript
# with pnpx
$ pnpx create-nextron-app my-app --example with-javascript
examples/with-javascript-ant-design
# with `nextron`
$ nextron init my-app --example with-javascript-ant-design
# with npx
$ npx create-nextron-app my-app --example with-javascript-ant-design
# with yarn
$ yarn create nextron-app my-app --example with-javascript-ant-design
# with pnpx
$ pnpx create-nextron-app my-app --example with-javascript-ant-design
examples/with-javascript-emotion
# with `nextron`
$ nextron init my-app --example with-javascript-emotion
# with npx
$ npx create-nextron-app my-app --example with-javascript-emotion
# with yarn
$ yarn create nextron-app my-app --example with-javascript-emotion
# with pnpx
$ pnpx create-nextron-app my-app --example with-javascript-emotion
examples/with-javascript-material-ui
# with `nextron`
$ nextron init my-app --example with-javascript-material-ui
# with npx
$ npx create-nextron-app my-app --example with-javascript-material-ui
# with yarn
$ yarn create nextron-app my-app --example with-javascript-material-ui
# with pnpx
$ pnpx create-nextron-app my-app --example with-javascript-material-ui
examples/with-python
# with `nextron`
$ nextron init my-app --example with-python
# with npx
$ npx create-nextron-app my-app --example with-python
# with yarn
$ yarn create nextron-app my-app --example with-python
# with pnpx
$ pnpx create-nextron-app my-app --example with-python
examples/with-typescript
# with `nextron`
$ nextron init my-app --example with-typescript
# with npx
$ npx create-nextron-app my-app --example with-typescript
# with yarn
$ yarn create nextron-app my-app --example with-typescript
# with pnpx
$ pnpx create-nextron-app my-app --example with-typescript
examples/with-typescript-emotion
# with `nextron`
$ nextron init my-app --example with-typescript-emotion
# with npx
$ npx create-nextron-app my-app --example with-typescript-emotion
# with yarn
$ yarn create nextron-app my-app --example with-typescript-emotion
# with pnpx
$ pnpx create-nextron-app my-app --example with-typescript-emotion
examples/with-typescript-less
# with `nextron`
$ nextron init my-app --example with-typescript-less
# with npx
$ npx create-nextron-app my-app --example with-typescript-less
# with yarn
$ yarn create nextron-app my-app --example with-typescript-less
# with pnpx
$ pnpx create-nextron-app my-app --example with-typescript-less
examples/with-typescript-material-ui
# with `nextron`
$ nextron init my-app --example with-typescript-material-ui
# with npx
$ npx create-nextron-app my-app --example with-typescript-material-ui
# with yarn
$ yarn create nextron-app my-app --example with-typescript-material-ui
# with pnpx
$ pnpx create-nextron-app my-app --example with-typescript-material-ui
examples/with-typescript-python-api
(Note: When working with the with-typescript-python-api example, see the example's readme file for python setup details)
# with `nextron`
$ nextron init my-app --example with-typescript-python-api
# with npx
$ npx create-nextron-app my-app --example with-typescript-python-api
# with yarn
$ yarn create nextron-app my-app --example with-typescript-python-api
# with pnpx
$ pnpx create-nextron-app my-app --example with-typescript-python-api
Develop
Basic
$ git clone https://github.com/saltyshiomix/nextron.git
$ cd nextron
$ yarn
$ yarn dev # default is examples/with-javascript
pnpm
or npm
are also supported.
examples/*
Developing $ yarn dev <EXAMPLE-FOLDER-NAME>
Related
- create-nextron-app - Create Nextron (Electron + Next.js) apps in one command
⚡ - Nuxtron -
⚡ Electron + Nuxt.js⚡
License
This project is licensed under the terms of the MIT license.