How to AUTOMATICALLY configure your Capacitor project ⚡️

what's up bunnies and welcome back to a new video about something new related to ionic i feel like the last time we talked about new versions or new tools is kind of a long time ago so i'm very excited today about a cool new tool that is called capacitor configure it's a tool for configuring your capacitor applications who would have thought by that name and i'm pretty sure it will be something big and interesting in the future for teams for companies that have more complicated application than just like a little to do applications where you got different clients you got white label applications you need to inject frameworks you need to handle permissions and all of that can be improved with this package we're going to take a quick look at the two apis of that project and how it can be used it is really a very early look at this package i was using this package like two or three weeks after mix from ionic worked on it and we actually have a special guest in this episode talking about the package in the end so you should definitely stick around also i just want to quickly let you know that during the end of the year especially in december there will be a lot of cool things so definitely stay subscribed to this channel as i will share more about it uh at least two maybe three big things will happen in december so stay subscribed and i will tell you all about it when it's time but for now let's check out the configuration tool and afterwards we're gonna discuss about it and hear what max the ceo of ionic has to say about it [Music] all right so let's explore this package first of all it's available at capacitor configure on github i'm actually between the contributors that's cool i just submit a little pull request to fix a minor thing anyway this uh tool comes with two important packages or apis first of all there's the project api and then somewhere at the bottom you will find the configuration tool we will take a look at both of them let's get started with the project api you can install it by running npm install at capacitor project in your project and i of course did already in uh just a example application now the first problem i encountered was actually how to how to run this code because i just created a typescript file and i tried to somehow execute it that wasn't actually that easy um so what i changed is i made a lot of changes i don't know which stick around so changing the target module to es next and then just running the tsc or running it with npx to execute your local script of your package on that file should usually transpile that file into a javascript file that you can then run with node.js probably not the best way it's the one way i found that actually work for me so i just sticked with that but right now we see i also get an error uh so it's definitely not perfect but what i did to fix this uh is i just created a new function that wraps all of our code and then i call that function in the end so let's see if we can get a lock already from this this is the first step i'm going to chain this with node configure running the configure script and we will see if this prints out something now it will load the capacitor project based on the configuration here using the default path for ios and android and then load the project now let's see the output that is first of all good news because it looks like it found the ios project at the specific path with the project pbx project file and also for android the build gradle file is listed and the android manifest so looks like we got access to everything uh also the virtual file system which will then later be used to commit our updates now i shouldn't forget about that because that part is really important um so let's see what we can do i also brought up source control so right now we only got those two files but we will see what changes in our native project because that's actually a lot easier to see all the changes there than just looking at the ide but of course we could also open xcode let's first of all grab our app target by using project ios because all of this is typescript it's pretty easy to get started you see we have android and ios we've got the config and once you go into ios you already get a bunch of options to get the bundle id set the bundle id at entitlements and we're gonna just throw in a few things so perhaps let's just do one thing for the beginning and that is setting our app name so let's set this to com my video dot test i think that is a very common thing um because um in white label applications that i've worked with they need to be built for different clients so updating the bundle id is definitely something we need and to make sure it works you have to run project.commit in the end otherwise your changes won't even be written now let's run this again and let's see what happens actually i think uh in my last test it also updated the manifest file although we only did changes for uh ios but it's not setting so it's just formatting that file uh let's just commit this so it doesn't bug us anymore formatting okay but for ios we can see the project file was indeed updated our new value was written to the project and you can now run cap open ios to open your xcode ide and then we could see that right here come my video test was updated that's pretty cool let's add a few more things so for example we could also change the display names to uh something it's sometimes not clear if you have to pass in this uh second value which is the build name sometimes you need it uh sometimes you can just pass null uh i think max will work on this to improve this and make this more clear in the future so uh for ios they're different builds you could either also have different targets if you're working on a more complicated project but for now let's just stick to this let's also change our version to something like 1.40 to 42 and perhaps also add a framework so this also works let's do this and let's run this another time and we're going to take a look at the source control so previously we just updated the bundle identifier this time there should be a lot more updates to our project uh let's see do we already get that yeah we got the marketing version in here uh we don't have the name um we don't have the name or do we no i don't feel like we have the name so uh the problem is it's really a very early version and some things did work already for me when i was testing this uh some things uh well might just break because it's a super early one i worked with this package like three weeks after max started working on it so it's a very early version but i still think it's amazing once all of this is stable especially stuff like this is interesting for a lot of you because updating your info p list or permissions is really always a pain and if you have a somewhat complicated application this could make life a lot easier and we see the info plus the string was written right here also of course interesting for capacitor plug-in authors but those authors are likely to use something else that we will take a look at in the end now no i don't want to make this too long so let me just show you something uh instead now for android for android everything really just works the same so i created another function to update the android project again we could have done this in one so i can set the package name the version code let's do this uh the version code the version name you could also i think even have automatic updates to the version code that kind of worked sometimes as well and what i also found very interesting for android is adding resources so we can write a blank value to a file or we can copy a resource like an icon perhaps or a function that i actually edit as a pull request is add a generic resource like a google services json file you might have different clients for your white label application they have different google services json files or perhaps even a different environment file that you want to inject so let's check out the changes and we see into the android app source folder the test was injected the icon was copied the google services was added the android manifest was updated and any other changes and the build gradle version name was changed as well so all of this with the project api and i think that by itself is already a a pretty good step forward for capacitor um now we want to do this on a different way so let me quickly reset everything and then we're going to check out the second way so this is the way from creating a typescript file and executing that perhaps in your ci cd environment but you could also do this uh in a different way and perhaps even an easier way now this is a yaml file i don't know if you've used yaml before i actually encountered it in my first job like i don't know six seven eight years ago didn't knew it was still up to date but max selected yaml because i think you found this in the old cordova plugins that used yaml for the automatic configuration and it kinda works the same now we have some variables up here we can target different platforms you can also find a huge yaml file with a bunch of things here on the github repository so here's a file containing a lot of things for ios for android let's do something like this that's pretty cool as well uh under i don't know app right yeah that goes under app so yaml a bit like python i think you have to make sure you get your indentation right um and let's see how we can run this that's actually a lot easier because that can be done with uh the tool npx now let's just search for client a mpx cap config run so npx once again executing your local scripts of the package.json cap config run is the important part client a and dash y just skips the confirmation so it's automatically updating everything it has a pretty nice output i kind of even like this approach more you see run ios update blah blah blah updated this that and then we're gonna see that's actually or hopefully the truth so the name was changed in the info plist the project that we see frameworks being added uh names being changed and of course you can also check this out within xcode and there you should see the same result um how this comes together uh like where you get all of this from uh you can see it in this example i also already recommended to make a more detailed description about the different values you can use in the yaml file so probably in the future uh you will have a better documentation about what you could use as well now i did this for android and once again you can pretty much do the same uh from here like we did before so you can change the manifest file uh you can change attributes you can copy your resources of course change all the basic information about the package and then when this is done once again we see all the changes are reflected here in our source control overview now as far as i know this uh configuration based on the yaml file just uses the project api under the hood so they're kind of kind of connected using the project apis uh well it's closer to the original code this is more like a configuration for your application uh you can decide which you prefer more because both of them will work and i'm pretty sure that we will see a lot of these yaml files or configuration scripts in the future all right that's it so far for the first impression of the capacitor configure tool i think in my eyes it's a great way because initially you know the philosophy of capacitor was never magically changed your native ios or android project because the stuff cordova did in the past was kind of magical with the config xml and regenerating and then it didn't work so i think this is definitely an improvement because now you can just make it explicit what you want to change it will be helpful both for our companies that have like big requirements white label applications huge applications with different targets but also for plug-in authors like if you want to add the capacitor camera you right now need to manually change your android manifest and the ios info plays and with this uh approach others could maybe create a file and then automatically everything could happen yeah it's kind of moving in the direction where cordova was but i think it's still different anyway i think the person who can describe this best is max lynch uh co-founder of ionic and the person who created this package so let's hear what max has to say about it hey simon hey everyone this is max one of the co-founders and ceo here at ionic i want to talk about this new project that we've been building called the capacitor configure project also sometimes you'll hear referred to as the project api and what this is is basically a api javascript library and a tool so it's two things and it enables you to programmatically administer and manage your capacitor app project so the basically like the ios app the android app from a single interface and you can do it either through the api which gives you a ton of control you can write custom code or you can use it through a tool that basically takes a yaml file and then runs through that file to modify your project more of a configuration basis and they're kind of two different use cases and probably two different types of people would be interested in each of those so the the tool which is kind of what i started with it was the initial thing i wanted to build and that was inspired by the cordova config.xml and plugin.xml approach where a plug-in author could publish a yaml file and then when you install the plug-in it'll run through the configuration and modify your project so it'll update android manifest um gradle file and actually there's some really interesting stuff that it does for gradle that goes beyond what cordova did um and then on ios it'll update you know your build settings and your project if you've ever dug through a xcode project you'll find a pretty weird file called the pbx file or pbx proj file and it's a very strange format that this tool will actually go and modify for you and manage for you in a much nicer api than what's typically out there so um that use case is going to be great for plug-in authors who want to can automatically configure projects when you install the plug-in but their configuration is really complicated and it's hard you know it's difficult for users to go and do all that stuff and then the api is going to be great for people who want to maybe do really complex white labeled app scenarios build tooling automated ci cd stuff you can increment build numbers you can do a lot of other things update plus files and basically the goal with it is you should be able to use the tool or the api to do everything you need you should never have to write like a custom bit of code beyond that you know i really compared to the cordova approach i never want you to have to write a hook for example because you know i've built a bunch of plugins and i'll be able to get so far with the cordova plug-in xml and then there's one thing i need to do like i had to add a new custom gradle build script and cordova's configuration options doesn't support that it only supports doing it for the app gradle not the actual root level build script and so i had to write a hook for that and now i've got this custom hook that's you know probably reinventing the wheel loading a gradle file and doing all this stuff and it's doing basic string search replace um and this tool replaces all that you should never have to do that kind of thing at least that's the goal so i want people to give it a try i want plugin authors to check it out publish a yaml file for their plugins and give users the option to run the script to actually go and configure their app automatically and you know just let me know if it's solving the problems that you have the repos at uh you know github.com ionic dash team slash capacitor dash configure and you'll find the configuration tool and the api in there and the tool uses the api under the hood so feel free to file an issue let me know if it's not doing something that you wanted to do we're going to be integrating this into our app flow ci cd and and build service soon so that should make automated build configuration much easier and we're just trying to help you know plugin authors and people who are building really complicated apps just manage like the automated configuration and and solve a lot of problems around that so really excited about this uh it's the first step towards adding more of these power user features and and developer experience features around capacitor so expect future updates around things like asset management and image generation and things like that so yeah that's basically it thanks everyone thank you mix i think you've wrapped it up perfectly uh i feel like this package will be very important in the future just by reading between the lines and the effort put into this package i think this package has come to stay so you should definitely give it a try you can find it at capacitor configure on github also check out the recording blog post mix did already about it and as well i would love to know your thoughts about this is this an improvement how could you use this in your project what's missing um give it a try let me know in the comments i'm sure mix will also join the comments so if you put in something uh you would like to see it will definitely happen in the future if it's a legit request think about what you handled before with a script in your applications or what you enjoyed about cordova maybe this could now be replaced with this new tool of course hit the like button and say and stay subscribed because as i said in the beginning a lot of cool things will happen now in the end of the year so be prepared for a big december i will be back hopefully soon so have a great week and happy coding siren [Music]

Channel: Simon Grimm

Views: 1,932

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, capacitor, capacitor configuration

Id: kYFZkmJ6rAc

Length: 20min 6sec (1206 seconds)

Published: Tue Nov 16 2021