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:
- Install npm
sudo apt install npm - 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 - 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 - Check to make sure what you installed was what you wanted
nvm ls - 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 - 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…