Easily Convert your React Native Project To Desktop App

As someone who has gone through the emotional turmoil you are currently experiencing when it comes to building your react native projects to a desktop app, I totally understand your frustration, and because I've been in that position at one point in my life and made it out, I'm telling you, you will too, so just stick with me.

Now popularly React Native is popularly known for mobile development as it is a framework for React, which is a web development tool. Here comes the huddle using react native to build a Windows desktop (.exe or MSI) app. React Native has a broader library, which is "React native for Windows", which is basically for building desktop apps, but as you can testify to it, just like I did, the documentation is a little too thin, leaving us with more questions and confusion as opposed to solutions. Now here comes the approach I used to solve this big issue, and it got me unstuck and believing again. All the built-up tension from trying too many things and endless failed debugging mode came to an end, so I'll let you in on it if you're still with me as we go.

First things first, my approach is built on you developing your mobile apps as you normally would countless number of times, up to the point that you are ready to deploy as a desktop app in production or as a desktop app in development mode, but keep in mind, while you are building your app, make sure it works on the web as well. I mean, as you test your app in development mode on your physical devices or emulator, test on the web as well to ensure your app scales to the screen, as how your app views on the web is exactly how your desktop app will view. This is a prerequisite, so do it before coming to this post, so I can literally walk you through it myself. Now I will use an Expo managed project to explain this because I make use of Expo myself, but that doesn't mean this approach doesn't work on a bare react native workflow. I just haven't tried it yet, but I believe it should, so you can give it a try.

Step 1

If you get to this paragraph, that means you're ready for the next step (building your desktop app). Now, since your app works on the web in development mode, run

npx expo export

This command will build your app for Android, iOS, and the web. If this doesn't work for you, you can try

npx expo export:web

Note: This command requires having webpack installed in your project, else it won't work. So to install webpack, run

npm install @expo/webpack-config@^19.0.1 @pmmmwh/react-refresh-webpack-plugin@^0.5

This will install Webpack and make the build work successfully, but sometimes it might act up, so the first approach is easier.

If you encounter any error or your build wasn't successful, debug the error, make necessary corrections to your project, and rebuild.

If you got to this paragraph, it means your build was successful. Massive congratulations to you because you are 60% done already. Now let's proceed. Since your build was successful, check your project root folder. For people who used npx expo export, you should find a dist folder added to your folder structure, and for people who used npx expo export:web, you will see a web-build folder. These folders are important as they are the foundations of our desktop app, so confirm they exist in your project root directory.

Step 2

Since we now have the dist or web-build folder, proceed, we need to install Tauri and Rust. npm is also needed, but I don't think you can get to this stage if you don't have Node already working in your development environment. These are the packages that will make our journey seem like a walk in the park. It simplifies all the procedures. To download Rust, click the link below

click me to download Rust

Once downloaded, when you click on it to install, it opens a terminal with 3 options: choose the one that says install Rust with all of its dependencies. This is usually the third option, but the arrangement might change. Once the installation is complete, run

rustc --version

cargo --version

If your installation was successful, you should see their versions in your terminal; else try installing Rust again.

Step 3

Since we now have Rust installed globally on our development environment, we will be using Tauri to convert our app to an exe, leveraging the dist or web-build folder we generated in stage 1. To install Rust globally, run this command

windows

npm install -g @tauri-apps/cli

make sure you have Visual Studio Build Tools. I'm not sure if that is a requirement, but I have it on my device already sometimes back before running this Windows command, but you can try it without Visual Studio, and if it fails and the error message was relating to Visual Studio, then you can get it.

Linux

cargo install tauri-cli

And ensure you have dependencies like libwebkit2gtk and build-essential on your development environment.

macOS

brew install tauri-cli

Confirm if Tauri is installed successfully using this command

tauri -V

Step 4

In your project directory, run

npx tauri init

Once it initialises, it will ask you a few questions like

• What is your app name?

• What should the window title be?

(this means the name you want your exe file to be called)

• Where are your web assets (HTML/CSS/JS) located, relative to the "/src-tauri/tauri.conf.json" file that will be created?

(Now this is very important; it is asking for the name of the folder we generated in step 1.) This question usually has a placeholder in front of it like ../build. Just delete the "build" and replace it with your own folder name, eg dist or web-build
so your answer should be like ../dist or ../web-build

• What is the URL of your dev server?

(This means in development mode, when you try to run your project on the web, what was the host it loaded on). Your answer resembles something like http://localhost:3000. Just make sure the host you provide is where your project actually runs on

• What is your frontend dev command?

(meaning, when you want to run your project in development mode, what command do you use). For Expo users, your answer should be like npm start
For bare react native users, just type the command you use

• What is your frontend build command?

(This means what command do you use to build your project for production. Now just stick with whichever command you used in stage 1 that gave you your dist or web-build file. Stick with it because that command already proved to be successful with your project, so when Tauri runs it, it won't fail. Your answer should be like npx expo export or npx expo export:web or whatever you used.

After all these questions, check your project directory; you will see a newly added folder called src-tauri. Open it and go to the file tauri.conf.json. Look out for the key "identifier" it will look like this "identifier": "com.tauri.dev" the com.tauri.com is a placeholder, change it with your own. Your own identifier can be like com.yourname.yourappname. It wasn't that we generated this before, it is just a way of making our app unique, just like we are required to provide a packname for Android apps and bundleIdentifier for iOS . Save the file and click the Cargo.toml file while still inside the src-tauri folder look for this tauri-plugin-log = "2" and change it to tauri-plugin-log = "2.0.0" save the file and lastly navigate to your package.json file in your project root directory under the script key add "tauri": "tauri" so your package.json script should now look like this

"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"lint": "expo lint",
"tauri": "tauri"
},

Now save the file.

Step 5

If you make it here, congratulations, you're almost done. All that remains is to run the command.

if you want to run in dev mode

npm run tauri dev

if you want to run in Production mode

npm run tauri build

Now, from here, your build should run successfully, and it might take a while for Rust to bundle all the required tools if you're using it for the first time. At this stage, I don't expect you to have any errors, but if you do, check the error message and try correcting whatever the process is complaining about. After a successful build, you should find your .exe and MSI path in this directory

(projectRootDirectory)\src-tauri\target\release\bundle\msi\wallora_0.1.0_x64_en-US.msi

(projectRootDirectory)\src-tauri\target\release\bundle\nsis\wallora_0.1.0_x64-setup.exe

Now I know it's taken a bit of our time getting here, but I'd say it's worth it, won't you agree? I know how frustrating the chaos, debugging, and not figuring out what to do to resolve a failure can be, which is why I took my time to take us through all the steps detailedly. Congratulations once again for reaching this part, and now that frustration is behind you.

Did this post help simplify things for you?

I hope this helped you a lot. If yes, drop a ❤️ or 🦄 reaction and follow me here on dev.to. I share more practical, plain-English breakdowns like this.

You can also connect with me on social media. I’d love to learn, share, and grow together with you!

LinkedIn: LinkedIn
Twitter: Twitter
Instagram: Instagram
Graphics Credit: mobilecoderz.com