How to create a self-contained application in React-Native for Windows?

Viewed 174

I was required to create a native desktop app for Windows. Since, I'm experienced with React, I was thinking building the app with React-Native for Windows.

The app is required to be published only in my local network, not on the Internet.

How can I build my app such that it will be a self-contained application where I can install it in each computer in the LAN?

1 Answers

I will try to summarise it for you, but just to tell you in advance, it's not as simple as developing for Android.

Initialisation

First of all, to create a new React Native App for Windows, you usually start as you're used by creating the app using a command like:

npx react-native init <projectName> --template react-native@^0.68.0

Then, you need to instal the Windows extension:

npx react-native-windows-init --overwrite

Before diving deep into it, it's good to familiarise yourself with the React Native Windows CLI, so please, check this page: https://microsoft.github.io/react-native-windows/init-cli

You will be able to run and test your app in Windows by using:

npx react-native run-windows

If you're using VSCode:

Open your applications folder in VS Code and install the React Native Tools plugin for VS Code.

Create a .vscode/launch.json and save it like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Windows",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "windows"
    }
  ]
}

Don't forget to configure Debug Windows (in debug menu for VSCode) and press the green arrow to start debugging the app.

Afterwards, you can use the Native Modules for Windows and implement your application as you want.

Check this for more info about the Native Modules:

https://microsoft.github.io/react-native-windows/docs/native-modules

And this for the first steps in more detail:

https://microsoft.github.io/react-native-windows/docs/getting-started

Deployment

Since React Native Windows apps are Universal Windows Platform (UWP) you can either publish to the Store and set it as a private App and give access only to people of your network, or you can try to run the UWP App locally.

If you want to publish to the Store, you have to create an account and do some configuration and validations steps, please check this: https://microsoft.github.io/react-native-windows/docs/app-publishing

You can limit the distribution of an app to only a certain group of testers, without first publishing a submission that's broadly available

If you go without publishing to the Store, you should have .NET Framework and other dependency on system before installing the app.

In my opinion the easiest way is to create a package (like for publishing to store) and then with PowerShell install it on another PC. Just treat it like a normal UWP afterwards.

Related