DEV Community

Shiono Yoshihide
Shiono Yoshihide

Posted on

4 3

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,

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay