How to Build a Desktop App With React Native for Windows

In the first post about React Native Windows I discussed the advantages and features of this framework. In this article I would like to dive deeper into the technology and share practical knowledge and technical steps that must be taken to develop a desktop app with React Native for Windows.

Creating a React Native Windows project

Setting up a React Native Windows project is different for greenfield and brownfield (if you aren’t familiar with the terms, read our previous post about brownfield development with React Native).

I will guide you through these two case scenarios:

Greenfield

A greenfield project is easy to create because all you need to do is to carefully follow the steps described in the Microsoft's Getting Started guide. After creating the project you should see your repository provided with the `windows/` directory, which is where (next to iOS and Android) native Windows implementation is placed.

But to keep the project in good shape, we should separate the native implementation from the main JavaScript implementation by creating a directory where all the JavaScript sources will be.

It can be named `scr/`, `Source/` or anything meeting your standards. From now on you are ready to start implementing your application.

Brownfield

The UWP application is based on XAML pages which hold all the application content. It is still the same with the React Native Windows app, which has exactly one page in it keeping the main App.js component.

So if you already have the UWP application project as a legacy and would like to port it to the RNW, or to extend it with the RNW content, all you have to do is this:

Create a RNW project the same way as a Greenfield project
Move the current (legacy) UWP solution into the created project
Add new native XAML Page with the following content:

where ^YourAppName is the name of a created RNW project for your new application.

And that's it! Next time you launch your application and navigate to the RNWContentPage, you will see the view implemented in the JavaScript.

Developing your desktop application

Once you have your project created, you can carry on with adding new features to your application.

You started a React Native Windows project, so for more help with JavaScript language please check out this JavaScript tutorial as this language should be used mostly in the RNW project.

But if you would like to tackle the native side, then you definitely need to check out how to implement the native module in React Native Windows.

Remember that the idea behind React Native Windows is to make sure that the development environment, workflow and experience is the same as in React Native, so all best practices when it comes to project structure, architecture, and code are the same.

If you are new to both React Native and React Native Windows development, let me share the official documentation about React Native fundamentals.

Testing

When starting to develop an app, you naturally want the app to be stable and covered with tests. The more items, cases and scenarios you test, the higher the test coverage, and this is something highly recommended. With React Native Windows getting high test coverage is easier to achieve thanks to a wide array of tools available.

As already mentioned: the majority of your app should be written in JavaScript code on the React Native layer, so your focus will not be on testing the native side.

There are plenty of libraries that can ease the tests development and the choice is yours. To make an informed decision, check our article collection on testing your React Native application.

Debugging

Each time you launch your application during the development process, you can debug your JavaScript code using the Visual Studio Code setup provided with the React Native Tools plugin.

All you have to do to perform the debug session is to create a new file .vscode/launch.json in the root directory of the application folder and place there the following configuration:

After that you can just start your app by pressing F5 (or through the "Run" Ctrl+Shift+D tab) and start debugging.

Publishing

So the development is over and you would like to proudly share your results with the world, right? No problem, React Native Windows got you covered!

To safely publish your application you can use the Microsoft Store.

Throughout the development process we were testing and debugging the application in its Debug configuration, which required running the Metro separately to launch the app.

To avoid that and create the app package ready for publishing we will need to build the standalone React Native Windows app.

To do that, first open the solution of your app in the Visual Studio. The solution can be found in the windows/ directory in the root folder of the project.

This windows/ directory will contain the .sln file with the name of your application. Once the solution is opened and loaded in the Visual Studio, select the Release configuration from the Configuration Manager drop-down and build it.

To create the package ready to be published use the Project -> Publish -> Create App Packages option. The build artifacts can be found in the same directory as your .sln file in the <root>/windows/AppPackages/ directory.

Summary

And that's it! We went through setting up, developing, testing and debugging our React Native Windows application, and now it’s ready to be published.

<p-bg-col>Key takeaway: React Native Windows can support you with all the stages of an application development - starting from scratch or extending the existing one. Just like React Native, it has a variety of tools available for each stage so whatever path you are on, React Native Windows is definitely worth considering. It’s a very developer-friendly framework.<p-bg-col>

If you want to learn more about desktop app development with React Native for Windows, check our podcast episode: React Native Development on Windows | Ep #8. Together with Mike Grabowski, we discuss the technology in detail.

‍

Also, I did a Windows app using React Native Windows. It's supposed to organize your notes and tasks, but the main idea behind this project was to implement a combination of native and React Native technologies for Windows and to test their limitations. You can check the results on GitHub!

‍

React Native Notes - demo video

‍