From Web Project to Native App with Capacitor
What's up, Simonics, and welcome back to a quick video where I will show you in five steps how you can go from web project to native mobile application for iOS and Android using Capacitor.
There's really no magic to creating and releasing a mobile application, and yes, every web developer should be able to do it. I will show you in five steps how you can install Capacitor, how you can add native platforms, how you can add the right assets, and then build your application for both Android and iOS and how to submit them to the App Stores.
If you would like to learn more about Capacitor and also Ionic, also check out the Ionic Academy, which is my online school to help you with all the questions you have about Ionic. And of course, you can find the written version of this video right below the video, where I got all the pictures of the different steps that you need to take to go from web app to mobile app. So let's do it.
Step 1: Environment Setup & Capacitor Installation
The first step is to install Capacitor in your web project. If you're using Ionic, you don't have to do anything and can skip this step because Ionic applications come out of the box with Capacitor support. If you're inside a regular web project, we're gonna have to talk about the environment as well.
I'm pretty sure you got Node installed, but you now need to make sure that you got environments for iOS and Android setup. So for iOS, we need Xcode, command line tools, Homebrew, and CocoaPods. You can install Xcode directly from the App Store and by the way, you of course need a Mac for this to install it. This won't work on Windows. You can install the Xcode command line tools, Homebrew, and then CocoaPods, which is like npm pretty much for iOS projects and dependency management.
Additionally, I would recommend for Android that you simply install Android Studio. You can just download Android Studio and within Android Studio, you can then also install the latest SDKs and everything that you need so that your environment is ready. When your environment is ready, you can install Capacitor in your web project by running npm init capacitor app.
I have some guides on doing this for an Angular application, for a pre-standard React web application, and even for Next.js. So you can really do this in any kind of web project. The only thing you need is a package.json. Then you install Capacitor and with the command line tools, you add the native platforms. But that brings us to the next step that everyone should follow.
After adding Capacitor to your project, it's time to build your project and add the native platforms through Capacitor. For this, you can usually use the tooling of your project. In most projects, you can run npm run build. If you are having a web project, in Ionic projects, you could also run ionic build. Anyway, it will usually create something like a build or output folder. Keep in mind the name of this folder is actually important because with that, we can now go to our capacitor.config.ts file.
This is a configuration file for the native project, and here we're going to find that the webDir that Capacitor is looking at, the directory of your compiled web asset, is set to build. So in case you're having a different name, change it to output or whatever your folder name is. On top of that, we should configure our appId in here. So by default, it is set to io.ionic.starter, but usually you want to have something like com.galaxies.mycoolapp, like the reverse scheme of your company. I recommend you do this before because now we're adding the native platforms and it will take the information from here. You can still change it afterwards, but why should you do this if you can just do it up front?
Then go ahead with npx cap add and the platform name, ios or android. I'm just going to start with iOS, and this will run the dialog here where it will copy all the web assets from build to the new ios folder. It will add a native Xcode project. I even have some Cordova plugins which will be automatically installed. There are also five Capacitor plugins that will be automatically installed, and then the platform is added. I can now follow up and do the same for Android, and it will create an android folder, run the same copy dialog, add the Cordova plugin, install the Capacitor plugin, and then we have two native projects in our Capacitor web project.
You can now inspect your folders. You can actually right-click this one and open in Xcode, but Capacitor also has tools for this. So you can run npx cap open, and this will open the native project. For example, I can run npx cap open ios, and it will bring up the native Xcode project, by the way, with exactly the name that we specified in our configuration. And again, I can do the same for Android, and it will open the Android Studio project of our code.
Step 3: Generating App Icons & Splash Screens
Before we now create and submit our actual app builds, we should just take one more step, and that is number three: adding an app icon and a splash screen. And we can actually do this quite easily with a package called capacitor-assets. So let's copy this and install it in our application. And then we're going to have to create a new folder that I'm going to call assets. Inside of that folder, we need an icon and a splash screen. I'm just going to add a random icon I got around here and a splash image. For the icon, you need to follow the right dimensions. So this should be exactly like this, and the splash screen should be like these. Keep in mind, by the way, that iOS or Android might change those dimensions at some point, so this is just the current state that you need.
Once you've installed this, you can run a simple command called npx capacitor assets generate. By the way, npx just executes a local CLI command, like in our case the... oh, where is it? It created so many files. Like in our case from Capacitor Assets. So this generates all the files that we need, and we can actually confirm this. Let's take a look at our Xcode project, and if I open it now and go to App > App Assets, I'm going to see that there's actually a splash screen and an app icon in all the dimensions automatically generated. And the same was applied to Android. You can look through the logs here. It even created a PWA icon, it created the iOS icons, and the Android assets. So now our app can actually look beautiful on a device as well.
Step 4: Building a Signed Android App Bundle (AAB)
Now it's time for step number four, which is creating and submitting an Android bundle. For this, we should open Android Studio, although we could actually also do the whole operation from the command line. I'm going to show you how in a second. Within your project, you're going to have to select Build and then Generate Signed Bundle / APK from the top bar. On the Mac, on Windows, you're going to have it somewhere else.
It is recommended and I think also required to now have an app bundle and not an APK anymore, which was previously the format used to submit your apps. Now we need to sign our bundle. If you already have a key, you can put it in here. Otherwise, simply go ahead and create a new key file. This should have a password, and then fill out all the information and click OK to generate that key. Make sure that you keep track of your key alias and also the passwords used. And then you can simply click Next. Make sure you're selecting the build variant release because we want to release our application. Hit Finish, and it should start the build and at some point give us a little log message that our build is ready.
If you inspect the builds tab and see the event log, you should at some point see a 'build successful'. That's a good sign. It generated a signed bundle, and we can find this now if we go to our android/app/release folder, and there is the AAB file that we can now submit to Google. Here's a quick tip. If you want to do this from the command line, you can create a keystore.properties file inside of your Android folder with the information for your key file. Then you can head over to app and the build.gradle, and inside the build.gradle, load the information from that file, create a block for a signing configuration for the release option, and add all the information. And then to the build types, you add signingConfig signingConfigs.release. And now we can actually run this from the command line by going into our Android folder and from here executing gradlew bundleRelease. This should have the same effect like building the bundle file from Android Studio, and this might be more helpful if you want to run this on some sort of CI/CD environment like a Jenkins server or any other build server. As we can see, 'build successful', and I could now once again find my AAB file in the same folder just like before.
Step 4 (cont'd): Submitting to the Google Play Store
Now it's time to head over to the Google Play Console. If you don't have an account, you need to create one. It is a paid membership, but it is just a one-time fee. Or you can simply click Create app and fill out all the general information about your new application. At this point, this has become pretty advanced, so you can easily go through a list here of tasks that you should check off like setting up the privacy policy, app access, ads, and content rating. And it just takes a bit more time. I don't want to go through it right now, but you need to make sure that everything from those tasks is finished before you can head over to Production.
Under Production, you can now click on Create new release, and under New releases, you can finally add your AAB file right here. This will run a little integrity check on the AAB file. You might get into problems if you're using the same build ID twice or the same version number twice, so watch out for any errors here. If you receive any errors, you might have to go back to Android Studio, change those numbers, and create another bundle.
You can now set the release name and release note. You can go to Review release, and I got some errors because I actually used that bundle or something before. But if you don't have this, you can now roll out your application to production, which will first of all get a review from Google which might take like one, two, three days. And then you can see your new application on the Google Play Store. If you first want to use the testing track, you can also use this for open testing or closed testing. You can simply also edit your release and upload it in here and make it available to testers or specific persons from your company before you actually do the production release, which will make your application public.
Step 5: Building and Submitting to the Apple App Store
Step number five and the last step is now to release our application for iOS. For this, we have to use Xcode and the tooling provided by Xcode. First of all, we need to go to Signing & Capabilities and select our team. I got my own team here. You need to be enrolled in the iOS Developer program, which is about $99 per year, so a subscription is required to actually build and submit your applications to Apple.
If your product is fine, you should select on any iOS device, because if any of those is selected, the build won't work, and you need to go to Product > Archive from the top bar of your Xcode tools. And then it will run an archive which might take a minute depending on how big your application actually is. Once this is done, we're in the dialogue of new archives. So I'm gonna hit Distribute App now, and I want to do it for App Store Connect, which is the portal where we can manage all the applications of our developer program. You got also options to do ad hoc or enterprise or development distribution, but of course we want to go to the App Store. We want to do upload. We don't want to just export it. Please Xcode take care of everything.
And the following steps can all take a few more minutes. In the past, we had to set a bundle identifiers and provisioning profiles for all our application, and we have to manually create inside of the App Store Connect portal a new application. However, this has become a lot easier and we can just do this from Xcode. So put in your information, hit next, and then Xcode will usually create the up-record in App Store Connect. Even not an error I have when it finally continues successful. Keep those items checked, keep 'Automatically manage signing' checked, and then hit Next. This will finally bring up a last overview of your application and all the content included in your application. And then with the last click, we can finally upload our application. Here we go. Here are all the plugins we're using, here's our application. We can see the icon, the version number, so you can check everything, the application identifier again, and then hit upload, which will upload your IPA file to App Store Connect. And in a few minutes, we should be able to see it in our portal.
At some point, you will eventually get an email with 'the following build has completed processing'. That is good news. You can check out your build now. It has missing compliance issues. That is not a problem. I'm just going to go with 'None', but make sure you select the right compliance here for your application and the kind of security you're using inside your application. And then you can head over to the Prepare for Submission. Finally, add your build, fill out all the other required information, and once you get all of that figured out, you can add your application for review. Review by Apple is actually in my experience faster these days than the review by Google. So expect this to probably also take one or two days, but I've seen cases where it just took a few hours. So be surprised how fast your iOS application will be live.
Automate Builds with Ionic Appflow & Final Words
Finally, I want to say that you can actually do all of these things with Ionic Appflow as well. So with Appflow, you got access to cloud builds. That means for Android and iOS you can set up these pipelines which basically do a lot of things automatically. So you create a commit to a specific channel, it will in the cloud build your application for Apple and for Google and also submit those builds. It is pretty amazing. I've used it myself. Also with cool features are live updates, so you can can update your application if you just make changes like bug fixes to JavaScript directly live without actually going through the App Store review process again. Because if you got a critical bug in your application, you don't want to wait like two days for Apple to review your app. No, you want to fix that immediately. And with Appflow, this is possible with live updates. Check it out, ionic.com/appflow, for all the cool features of Appflow.
Alright, that's it for today. I hope you create native mobile applications with Capacitor based on the steps I've shown you. It is really easy, and you can follow this scheme to create native applications as a web developer, which is pretty impressing in itself. If you submit an application, I would love to see it, so put a link in the comments or, in general, also leave a comment and hit the Subscribe button so you don't miss about the upcoming videos on this channel. All the best for the release of your application. I will hopefully catch you soon. So until then, happy coding, Simon.
