DEV Community

Shiono Yoshihide
Shiono Yoshihide

Posted on

create-nextron-app: Create an Electron with Next.js app in one command

Thanks to npx or yarn, you can create Nextron (Electron + Next.js) apps in one command :)

TLDR

Use create-nextron-app.

# with npx $ npx create-nextron-app test-app # with yarn $ yarn create nextron-app test-app 
Enter fullscreen mode Exit fullscreen mode

CLI Options

By using --example option, you can specify an example to create.

# with npx $ npx create-nextron-app test-app --example with-typescript-material-ui # with yarn $ yarn create nextron-app test-app --example with-typescript-material-ui 
Enter fullscreen mode Exit fullscreen mode

Examples

All examples are listed here.

There are 12 examples for now:

- custom-build-options - custom-server - custom-server-nodemon - custom-server-typescript - ipc-communication - parameterized-routing - with-javascript - with-javascript-ant-design - with-javascript-material-ui - with-typescript - with-typescript-less - with-typescript-material-ui 
Enter fullscreen mode Exit fullscreen mode

PRs and Contributions are Welcome

I'm new to OSS and have some beliefs for Nextron:

  1. Show a way of developing desktop apps only web knowledge
  2. Easy to use
  3. Be transparent (Open to OSS developers)

GitHub logo saltyshiomix / nextron

⚡ Next.js + Electron ⚡

NPM version NPM downloads Package License (MIT) AWESOME NEXTJS

Support

Next.js vs Nextron










































next nextron
v14.x v9.x

v12.x / v13.x
v8.x
v11.x v7.x
v10.x v6.x
v9.x v5.x
v8.x v4.x
v7.x
v2.x / v3.x
v6.x v1.x

Package Manager

npm, yarn and pnpm are supported.

My Belief for Nextron

  1. Show a way of developing desktop apps with only web knowledge
  2. Easy to use
  3. Be transparent and open to OSS developers

Usage

Create Application with Template

We can use examples/* as a template.

To create the examples/with-tailwindcss, run the command below:

# 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 

Run Electron with Development Mode

Run npm run dev, and nextron automatically launches an electron app.

{ "scripts": { "dev": "nextron" } }
Enter fullscreen mode Exit fullscreen mode

Production Build

Run npm run build




GitHub logo saltyshiomix / create-nextron-app

Create nextron (Next.js + Electron) apps in one command ⚡

Create nextron (Next.js + Electron) apps in one command ⚡

Usage

With npm

# `basic-lang-javascript` example $ npx create-nextron-app my-app # `with-tailwindcss` example $ npx create-nextron-app my-app --example with-tailwindcss
Enter fullscreen mode Exit fullscreen mode

With yarn

# `basic-lang-javascript` example $ yarn create nextron-app my-app # `with-tailwindcss` example $ yarn create nextron-app my-app --example with-tailwindcss
Enter fullscreen mode Exit fullscreen mode

Examples

https://github.com/saltyshiomix/nextron/tree/main/examples

Related

Nextron - ⚡ Electron + Next.js ⚡






Conclusion

Developing Electron apps is sometimes facing a problem, so I hope that nextron or create-nextron-app helps those who want to create Electron with Next.js apps :)

Thank you for your reading this article.

Best,

Top comments (1)

Collapse
 
kumard3 profile image
Kumar Deepanshu

How you make that command line tool , can you share something, it will be very helpful..