How to Migrate Your Ionic App to Capacitor 3

what's up simonix and welcome back to a new quick win a few weeks ago capacitor 3 was released and did you already upgrade your application no perhaps not because you waited for this migration guide so today i will show you how to update capacitor 3 ionic application for both android and ios for ios it's a bit more complicated for android well it's okay and from the code side of ionic i will also show you all the necessary steps to update the packages used in your application as always this quick win is on the ioniq academy if you're not yet a member go check it out ionicacademy.com my place to help you with everything ionic including this capacitor 3 migration let's do this [Music] all right we're not starting today's quick win with a new application because most likely you came here because you want to migrate your own application and therefore i just pick one of my old application which is using uh some old version 2.x of capacitor a little bit old angular version and we see the different versions now the first step we're going to do is update our dependencies and we can do this by running npm install capacitor cli latest and capacitor core latest this should update your package.json and install the version 3.0 or perhaps if you're going through this in the future it should be somewhere above three well perhaps you're watching this if you're using capacitor 4 in the very distant future but let's say usually it should uh have something with a 3 in it um capacitor 3 now also uses typescript or a new version of typescript my package is using actually 3.9.5 that should be fine uh you could also go ahead and install typescript 4 but be careful since if you have some old angular version like i do have with angular 10 angular 10 actually doesn't um support typescript four so we will stick to that now we can change some basics as well and the first thing is i'm going to create a copy of this capacitor config and with capacitor 3 we can now use capacitor config.ts instead which is quite cool because previously you just had this bunch of json in here you could never really know what you could do now what you can do is create a config like this so const config type capacitor config and then you go ahead and create your typescript configuration actually it uses most of the same stuff but you see you get nice code completion for all these things and you can migrate your existing one i will bring in the rest for now as i really don't want to type all of this it could look like this and you can easily dive into the capacitor config interface to see all the supported values in here very helpful very cool now we can get rid of this the only thing that wasn't working for me with a type config and i'm just going to call this one back up i'm not sure if this will remove it um with the typescript configuration i had problems using the ionic cap run ios live reload command i don't know if that's still a case let's see um for me it looks like the actually it looks pretty good uh okay yeah the ios yeah okay that's that's fine i feel like they fixed this um because previously let's let's i really want to remove this test.json um when i run this the first time i had problems as the ts configuration wasn't really accepted and then it tried to add the capacitor platform again and all kinds of crazy things happened but it looks like live reload is working uh once again ends well okay you've updated your package json you've updated perhaps your capacitor config you can actually stay on json if you right now don't want to do it but i really recommend you do it at some point in the near future now changes in terms of capacitor packages if you now go to this you will see capacitor core has no export memory camera photo plugins is deprecated yes exactly all of this is deprecated and you now have to go through your application and basically comment this out the only thing that we really can use from capacitor core is this one so capacitor from add capacitor core i was using capacitor in this application to convert a file source and that is still inside the core package but all of the other packages for example i use camera file system storage all of them are now in separate packages so what you need to do is you need to install them like this add capacitor camera add capacitor file system add capacitor storage uh you can find all of them somewhere let me find this i just have this capacitor this issue open which highlights pretty nice uh where the package was moved but there's also um the default capacitor updating guide for plug-in imports there are a few changes to some plugins we will talk about one of them uh soon otherwise you can simply always find the plug-in apis right here this is the list and if you click on one you will see that you now need to install that separate package which makes capacitor itself um a bit smaller uh and we don't automatically import all the plugins that we might even not need so instead of destructoring the plugins object you now need to change this to import everything from its own package basically like it will look like this camera file system file uh storage from the packages that we just added now on top of that we see a few changes camera photo deprecated use photo file system directory deprecated use directory so i'm going to change this one to directory and this one to photo and most likely you need to go through your files you can just replace really just find the places where something was used file system is now directory just go through everything in your files for me it's pretty easy since i basically got all the capacitor stuff in this one file and visual studio code gives me a nice hint where i need to replace something i could even do this with search and replace but i wanted to do this kind of manually okay our plugins are ready for capacitor 3. one more thing uh i wanted to tell you about the plug-ins can we just bring this quickly back uh where did we come from right here so for the plug-in imports please jump to that um there's a little change for the storage plug-in and be cautious data migration required in fact there's a simple method to call migrate i'm not sure what this function will do under the hood i'm just gonna add this um so storage migrate really not sure how to handle this in the best way uh this action is non-destructive but i really don't wanna run this all the time so if you have some kind of version check logic you could easily check if like the previous version was two and now three and then just run this once or simply set a flag inside the storage itself or ionic storage that you migrated to capacitor 3 so you're only running this code part of this code only once but anyway i don't think it will do any harm if you just keep it in here okay so after the initial setup you go through all your files you change all those imports you install the new packages and change uh perhaps some interfaces and then fix maybe things like storage migration or take a list at these things if any other braking change uh is in your application or needs to be changed and now it gets really interesting that part was kind of hard uh i looked at the upgrade guide and you see this is the ios section and you scroll and you scroll and you get a really bad feeling for all those changes but let's do this together npx open ios because we need to apply a few changes in uh the native project first of all you should make sure that the cocoapods version you got is something above 1.8 uh i even got 1.10 didn't knew they were that far so make sure um your update your part one to at least 1.8 once you get this open your project the xcode project and navigate to the build settings for your app and the first thing we're going to change is the deployment target we can find it here it's currently ios 11 and the guide says please change it to 12. i don't have 12 that's always good if you don't have the settings the guide recommends but i picked 12.1 in another application and it worked so make sure that it's something above 12. i fear to use 13 so i will just use the thing that's closest to the guide which was 12.1 um on top of that we need to change our pod file we can do this in here you can do it inside your usual ide it doesn't really matter uh the only thing that matters is that we want to change this line since we're not using ios 11 anymore when they're using 12 and in my case actually use 12.1 so i'm gonna do a 12.1 in here i think that should be correct another step that we need to take inside the xcode project once again go to targets and use for swift language this should be i think five right um good that it's already in my project so we don't need to change anything in here now another tricky part comes and that is the file structure here changed a bit right now we can see public is uh in this folder here but it's in the wrong position they changed the the order so what you need to do is click delete on the public folder and hit move to trash we don't want that it anyway is an automatically generated folder from the capacitor sync command so don't really worry about this you're not not going to destroy your application and next thing click on app so really go to the app folder and click new i think new group no it's not new it's oops oh damn i destroyed everything uh it should be new file i guess or add files no it's actually add files to app that was the menu point look kind of strange but that's right make sure copy items if needed create folder references is toggled and then hit new folder and call this one public once again click create click add and then a new public folder will appear here uh it's i think a level higher and that's also the reason why we need to apply a little change to the git ignore file so previously it ignored the app build folder and the app public folder now our application is not in a public anymore right now it's in app app public previously i don't know what they use kind of reference or something but this is the new path that should be ignored on top of that they also ignored or recommended to ignore the derived data folder where they put some native capacitor built into okay that's actually i think uh almost everything that we need to do for ios and now we can update our ios version so npm install capacitor ios latest uh the version i had before is 2.4 so this should install most likely 3.0 let's see um you're doing this fine please hurry up yes there we go capacitor three and on top of that we can now run the npx cap sync ios command at this point you're like oh that was quite easy for iowa's well no no no we're not yet finished not yet uh let's get back to either xcode or your ide doesn't really matter and get into the app delegate because they deprecated uh the what's it called the cap bridge as far as i know so in two of our functions we need to change a bit so the handle open url is now deprecated instead the statement is application delegate proxy shared application cannot find that's really not what i want to see at this point um that usually looks like i did a mistake at some point because uh that shouldn't be here uh let me quickly do the second statement as well and see if that one gets read as well uh this should be in the following function right here where we also got the cap bridge let's put this here uh okay in this function you're happy with the application delegate proxy and in here you're not that looks kind of strange to me uh okay now you're unhappy anyway uh let's finish the changes and then i will find out why this is actually red perhaps we just need to run some sort of clean that sometimes really helps but i don't think this will fix the issues anyway but next to the two changes are two more changes or actually three more changes this one right here is also using the capric so we're gonna comment this out and instead use this line and then we can scroll a bit further down uh you can find all of these lines also in the link below the video for academy members or also in the capacitor documentation and this one is basically it looks like it's just uh multiple lines but it should be just one line and the last one is in here and then everything is finally changed um is there still something red in here no such module capacitance doesn't sound too good let's quickly check our pod file did we destroy maybe the pod file uh platform ios 12 1. that looks fine to me i added the git ignore i added the public folder which has now our build let's just try to run it well i closed xcode i restarted everything and then i just ran a new sync from io from the ionic command line and now my application succeeded so the changes we had in here and everything that we did really worked there were nothing else necessary so since i ran the migration command i do have i had some folders that i added to um to capacitor storage i also had images in those folders in this application um i don't know if capacitor somehow messed this up or the files from the system got removed i really don't know i guess most likely it's my fault because overall the the information that i added to capacitor storage is here only the file references are missing so most likely that was my problem with the file path in those applications but i also did this before without using the storage migrate command and in that case i had no folders so if you don't use the migrate command when using capacitor storage your complete data might be gone and now i also feel kinda adventurous to run the live reload command once again because everything's working pretty fine so far and i got my application here i'll use this device um i will just give it a try in the background and see if this still works just a quick information if you want to run and native capacitor build you can now run npx cap run ios directly this will run one build um so build your application really with the native tools um you can also use this for android and directly deploy it to either a simulator emulator or a connected device to test the native functionality but this is no live reload if you want to use something with live reload um you still need to run the command that i used in here ionic cap run ios live reload so not just npx cap run we're using the capacitor through the ionic command line in that case and i will just see how far this gets us um with our live reload i really hope to make this work because then i'm ready to migrate really everything to capacitor 3. actually i feel like i is already running let's give it a try okay capacitor run ios no sync target development server is up and running i can confirm the local application is already running i will watch out for changes on my device in the meantime we can already heat over to android for android it's going to be a lot easier um well yeah kinda a lot we can start by installing the latest capacitor android version which should update once again your package.json where we had capacitor ios three you should now also have capacitor android 3 at least in a second when this is finished uh once the installation is done we can already continue by using the npx cap sync command for android um i don't know if it's necessary at this step or if we could already do this in the end but it was recommended for that step and i kind of kind of want to follow the guide on that uh let's see if my live reload well the development server is running uh for my device i i i don't think that is already let's see recent kappa can i already do a change and see the live reload on the device um i don't think so i see the update in here perhaps i might need to uh redeploy this um yeah that should most likely be is most likely the problem if you're using live reload you usually have to open xcode at least once deploy the application to your device and then you can just leave it there you can even uh then close the command um the device will still use the server in the background you could run the live reload command for android deploy to your android command and then you got your browser android and ios basically all downloading your ionic application from the same ip from your local ip and then you get a live reload on all the devices um i will just stop it um i feel like this is definitely gonna work now because i had the problems at some other point so we're gonna close this if we're allowed and move to our android implementation so npx cap sync android once again syncing your files to android and now we need to get into a few android files first of all we need to open android studio and from android studio you can add the top select file project structure because we're going to update our gradle version it's not available while studio is updating is android studio taking so long to update for you as well whenever i open it it release it takes it takes so long plug-in update recommended well i will just click this and then i got the awesome wheel so let's wait okay reason why this is so slow might be up here so let's quickly finish this video uh what we need to do within the project structure is update our android gradle plugin version 2 4.2 where is it why so many words and the gradle version 2 7.0 that's the wrong direction we want to go up oh no okay there's 7.0 now we can hit apply and we can hit okay and most likely gradle is now uh syncing something in the background this might take some time especially as my hard drive is almost full um in the meantime we can do a little change uh there are two or actually three things for android first one is to go to your main java android activity where you usually add no i don't want anything uh plugins from other people that shouldn't be necessary anymore with capacitor 3. i'm not sure about the plug-ins that not yet implement the standards for ionic 3 so i would be careful at this point but from what i've seen you definitely don't need this init block anymore uh the plugin now goes simply into this one or if the plugin is ready for capacitor 3 you don't need that part anymore but be a bit careful um since i don't know about uh community plug-ins and whether they're already ready for capacitor 3. on top of that we can go to the android manifest file and by default capacitor included a lot of permissions that your app actually might not need in my case i'm using camera photos and files and of course internet that's fine but i really don't need anything with geo location um i need the network api that's fine i'm not recording any video or audio so you can get rid of all these things if they are inside your application just check out the plugins that you're using and the permissions that you need i think they will also um be added dynamically in the future ah no i'm not sure about that be careful with the permissions but you can definitely get rid of all the permissions that your application doesn't need uh and the third change for android is inside them uh i don't think the build gradle although for the build gradle um android studio continuously told me to remove jsenter so i'm just gonna do it not sure if this will break anything but that was the warning i got so i'm just gonna remove this as well uh this is the capacitor the griddle and the variables this is the place that you want to change as well uh i will bring in a new configuration let's compare them um basically what changed is the compile and the target sdk version to 30. um and then we got a few new android x entries in here also in the default config they didn't have the android x i think material version entry all i said you can remove this but this one was actually necessary for the camera and you need to be careful i think the android x browser version is necessary if you're using the browser plug-in so don't follow the uh the all the advice here or be careful and check which plugins you're using but otherwise you can basically update to something like this only make sure you're including uh the right entries for the plugins but usually from what i've seen if you go to the plugin api let's say camera permission yeah exactly here inside variables it will tell you which variables are necessary android x material version and that's exactly the one i included in here do you also get this one exif interface word i didn't add that one interesting let's let's add this i don't know if i need this uh i was able to run it without so i'm just going to include it just in case okay that's everything about the variables uh about permissions and your main activity and once you're done with this uh you should be fine uh is there something like clean project in here as well it is uh did i already run some kind of build i will definitely once again run an ionic build and np cap sync android one note as well uh you might ask yourself why i use npx um i usually use this but i sometimes also just use cap run ios if you use a command like this capron ios let's see cap dash dashboard it will use your globally installed capacitor version and since i globally i still use capacitor 2 for my cli that's going to get you into problems once you're using npx you're using the local cli of your project that's defined inside your package json so npx can i run version in here as well that will give us 3.0 so be aware of this difference uh and use it with npx in your local project if your global uh version of something is different that's just a quick tip as i run it without npx and then i got a lot of issues so that was the way to go and now i might be able to run this on my device could not find flat buffers searched in i feel like i shouldn't have removed the the jcenter stuff in here i really uh uh i will just edit again i don't know if that made any change to our application once again let's run a clean project build build configure um please remove usage of jsender okay but i'm fine with the warning if that gets rid of the error um at least it looks like we're not getting that error once again so thanks android studio for the super helpful warning here to remove jcenter that was definitely not a good idea in this case let's wait until the build is finished so i can confirm that android also works and there we go the application is running on my android device as well built successful i didn't change anything in the meantime it just works i'm not gonna go through this because i didn't have any data in here but once again if you use capacitor storage be aware of the migration and now we got capacitor three we got it working for ios we got it for android uh we have seen that with even with the typescript configuration the live reloads seem to work once again so all applications are fine and we can wait for capacitor 4. all right and that's it for today we've successfully upgraded our ionic applications from capacitor 2 to capacitor 3. it works fine for both ios and android the process is for both platforms a bit tricky and i really hope that in the future this is going to be a bit easier because it really doesn't feel too good to um change those folders on ios inside xcode and add or change the app delegate stuff for android it was actually okay we sometimes just need to change if you're very able to use the latest gradle versions that wasn't too hard in terms of the project changes um this was also like a one-time change since they moved away from having all the plugins in the core and now everything's in their own package which will make life easier in the future is it's just capacitor core is really just the capacitor core and no other plugins in there if you enjoyed this video give it a like and hit the subscribe button for all upcoming ionic videos and of course check out the ionic academy my place to help you with everything ionic i hope you enjoyed this have a great day upgrade your applications and migrate to capacitor 3 and i will catch you next week like always so happy coding simon [Music]

Channel: Simon Grimm

Views: 3,497

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: d5H729a-rBM

Length: 30min 56sec (1856 seconds)

Published: Tue Jun 22 2021