Migrate from AppPresser 3 to 4

How to migrate an AppPresser 3 app to AppPresser 4.  This is not required for new v4 apps, just migrated apps.

Here's what the process looks like:

  1. Move your app to version 4 by switching the current app, or duplicating it
  2. Update all the plugins on your WordPress site, and install the JWT plugin
  3. Update any custom HTML page code
  4. Update Custom CSS and Ionicons
  5. Miscellaneous

The migration will be the most difficult if you are using a lot of custom HTML pages. It shouldn't be too bad otherwise.

Migration Costs

There may be additional costs associated with migrating your app from AppPresser 3 to 4.

Below are the 5 steps you need to do to migrate to version 4.

1. Switch Your Current App to Version 4

Switching your app to version 4 is safe for most apps. We recommend this method for any app that is in development, any new app, and apps that are not in a rush to be updated.

Here's what happens:

  • Freeze your v3 data so you are free to make changes without breaking current apps.
  • Switch your dashboard and app builder to v4.
  • Setup the new v4 backend app building.

When you are done migrating to v4, submit your v4 app, overwriting the v3 app. This update will be seamless for your app users.

Switching to v4 does not delete anything. It only changes the data structure and sets up your new app building services. However, you will need to make changes to custom pages that cannot be reversed automatically.

How to switch your app to v4

To switch your app to v4, visit your app dashboard, go to the Supporttab, and scroll down to “Migrate to AppPresser 4.”

Click “Switch app to v4.” Please note that you will not see this button if you are still on the v3 interface.  If you are still on the older interface, get in touch via https://apppresser.com/contact. 

Note that your app preview and builds won't work until you have made all the necessary changes. (Please continue the migration guide below).

This process is reversible by pressing "Switch back to v3," however, NO BACKUPS are made of your app. Any changes you make to pages, menus, colors, etc. will need to be reversed manually.

2. Update WordPress Plugins

Next, login to your WordPress site and update all AppPresser plugins to the latest version.

You also need to install the JWT Authentication plugin. You may see a notice like this:

You can click "Begin installing plugin" or you can download it here.

Activate the plugin, there are no settings to configure.

3. Update Custom HTML Pages

Offline assets are now called offline files, and the path has changed from /assets to /files. Any paths to /assets used in custom HTML pages need to be updated to /files.

Old:  <img src="assets/my-image.jpg" />  New:  <img src="files/my-image.jpg" />

Updating to Ionic 5 and Angular 9 means there were lots of changes to HTML syntax.

Language, Push, Downloads

Settings for push, downloads, and languages require a button click in AppPresser 3 to reveal a modal. In version 4, we simplified this so you can embed the settings directly onto a page with no button click necessary.

Old:  <button ion-button (click)="showSegments()">Notification Settings</button>  
New:  <push-settings></push-settings>  

Old:  <ion-item (click)="showDownloads()">     
	<ion-icon name="download" item-left></ion-icon>     
	Show Downloads 
</ion-item>  
New:  <download-list></download-list>  

Old:  <button ion-item (click)="showLanguages()">{{ 'Language Settings' | translate }}</button>  
New:  <language-settings></language-settings>

Custom HTML changes

If you do not have highly customized custom HTML, the easiest thing to do with custom pages is delete them and start fresh with our new templates. If you have highly customized pages, you will need to go through them and update any invalid items.

Homepage Menu Links

If you have a page that displays all of your menu items, replace your page content with this:

<div class="bg-color-wrap">
        <div class="ion-padding">
		<h2>Welcome</h2>
		<p>Click any link below to get started.</p>
	</div>


    <ion-grid>
            <ion-row>
                <ion-col size="6" *ngFor="let p of pages.all?.items | slice:1" [ngClass]="p.extra_classes" [hidden]="p.show === false">
                    <ion-card (click)="pushPage(p)" class="menu-card">
                        <ion-card-title>
                            <ion-icon *ngIf="p.class" name="{{p.class}}" size="large"></ion-icon>
                        </ion-card-title>
                        <ion-card-content>{{p.title}}</ion-card-content>
                    </ion-card>
                </ion-col>
            </ion-row>
    </ion-grid>


</div>

Ionic Tags

If you are using custom markup using Ionic tags, many of them changed. There are too many to list them all here, but here are some common ones:

Buttons must use an ion-button tag instead of a button tag:  
Old:  <button ion-button (click)="doSomething()">   Default Button </button>  
New:  <ion-button (click)="doSomething()">   Default Button </ion-button>

ion-item tags must have an ion-label inside:  
Old:  	<ion-item>   Default Item </ion-item>  
	<button ion-item (click)="doSomething()">   Button Item </button>  

New:  	<ion-item>   
		<ion-label>     Default Item   </ion-label> 
	</ion-item>  
	<ion-item button (click)="doSomething()">   
		<ion-label>     Button Item   </ion-label> 
	</ion-item>

The changes are too numerous to list, please review the following:

There were no changes to AppPresser custom tags such as ap-list, woo-list, etc.

4. Update Custom CSS and Ionicons

AppPresser 4 includes lots of great new Ionicons. Many of the old ones still work, but some don't, and you also have new options for outlined icons. Go to their site and change out your icon names for a fresh new look.

Ionic moved to a shadow DOM based CSS system that works a little different than you're used to from v3. Themeing now uses global CSS variables, as well as component scoped variables.

Components can by styled using custom properties. That looks like this for an ion-badge:

ion-badge { --background: #000; --color: #fff; }

You can find the property names in the Ionic component docs.  Note that not all CSS is done through custom properties, only the ones listed in the documentation. 

If I wanted to change the margin on the ion-badge from the example above, I would use the normal margin property.

ion-badge {  --background: #000;  --color: #fff; margin: 10px; }

How do you know when to use custom properties? Look at the docs for the component you want to use. You can only use the properties listed there.

Global Variables

It's possible to use global variables for things like toolbar background, text color, etc, but we don't recommend it.

Our color pickers already override global variables, so if you put them in your custom CSS, there may be unexpected results. If you choose to put them in your custom CSS, you must use :root {} to override global variables, like this.

5. Miscellaneous

Re-upload your google-services.json file

If you are using push notifications, visit your app dashboard, click the push notifications tab, and re-upload your google-services.json file in the field provided. You do not need to change anything else related to push notifications.

Other Files

During the migration process we try to upload any files you have like icon, splash, assets, translation files, header logo, etc. to your new app. We do not delete any files, they just need to be pushed to our new backend system. 

If you see any problems with these files in your new app, you may need to re-upload them. To do that, visit the Settings area in your app customizer, select "Remove" for any files you have saved, then re-select the same file and save. This will trigger the upload process for our new backend.

Related Articles