React, the popular JavaScript library has an imperative role in web development. React Native, a framework to build cross-platform mobile applications is also based on React library. So if we learned React JS, we can work as a web/mobile app developer. But can we build a native desktop application using React? Yes! using Proton Native. Here we will learn to install and set up Proton Native on Windows 10.
What Proton Native does for desktop app development is similar to what React Native has done for mobile. It uses native components to build native cross-platform desktop applications.
There are some other JavaScript frameworks to build native cross-platform desktop applications like Electron JS, Meteor, NW JS, etc. We can integrate React with these frameworks also. But Proton Native is based on React as default.
Steps to Install Proton Native on Windows 10
So here we are going to discuss the steps in installing Proton Native on our Windows system.
1. Install Nodejs
Node.js actually provides a runtime environment to execute JavaScript code from outside a browser. NPM, the default package manager for Nodejs is used for managing and sharing the packages for any JavaScript projects. Proton native uses Node.js and NPM for the management of dependencies and runtime.
In this tutorial, we are going to install Proton native using the Node Package Manager(NPM).
So first, it needs to install Nodejs on our system. NPM will be installed with Nodejs. The current stable version of Node.js can be downloaded and installed from the official website that is given below.
https://nodejs.org
You can see two versions on the main page. The stable version and the latest version. The stable version is recommended for most users. Currently, 12.16.1 is the stable version of Nodejs and we need to download it.
It downloads an EXE file to your system. Now install it on your system. If there is any doubt, the screenshots I provided below will help you.
1.1 Start the installation wizard
The first step is to start the installation wizard by running the installation file.
1.2 Accept the license agreement
Now accept the license agreement and click Next.
1.3 Choose the installation directory
AS default, Node.js installed in the Program Files directory. If you are preferring another, it can be chosen from this step.
1.4 Select the features
We can customize the features to be installed with Node.js. But here, we don’t need to bother about it. Just click Next.
1.5 Install tools for Native Modules
In this step, you can optionally install tools like Python2, Visual Studio Build Tools, etc. Just skip and click Next.
1.6 Start installation
Now click the Install button to start Node.js installation.
7. Finish the installation
After a successful installation close the installation wizard by clicking the Finish button.
Now, verify Node.js and NPM are installed on our system. Open Command Prompt and check the Node and npm versions with the below commands. You can see the versions as it shows in the below image.
Note:- If you don’t know how to open Command Prompt, press the Windows key on your keyboard and search for “cmd”.
node -v npm -v
2. Install Proton Native
We have installed Nodejs. Now we can install Proton Native using Node Package Manager(NPM).
npm install -g create-proton-app
3. Creating a New Proton Native Application
After successful installation of Proton Native, we can now create a new project using create-proton-app.
create-proton-app awesome-project
We can combine the steps 3 and 4 with a single NPX( package runner tool that comes with NPM 5.2+) command.
npx create-proton-app awesome-project
4. Running Our App
Now enter into the project we have created and start our application with the commands below.
cd awesome-project npm start
This will open a new application window on our windows system.
TechoTip: We recommend using Visual Studio code as the source-code editor for working with Proton Native projects.
Summary
So we have learned the steps to install Proton Native on Windows 10 using Node.js and NPM. We also created a simple “Hello World” app using it.
This recipe doesn’t worked for me. Gives verbose error output.
Can you please post the error here?
Getting following error:
D:\Envision\React\proton-app-sample\index.js:46
(0, _protonNative.render)(_react2.default.createElement(Example, null)); // and finally render your main component
^
TypeError: (0 , _protonNative.render) is not a function
at Object. (D:/Envision/React/proton-app-sample/index.js:17:1)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at loader (D:\Envision\React\proton-app-sample\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions. [as .js] (D:\Envision\React\proton-app-sample\node_modules\babel-register\lib\node.js:154:7)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
at Object. (D:\Envision\React\proton-app-sample\node_modules\babel-cli\lib\_babel-node.js:154:22)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! proton-app-sample@0.0.1 start: `babel-node index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the proton-app-sample@0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
What is the version of Node.js and npm in your Windows system?
on windows:
npm install –global –production windows-build-tools
The install method has changed since V2. 16/03/20 –
Throw away step 2 and replace step 3 with
npx proton-native-cli init awesome-project
i have issues in project when i run command npm start my terminal show
me
This type of error
‘node_modules’ is not recognized as an internal or external command,
operable program or batch file.