How to Install and Set Up Proton Native on Ubuntu 19.04

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 [email protected] -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!

3 thoughts on “How to Install and Set Up Proton Native on Ubuntu 19.04

  1. Here the error I am getting,

    [email protected]:~/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.

    [email protected]:~/Desktop/proton$

  2. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.