Search for a command to run...
No comments yet. Be the first to comment.
Low-code platforms can be excellent for validating an idea. The risk begins when a temporary launch stack becomes permanent infrastructure for a growing product.
A practical, opinionated baseline for securing fresh Debian/Ubuntu VPS servers before deploying real apps.
How to enable HTTPS on localhost with Vite and mkcert
There are two kinds of developers: those who fear regex, and those who use it like a superpower. The funny part? It’s the same tool — the difference is perspective.Most people think of regex as the thing you use to validate emails, phone numbers, or ...
Why accessibility is everyone’s responsibility
Desktop applications have been an essential part of the software industry for decades. With the increasing demand for user-friendly and responsive applications, developers are always on the lookout for better tools and frameworks to create top-quality desktop applications.
Over the years, several desktop application development frameworks have emerged, with each having its strengths and limitations. However, with the rise of web technologies and the growing popularity of cross-platform development, many developers are turning to web-based frameworks to build desktop applications.
In this article, we will explore how Next.js and Tauri can be used together to build high-quality cross-platform desktop applications using web technologies. We will discuss the advantages of using Next.js and Tauri, how they compare to other popular desktop application development frameworks, and some real-world examples of applications built using these technologies.
When comparing desktop application development frameworks, there are numerous popular options available, such as Electron, NW.js, and JavaFX. However, the combination of Next.js and Tauri offers a distinct set of advantages that set them apart from these other frameworks.
Let's take a quick look at the limitations of these frameworks:
Electron, a widely-used framework, is often criticized for its large memory footprint and slow start-up times, which can negatively impact the user experience. This is primarily because Electron applications bundle an entire Chromium instance, leading to increased resource consumption. This means that even simple applications built with Electron can consume a significant amount of system resources, which can be especially problematic for users with lower-end hardware or those running multiple applications simultaneously. As a result, developers may face challenges in optimizing their applications for performance and efficiency when using Electron as their framework of choice.
NW.js, an alternative popular choice among developers, presents its own unique set of limitations, particularly in terms of providing comprehensive support for Linux platforms. This can pose a significant drawback for developers who aspire to design and develop cross-platform applications that cater to a diverse and extensive range of users, including those who rely on Linux-based systems. Consequently, developers may find themselves struggling to ensure seamless functionality and compatibility across different operating systems when utilizing NW.js as their primary framework.
JavaFX, a well-established framework, requires developers to have a solid understanding of the Java programming language. This can be a barrier for those who are not well-versed in Java or prefer to work with other languages. This prerequisite can pose a significant challenge for those who may not have a strong background in Java or have a preference for working with alternative programming languages. As a result, the requirement to master Java can potentially create a barrier to entry for some developers, especially when they are tasked with the development of cross-platform applications catering to a diverse and extensive range of users, including those who rely on Linux-based systems.
In contrast, Tauri has emerged as a strong contender in the realm of cross-platform development, boasting remarkable compatibility across a wide variety of platforms, including Windows, macOS, and Linux. This enhanced versatility makes these frameworks a more appealing and flexible option for developers who are seeking to create applications that can effortlessly cater to the needs and preferences of users, irrespective of the operating system they employ.
By opting for Tauri, developers can potentially overcome the challenges associated with NW.js and Electron, thereby delivering a more efficient and high-performing application experience to their end users.
Now that we have established a starting point, let's set up our development environment. To accomplish this, we will need to fulfill a few prerequisites, since Tauri is built on top of the Rust language, some additional installations must need to be performed.
I'll be following the guide for macOS since that's my current operating system but feel free to select the one that matches yours.
xcode-select --install
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
If everything goes well, you'll see a log like this one:
Rust is installed now. Great!
Now let's create a fresh install of a Next.js application:
npx create-next-app@latest --use-npm --typescript
I would call my app my-desktop-app, again name it as you like :)
Important: Next.js will ask you if you want to try the new and experimental
app/directory. You must selectNobecause it does not yet support thenext exportcommand.
Then modify the next.config.js and set the image option unoptimized: true. This is required to use NextJS Image in SSG mode.
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
+ images: {
+ unoptimized: true,
+ },
}
module.exports = nextConfig
and add an export script to your package.json :
{
"name": "my-desktop-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
+ "export": "next export",
"start": "next start",
"lint": "next lint"
},
...
As I said before Tauri is built on top of Rust core, so let's add it:
npm install --save-dev @tauri-apps/cli
Also, add a tauri script to your package.json:
"scripts": {
"dev": "next dev",
"build": "next build",
"export": "next export",
"start": "next start",
"lint": "next lint",
+ "tauri": "tauri"
},
...
Now we are good to go with the project generation:
npm run tauri init
After executing that command you should see a similar output log:
and a file structure like this one:
I am planning an article that covers more advanced content related to the Tauri project and the Rust language.
The only step left is to run your project:
npm run tauri dev
You should see your Desktop app up and running!
That's it, hope you enjoyed this tutorial, now you can start to craft some amazing cross-platform Desktop apps.
Let me in the comments what you have built with Next and Tauri or if you rather prefer another technology!
As usual, I already have created for you a fully-fledged, configured template with several add-ons in this link:
TypeScript for static type checking
ESLint for code linting
Prettier for code formatting
Pretty-quick runs prettier over changed files
For git integration, it has also:
Conventional commits for improving commits
Husky for improving commits
Thank you for reading! Any constructive feedback is greatly appreciated!
