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. 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.
So here we are going to discuss the steps in installing Proton Native on our Ubuntu system.
1. Install Nodejs
In the tutorial, we are going to install Proton Native using the Node Package Manager(NPM). So first, we need to install Nodejs on our system.NPM will be installed with Nodejs itself.
So, the latest version of Node.js can be installed on our system using the commands below. Currently, 12.4.0 is the latest version of Nodejs.
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs
2. Update NPM(OPTIONAL)
Node Package Manager(NPM) will be installed with the Nodejs itself. But if we can update it to the latest version using the below command.
sudo npm install npm@latest -g
3. Install Proton Native
We have installed Nodejs. Now we can install Proton Native using Node Package Manager(NPM).
npm install -g create-proton-app
4. 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
Note:-
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
5. 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.
Have a nice code!
Here the error I am getting,
syed@syed:~/Desktop/proton$ npx create-proton-app awesome-project
Creating a new Proton Native app on /home/syed/Desktop/proton/awesome-project
Installing packages… This may take a few minutes.
> [email protected] install /home/syed/Desktop/proton/awesome-project/node_modules/libui-node
> libui-download && autogypi && npm run build
Downloaded zip: /home/syed/.libui/libui-shared-linux-x64-alpha3.5-master-008.tar.gz
Libui binaries extracted to: /home/syed/Desktop/proton/awesome-project/node_modules/libui-node
> [email protected] build /home/syed/Desktop/proton/awesome-project/node_modules/libui-node
> node-gyp configure build
/bin/sh: 1: pkg-config: not found
gyp: Call to ‘pkg-config gtk+-3.0 –cflags-only-I | sed s/-I//g’ returned exit status 0 while in binding.gyp. while trying to load binding.gyp
gyp
ERR! configure error
gyp ERR!
stack Error: `gyp` failed with exit code: 1
gyp ERR!
stack at ChildProcess.onCpExit (/usr/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:344:16)
gyp ERR!
stack at ChildProcess.emit (events.js:198:13)
gyp ERR!
stack at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp
ERR! System Linux 5.0.0-25-generic
gyp
ERR! command “/usr/bin/node” “/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js” “configure” “build”
gyp ERR! cwd
/home/syed/Desktop/proton/awesome-project/node_modules/libui-node
gyp ERR!
node -v v10.16.3
gyp ERR!
node-gyp -v v5.0.3
gyp
ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm
ERR! [email protected] build: `node-gyp configure build`
npm ERR! Exit status 1
npm
ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm
WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR!
A complete log of this run can be found in:
npm ERR! /home/syed/.npm/_logs/2019-08-25T13_45_04_213Z-debug.log
npm
WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”linux”,”arch”:”x64″})
npm ERR!
code ELIFECYCLE
npm ERR! errno 1
npm
ERR! [email protected] install: `libui-download && autogypi && npm run build`
npm ERR! Exit status 1
npm
ERR!
npm ERR!
Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/syed/.npm/_logs/2019-08-25T13_45_05_331Z-debug.log
An error ocurred:
npm install has failed.
syed@syed:~/Desktop/proton$
I saw the error you got. So can you please install libgtk-3-dev
sudo apt install libgtk-3-devand now create your project.
npx create-proton-app awesome-project
I get:
In file included from ../../nbind/include/nbind/api.h:71:0,
from ../../nbind/include/nbind/BindDefiner.h:11,
from ../../nbind/include/nbind/noconflict.h:8,
from ../../nbind/include/nbind/nbind.h:8,
from ../../nbind/src/common.cc:4:
../../nbind/include/nbind/v8/BindWrapper.h: In member function ‘void nbind::BindWrapperBase::addInstance(v8::Local)’:
../../nbind/include/nbind/v8/BindWrapper.h:139:24: warning: ‘void v8::PersistentBase::MarkIndependent() [with T = v8::Object]’ is deprecated: Weak objects are always considered independent. Use TracedGlobal when trying to use EmbedderHeapTracer. Use a strong handle when trying to keep an object alive. [-Wdeprecated-declarations]
ref->MarkIndependent();
^
When I try to run $ create-proton-app my-app