From Web to Native with CapacitorEmmanuel AinaBlockedUnblockFollowFollowingMar 6You must probably have a solution you’ve built or about to build.
You’re basically a web developer and you’re most likely going to end up extending your solution to apps installable on Android and IOS for maybe good User Experience (UX) or just for personal satisfaction.
I’m really proud of the fast and steady growth of the web development industry all over the world, thankful to developers building useful open source projects and contributing to them, teams like the IONIC team building very interesting tools that allows web developers to use the same toolset they use to build stuff for the web to build installable apps for IOS, Android and Windows.
Without saying too much, let’s dive into how to use ionic’s capacitor to build out our web solution as an Android app (same process for iOS too).
Capacitor is built on top of Cordova and Phonegap, with the goal of giving developers the power of being able to build web apps that can run natively on iOS, Android, Electron and the Web.
This solution is already provided by Cordova, but Cordova can’t run on the web i.
e we can’t Cordova it in PWA platforms, that's where ionic’s Capacitor comes in.
Although, as of this time of writing this article, Capacitor is still in beta but trust that you can already use it to build things! — Feb, 2019To start using Capacitor you need to readily have node v8.
6.
0, Xcode 9 or above (if you want to build for iOS), and Android SDK (if you want to build for Android) on your machine, in case don’t already have that, you should download and install them to proceed with this tutorial.
Now you should have the required dependencies on your machine, to be sure you’re on track run this command in your terminal/command prompt to be sure you have node on your machine:$ npm -v$ node -vThey should output the version of npm and node respectively.
Now that we are certain of having node on our PC, we can proceed with the following steps to transform our web solution into an installable app.
*You don’t need to install Capacitor installed on your machine globally, you can simply “drop-in into any existing modern Js web app”.
*If your project was not a node project, you’ll have to run npm init in your project root directory to initialise the project as a node project.
Make sure you’re already in your project directory, then run:$ npm i — save @capacitor/core @capacitor/cliThis simply adds capacitor into your project and its required dependencies.
2.
Now that we have capacitor successfully installed in our project, we should go ahead and initialise it with our desired app name.
e.
t.
c$ npx cap initThis command will prompt you to enter some details of your app which are: App name, Package ID, and project directory in other to be able to set up your native project with the necessary details you want.
If the above codes run successfully, then your project is now Capacitor ready!3.
After running the above code successfully, you should observe a newly created files in your project directory which should be ‘capacitor.
config.
json’ and update in your ‘package.
json’ file:‘capacitor.
config.
json’: this is the configuration file for capacitor, when you open it you’ll notice that all the responses you entered in the step above are in the file.
You can always change the “appId” and “appName” value to anything you wish, for the “webDir” the value has to be the name of your where the production files will be built into.
If you're using core Js without any frameworks, you can just create a www folder and move your HTML, CSS and javascript file into it or change the “www” to something else if you already have a folder that contains your web codes.
‘package.
json’: this npm file originally indicates node modules and configurations for a node project, so the update on it is the reflection of capacitor being installed in the project.
4.
Now we need to add the platform (Android, iOS) we want to build our project out to, for the sake of this project I’ll be adding and building for Android (but the same process applies for iOS).
Run:$ npx cap add androidThat should install the necessary requirements for android and create an android folder which should contain some Android files you wouldn’t have to touch.
5.
Having installed our desired platform, capacitor will need to copy our web project file into the project folder.
For this to happen we’ll have to run this command:*Make sure you’ve built your web project to your satisfaction$ npx cap copyWith that, we have been able to successfully copy our web code into the Android folder to properly build them into our desired APK file.
6.
Now that we have been able to copy our web code to the proper destination, we should now open our web project in the platform’s IDE so we can build out our installable APK file.
????$ npx cap open androidor$ npx cap openThe first command will open the project in Android Studio straight up, while the other will prompt a question asking which platform you want to open to.
When you open your project in your platform’s IDE for the first time, you might observe somethings trying to index or download, you should let it finish successfully.
*You can only open the platform you’ve installed i.
e you can open iOS if you haven’t installed it following the earlier step of installing the platform you want to build out7.
We have finally come to our last step which is to build out our app as apk.
Building out an app is actually very easy, it’s just a few clicks away.
Following the steps in the above image will prompt Android Studio to build out your APK file, you should get a prompt like in the image below when the build is done so you can get the location of your APKAnd there we have our app’s APK.
You can also run/test your app in a simulator/emulator with just one click like in this image in Android StudioYou’ll then be prompted to select an AVD you’ll like to use to run your app which afterwards will render your app in the selected AVD as in the image belowNow you have the debug version of your app, I’ll talk about the process of building your app for production, signing the APK and using some native features in your app with capacitor in my next post.
Enjoy!Github project link: https://github.
com/horlah/todoApp.. More details