Tag: vuejs

GETTING A QUASAR BUILD RUNNING AS APP ON UBUNTU TOUCH

Here is my journey to see if I can make a basic Quasar app work on Ubuntu Touch.
I should preface that I have never built an Ubuntu Touch app and I’m not even done my Quasar course
but there are enough people interested in this so I want to stop everything and try…

Quick Overview of Ubuntu Touch Apps and Quasar

To get familar with the Ubuntu Touch directory structure stuff, I git cloned this simple hymnal app since I knew it was mainly based on html website stuff and likely would not have complicated databae backend stuff going on. You may wish to do the same.

Build an Ubuntu Touch App with Clickable

What is clickable? It’s the thing Brian Douglass made, of course. And who is Brian Douglass Brian is just super great and one of the main/only reasons I started learning how to program. Thanks Brian again!!

Here is a link to UBport’s App Development for Ubuntu Touch

I will start by forcing myself to actually read the docs! Painful for a guy like me but I’ve learned that this is the right way to suffer less… I will start by reading all the links in the ‘Guides’ section on the link above.

In there, I found Lionel Duboeuf’s video on clickable. Nice! Thanks, Lionel (another great guy).

First, don’t rely on my commands here that I reference. Always go to the documentation page to make sure they are all updated. I’m just putting them here mainly for my own log.

Part of my journey was discovering that the clickable documentation assumes I would know what order to install dependent packages. Unfortunately that was not true so my journey was a bit painful. I’ll try to spare someone else this part of the journey. The docs instruct to install docker, adb, git and pip3 but it doesn’t say to make sure that you do these first and that the rest won’t work. At least this is what happened to me. So maybe just follow my order:

  1. Install adb (search it online but I recall it was just sudo apt install adb)
  2. Install git (probably sudo apt install git)
  3. Install pip3 (the python thingy that installs more python thingies) so that you can install Clickable. sudo apt install python3-pip should be the right command… but your terminal should tell you if I’m wrong, ha
  4. Install clickable: This page says everything. I’m waiting for an answer on why pip3 install method is recommendd over PPA method. I’m assuming it has to do with docker functionality? Anyway, I’m up and running with the following command so roll with this: pip3 install git+https://gitlab.com/clickable/clickable.git
  5. Install Docker: See dedicated instructions below
  6. Run clickable in the terminal but don’t do so until Docker is fully installed! It requires Docker!

Installing Docker

This part of the process, for me, required a dedicated section and a lot of learning. If you are already set up with Docker you can probably just skip all this. But for those like me who have never used it this section should save you a lot of pain.

Apparently you need the latest ‘engine’ for Docker and for Ubuntu that is found here. This part was pretty painful for me but it doesn’t need to be. I’ll leave a few of my long notes to scan through but you should be good to go to simply run:

sudo apt install docker.io

Feel free to run that and skip this next section if you want.

Installing Docker the Fast Way

As per above: sudo apt install docker.io will install it but it’s better to follow the docker instructions above.

Installing Docker the Long ‘Recommended way’

Setup some preliminary ‘stuff’ with this group of commands:

sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

Curl the gpg key with this command:

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

Looks like this next one sets up the right repository. Note! You can copy the back slashes and it works just find in terminal (somehow I never knew this…):

sudo add-apt-repository \
"deb [arch=amd64] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) \
stable"`

Run this:

sudo apt-get update

And then this:
sudo apt-get install docker-ce docker-ce-cli containerd.io

Finally, run a quick test to make sure it works:

sudo docker run hello-world


EDIT – 200427 apparently this next user section is not needed as it happens when you install Docker. Thanks

But don’t think you’re ready to go just yet! You have to make sure your Ubuntu machine has the right privelidges set for Docker.

Add Docker User to Ubuntu Group

If you know how to ‘add Docker to your user group’ or to check to see if you have it, then go ahead and do that and skip this section. For the rest of us, read on:

Apparently you can see what groups and users you have on your ubuntu machine by using this handy command, but note importantly that the list it outputs is not in alphabetical order:

For users: compgen -u
For groups: compgen -g

If all the Docker install stuff worked you should see ‘docker’ in the list under after running compgen -g

If you don’t, then if you run the following command you can add it. Be sure to replace the $USER – incuding the $ with your Ubuntu machine’s user name.

sudo usermod -aG docker $USER


CLICKABLE TIME – THE MOMENT OF TRUTH

This section now assumes that you have done all the steps above including Docker. Here is a quick review so you can check again:

  1. adb
  2. git
  3. pip3
  4. clickable
  5. docker

Before you do this next step, if possible, make sure you are on a wired connection or the fastest connection you can get. I will explain…

Ok, let’s do this. Type clickable in your terminal.

Note! this part is wacky and doesn’t deliver the usual ‘status’ stuff to know what’s going on and how long it will take. There were a lot of the following kind of messages in the terminal which were normal. Here are some notes I took so that you can feel less ‘curious’ about whether things are progressing or broken:

waiting
Download complete
Verifying Checksum
etc
etc
Download complete

At this ‘Download complete’ message this is where things hung for a long time for me. Apparently what is happening here is that an entire Docker image is being downloaded and set up and this is nearly 1 gigabyte of data.

Pull complete

Once I hit this stage ‘Pull complete’, then there was another batch of messages that included ‘verifying checksum’ and ‘Download complete’ at which point it again paused for a really long time.

After what seemed like forever in my case (bad wifi) it all ended the process.

It’s also interesting to note, but I have not tested, that apparently this long process only happens the first time you set up your app and subsequent updates you make to your app will not require this process, which is nice.

Ubuntu Touch(ing) Your Quasar Package

Now you’ve powered through that process you’re now ready to move your Quasar app to Ubuntu Touch. The good news is that this part is pretty easy! I’ll try to make this more of a step-by-step guide since probably we’ll all need to refer back to it.

Setup your Quasar stuff for the Ubuntu Touch stuff

This assumes you know what quasar build means and that you have have already run it in your quasar directory and have the ‘app’ ready to go. On my machine, the files we need are found in the /dist/spa directory.

  1. Create a directory on your development machine with your Ubuntu Touch app name somewhere logical for later use
  2. In the same directory create another directory called ‘www’ (you can probably call it what you want but might want to keep it ‘www’ for this tutorial for ease). To be honest I think the main purpose of doing this is to keep your source files in a logical spot. At least that’s why I did it…
  3. Go to your Quasar /dist/spa directory and copy all the files from there to the ‘www’ directory you just created in step 2.
  4. Set up your logo file for UT. I think there are two ways to do that so I’ll outline them both with a and b as follows:
    a) stick it in the main directory of your directory you created in step 2 above and give it the title (“icon.png”)
    b) stick your logo file in a logical place then go in and edit your appname.desktop file and point the following line to your icon: Icon=path/to/your/icon.png

Now you have the foundation laid and are ready to build the app

Build the Ubuntu Touch App Pre-Build Structure

  1. In your terminal cd inside your app’s top level directory, run clickable create which will create the structure for your app, not the app itself (the click file). I was mixed up on this for a while so note this.
  2. As Clickable walks you through the process, the key step is to select option 5 (HTML) . The rest of the options are for standard app building processes and details about those can be found if you’d like to learn more or just watch Lionel walk through it in his video.

Move your Quasar files to your Ubuntu Touch app structure

  1. Manually copy/move all the contents of your top level app `www’ directory into the newly-created /YourAppName/www folder (I wonder if we can automate this step later so the build script grabs it?)
  2. Run clickable desktop which gives you a really cool test emulation of the app before you build it. If everything seems to open up and work on your dev machine, continue.
  3. Make sure your Ubuntu Touch device is plugged in by USB (so that it will get the adb push of the app) and recognized. I also discovered there is a handy clickable tool clickable devices to do just that.
  4. Run `clickable’ which will build the app, and push your Quasar app to Ubuntu Touch as a click file. You should now be able to find a newly-created /YourAppName/build directory which should hold your shiny new Quasar appready to publish to OpenStore, or use on your local Ubuntu Touch device for whatever you need.

Success? Let me know if it helped and how the tutorial can be improved as I had to rush it out for someone 🙂

Tags : , , , ,

Getting Started With Quasar and VueJS on Ubuntu

After watching this recommended tutorial I decided to try out this Quasar thing. My true hope is that we can eventually add Ubuntu Touch as one of the buildable outputs at the end of app creation as it apparently might not be that hard with Cordova… but I digress…

I’m not an experienced developer yet so getting started with all these different ‘things’ I had to install with the terminal was getting a bit concerning. I decided to document my journey so that others can hopefully follow along and save some research and time.

So, if your goal is to be able to, without a great deal of pain, create a good looking app to run on Ubuntu, this might just help.

Without further adoo here are the steps that I took to get set up on my Ubuntu 18 LTS machine so that I’m ready to start using the Quasar framework. I left very brief notes to show what you are actually doing so that it’s not some random terminal script from some random blog:

  1. Install npm
    sudo apt install npm
  2. Download and install NVM (a thing to help you install and manage nodejs. Ubuntu repository for NPM is apparently not reliably up to date so that’s why we are using NVM. NOTE: Before beginning, check this page to make sure the following script I’m about to give you is up to date as it changes from time to time. Oh, and if you want to have a dance party and learn more about the details of NVM, this video is good. curl -o https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
  3. Install LTS version of Nodejs (you can do whatever version you want as well easily but I’m not bothering to show that in this tutorial): nvm install --lts
  4. Check to make sure what you installed was what you wanted nvm ls
  5. Install the Vue CLI which is apparently what real developers developing VueJS stuff use. I got a few ‘warning’ messages after running this about my OS but probably life will continue…note also that when running this script my whole computer slowed down: sudo npm i -g @vue/cli
  6. Install Quasar – the framework that apparently makes doing a lot of stuff easier: sudo npm i -g @quasar/cli

Now I’m off to try to actually do this tutorial

Some Follow-Up Updates from the first tutorial Journey

Might as well leave a few notes that might help you along the way. If you were doing this Quasar tutorial and had an issue with hot reload not opening, I figured out how to get it working by just running quasar dev again and that seemed to kickstart the hot reload option. I had this happen a few times when i made changes and nothing new showed on the hot reload app.

In order to get highlights working properly in VS Code like teacher’s you should get the extensions for Vue and Sass since they may not be installed. I used:

octref.vetur (Vetur) for Vue because this has html auto-complete as well (another one I tried didn’t…) and

syler.sass-indented for sass stuff

Converting your New App into an Electron App and then Building for Ubuntu with a Debian package

For some reason it doesn’t really say explicitly anywhere in the tutorial above nor on the Quasar site, how to build for Ubuntu / Linux. I assume most developers ‘just know’ this but I didn’t so I had to search and find. For your benefit,

Installing for Ubuntu

Very hard to figure this out for a noob but after a full day of time spent I figured out how to turn this Electron app into an ubuntu native app running in the launcher and everything (exciting moment for a noob, I say!)

I feel like there should be a way to do this right in Quasar with a terminal tag during the build but it seems not.

First, you need to install this by running this on your Quasar dev machine:

npm install -g electron-installer-debian

Then, you build the app with the Quasar electron instructions, but for me it was as simple as running this:

quasar build - m electron

After you run that you’ll find two directories, one of which I still don’t know what it does. The two directories were “my-app-name-linux-x64” and “Unpackaged”

I then created a directory in my quasar project folder at the top level called ‘installers’

I then took the following command which I pulled off the read me page above:

electron-installer-debian --src dist/app-linux-x64/ --dest dist/installers/ --arch amd64

And adjusted the ‘src’ (source) to point to my app-named directory in the electron folder and the ‘dest’ (destination) to the installer directory I created. You can do what you’d like but mine looked like this therefore:

electron-installer-debian --src dist/electron/my-app-name-linux-x64/ --dest installers/ --arch amd64

The result was a fully effective .deb installer file which installed without a hitch and really ended the above tutorial on a high note.

Important note: I had this error:

Creating package (this may take a while)
Error: could not find the Electron app binary at “dist/electron/Quasar App-linux-x64/my-app-name”. You may need to re-bundle the app using Electron Packager’s “executableName” option.

This took a long while to trouble shoot but the issue was nothing more than opening the package.json file and making sure that the following two entries match and probably have dashes in the names (haven’t confirmed that need but it worked with them so I’m sticking to it!)

“name”: “my-app”,
“productName”: “my-app”,

Hope this also saves someone some hair pulling

Cordova Stuff and Ubuntu Touch (raw notes for later)

Cordova is apparently our best hope to get Quasar stuff to be able to convert easily to the Ubuntu Touch framework so I’ll leave my quick notes although they are quick, dirty, and probably fairly useless. I don’t think it can support Electron as per above.

First, apparently… cordova was not installed yet when I ran quasar build -m cordova it never told me that… I had to install cordova with some command that I cannot seem to now find…

Also interesting is that the build let’s you build without error even if you have caps problem in command such as typing ‘Cordova’ instead of ‘cordova’. Neato.

A little late in the game this link was sent to me which I somehow didn’t find before beginning even though I searched. I would have started right here so hopefully this documentation link helps someone save some time.

More to follow, hopefully…

Tags : , , , , ,