Step 1 and Step 2 of Tutorial

Questions
1

I learned these 3 languages, javascript, css and html, to create my website.

My website conforms with PWA requirements, so the code can be downloaded to run as a smartphone app, even offline.

Now, I need VoltBuilder’s help so I can stock a store or two with my new app, without learning iOS or Android native code.

As per VoltBuilder’s “Tutorial - Moving from PhoneGap to VoltBuilder”, step 1 is to Prepare your Files.

I had cut my teeth on PhoneGap. The requirement was to zip up the working directory of files, along with a config.xml file (which shared the index.html file’s directory, if I recall correctly). On Phonegap I managed this step easily and consistently.

But, step 2 stopped me. It seems no matter how I arranged my files, I’d fail. (At least with PhoneGap my Android version always produced a build.)

I don’t think Phonegap formally required creation of a project, or to declare a project’s folder. But in trying to upload to Volt, I got “no cordova project” errors. Which is why I think Volt requires a formal declaration of the root folder. Thus the “create cordova” command, below.

Declaring a given directory as a project directory - using cordova code, creates files of its own. How to assemble my files with those created indirectly - perhaps that’s where I err.

Often I tried to zip my files from a Cordova created directory. Despite my few files, I have yet to advance my Android-build attempts beyond Step 2.

My project root is “toraware”.
Therein I ran “CREATE CORDOVA .”
I changed the config.xml inside that directory.
Inside the www subdirectory I replaced its files with my own index.html file, and with other directories and files referenced by the index.html file.

toraware
|— config.xml [changed by me]
|— hooks [created by cordova]
|— platforms [created by cordova]
|— plugins [created by cordova]
!— www [replaced its contents with my files]

Then I zip these 5 items in the “toraware” directory
and deliver this onto the Android’s “Upload your App” button.

Inevitably, I run into an error.
For example, my last effort yielded this one:
Error moving Cordova files into project: Destination path ‘/hooks’ already exists
Build 24727ec2-fdba-4204-bffd-b320e08be8ea failed

Would be grateful for your help.

2

You have too much stuff in your .zip file.

toraware (all you really need is):
|— config.xml [changed by me]
!— www [replaced its contents with my files]
!— certificates [your signing and debug certificates]

In mine I have:
toraware
|— config.xml [changed by me]
|— voltbuilder.json
|— package-assets [my icons and splashscreens listed in the config.xml]
|— certificates [the signing certificates you referenced in voltbuilder.json]
!— www [replaced its contents with my files]

3

Ok; I removed the 3 files placed by cordova.
Remain with only my config.xml file and www folder contents in the zip file.

I can add “certificates” later, after Step 2, no?
After all, there’s no mention of “certificates” until later in the Tutorial.

So, the config.xml file and www directory, zipped up, yielded this error:
Source path does not exist: pics/twTab.png Build ID: 9327ceab-db55-40bb-b7ee-333025c37b3a

That file is referenced in the head section of the index.html file:
<link rel="icon" type="image/ico" href="pics/twTab.png"/>

as well as in the config.xml file
<icon src="pics/twTab.png" />

(I tried changing xml file to read:
<icon src="/pics/twTab.png" />
but that did not help.)

4

did you include the pics folder along with your www, certificates folders? In my example, my folder “package-assets” would be your pic folder.

|— config.xml [changed by me]
|— voltbuilder.json
|— pic [my icons and splashscreens listed in the config.xml]
|— certificates [the signing certificates you referenced in voltbuilder.json]
!— www [replaced its contents with my files]

5

Maybe my presumptions are wrong, but the natural habit of people is to follow directions step by step. I’m taking the Tutorial seriously, at its word.

In AppStudio’s tutorial, so far, there’s no mention at all about those “extra” files you’re asking me to throw into the mix.

According to the tutorial, the only other files referred to in Step 1 was perhaps the suggestion to past users of PhoneGap to take a similar approach with Volt. But like I said, I don’t recall feeding PhoneGap any “outside” file other than a config.xml file.

Here’s my root directory’s organization:
(in total, 6 directories and 7 files)

toraware ==> config.xml
------------ ==> www ===> js ==> tw.js
-------------------------- ===> css ==> tw.css
-------------------------- ===> db ==> utf8_dbKsiv.js
-------------------------- ===> pics ==> twLogo.png
----------------------------------------- ==> twTab.png
-------------------------- ===> index.html

At this point I know nothing of json files, signatures or certificates. Perhaps further down the tutorial’s page, in steps after step 2, the files you mention are there referred to.

For me to already include those files you mention in Step 2, although the tutorial at this point does not yet mention them, implies there’s no order in the steps outlined, which is simply counterintuitive.

So my question at this point is:
For the time being, still at Step 2, can I execute an Android “Load my App” build, with the files now shown, or, are there mandatory other files I must first add into the mix?

6

The root cause of your issues is the placement of config.xml. Older versions of PhoneGap tolerated it in www, but the updated Cordova expects it to be at the top level.

You have this in the config.xml file:

<icon src="pics/twTab.png" />

That implies that pics is in the same folder as config.xml. Since we’ve moved config.xml up to the top level, that is no longer the case.

The recommended solution is to put the icons and splashscreens in the top level, next to config.xml. In the tutorial, that folder is called resources, but calling pics is fine.

Since those icons and resources are now at the top level, they won’t be reachable by this statement at runtime:

<link rel="icon" type="image/ico" href="pics/twTab.png"/>

since your app runs in the www scope. You’ll need to have a separate pics folder in www with the images you are using at runtime.

There is no need to worry about certificates and voltbuilder.json until you get to step 4.

Keep going, you’re almost there!

7

Changed my config icon tag’s src attribute to “www/pics/…”.
Thank you! The tutorial’s build step 2 for Android and iOS succeeded!
So, for now at least, I’ll skip creating that other top level directory.