{"id":5267,"date":"2023-01-10T10:36:27","date_gmt":"2023-01-10T10:36:27","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=5267"},"modified":"2023-01-10T11:00:24","modified_gmt":"2023-01-10T11:00:24","slug":"react-native-app-targeting-mobile-web-desktop-with-expo-tauri","status":"publish","type":"post","link":"https:\/\/www.dianapps.com\/blog\/react-native-app-targeting-mobile-web-desktop-with-expo-tauri\/","title":{"rendered":"React Native App Targeting Mobile, Web & Desktop With Expo & Tauri"},"content":{"rendered":"

The JavaScript ecosystem has been booming rapidly since the time of its establishment. And why not? With the implementation of new tech-savvy frameworks and libraries, the development of a platform has been unified, simplified, and accelerated.\u00a0<\/span><\/p>\n

Due to this, the developer\u2019s community today can seamlessly operate web, mobile, and even desktop applications vividly by using a single JS codebase.\u00a0<\/span><\/p>\n

In this blog, we\u2019ll be seeing how React Native apps targets and combines mobile and web app alongside the integration of a recent cross-platform desktop framework, popularly known as Tauri.\u00a0<\/span><\/p>\n

How Tauri is defined by the JS experts? Let\u2019s know about this in detail below!\u00a0<\/span><\/p>\n

<\/span>What is Tauri?\u00a0<\/span><\/span><\/h1>\n

Tauri is a relatively new framework that enables developers to build cross-platform desktop apps by using ground-level website technologies alongside the Rust programming language. It\u2019s said to be an alternative to the mature and famous JS framework\u2013Electron. However, they do have some dissimilarities in terms of architecture.\u00a0<\/span><\/p>\n

The integrated Chromium and Node.js runtime that comes with Electron enables developers to leverage all available browser and node APIs, enabling them to create rich feature apps quickly and share their business logic with web apps. However, it could be a bit excessive to incorporate every potential feature supplied by Chromium when not required for straightforward and smaller companies.<\/span><\/p>\n

Whereas,Tauri is developed in Rust, therefore, making it a secure and well-performing framework that gives inclusive designs and great compatibility when involved with any front-end framework.\u00a0<\/span><\/p>\n

The new framework also allows you to develop apps for all the important desktop platforms, including macOS, Windows, and Linux devices.\u00a0<\/span><\/p>\n

<\/span>How can you make React Native code run on Tauri?<\/span><\/span><\/h2>\n

As we have mentioned, Tauri’s frontend component may utilize any JS framework. In order to share our JS code amongst mobile applications, online apps, and desktop apps, React Native Web can be combined with the Webpack bundler. Here, we can take use of <\/span>yarn workspaces<\/span><\/a> to build a monorepo structure that divides our apps from shared business logic and UI. Although it’s not necessary, you can also accomplish it with basic React Native and React Native Web, we\u2019ll involve <\/span>Expo<\/span><\/a> to have Webpack built and configured for mobile and web development. Further to this, we\u2019ll leverage the same Expo configuration updated with Webpack, which may resolve, for desktop development with Tauri\u2013 resolve .tauri.[ext] files. This will allow us to create some Tauri-specific code.<\/span><\/p>\n

You can get the complete code in<\/span> this repository<\/span><\/a>.<\/span><\/p>\n

<\/span>What does it look like?<\/span><\/span><\/h2>\n

The below-mentioned repository is grouped into four packages:\u00a0<\/span><\/p>\n