According to Atwood's Law, "Any application that can be written in JavaScript, will eventually be written in JavaScript."
In this article, we will learn how to convert a website or web application to an android app that can be deployed on the Android play store or installed on a mobile device using a library from Ionic called a capacitor. I will use react for this demo, but you can use any other framework or even plain old JavaScript.
Prerequisite
- A production build folder. Most frameworks have a build command to create a build folder for you. If you are using vanilla JavaScript add all your assets and files to a folder.
- Android studio
Step 1: Create a react application.
We will begin by creating a react application using the following commands. You can skip steps 1 and 2 if you already have an existing project and build folder.
npx create-react-app my-app
cd my-app
Now to run our react application we use the below command
npm start
Our demo application will look something like this.
Step 2: Create a Build folder for your application.
A build folder is crucial in converting our react application to an android application. We use the following command to create a build folder for our react application. If you are using another framework, it might have different commands, so I recommend reading the documentation for the framework you are using. If you are using plain JavaScript, create a folder that contains all your files and assets.
npm run build
Step 3: Install capacitor
To create our android application, let’s first install capacitor cli and its core library.
npm install @capacitor/core
npm install -D @capacitor/cli
npx cap init
The first question will be to enter the name of your application, and the second one will be to enter the package id of application com.yourAppName.android.
Now, open the capacitor.config.ts file in webDir and enter the name of your build folder if it is different.
Step 4: Create your android application
To create an android application, make sure you have installed and configured your android studio properly.
Assuming everything above has been set up, run the following command.
npm install @capacitor/android
npx cap add android
With the first command, we will download the capacitor android library into our project, and with the second command, we will generate the android code.
Now, it's time to open the android studio using the following command.
npx cap open android
Alternatively, you can open Android Studio and import the android/ directory as an Android Studio project.
It will take some time for your application to open, but it should look something like this once it is ready.
By clicking on the play button in android studio, you can now run your android application.
The emulator screen on my potato laptop was entirely black for some reason. However, if you have the same problem as me, create an apk and run it either on an android simulator like Nox player for windows or on an actual android device.
Click on Build >> Build Bundle(s) / APK(s) >> Build APK(s) to generate a installable debug apk file.
To submit the app to the play store, we need to create a signed bundle, but now for testing, we will create a debug application.
It will show a similar message in the bottom right corner if successfully built.
click on locate folder or navigate to android\app\build\outputs\apk. Now you can run your application either on your android phone or android simulator like nox player etc.
Hurray! it works 🥳🥳🥳.
Bonus Section: Create a custom splash screen for your android application
An app would not be complete without a customized splash screen and icon. If we want to create a splash screen and custom icon, we must install the capacitor plugin first.
npm install -g cordova-res
cordova-res expects a Cordova-like structure: place one icon and one splash screen file in a top-level resources folder within your project, like so:
resources/
├── android/
└── icon-background.png
└── icon-foreground.png
├── icon.png
└── splash.png
I am using icon and splash from the project I worked on for two months. With my new project, newbie cryptocurrency investors will be able to try investing in cryptocurrencies without any risk. If you are interested in learning more, subscribe to my newsletter to receive updates on https://blog.webdrip.in/
Next, run the following to generate icons and splash screens of different sizes for your app.
cordova-res android --skip-config --copy
The command should generate two folder icons and a splash. You will not need to configure anything because all assets generated on this folder will be copied to your Android code folder.
Now to test our splash screen follow step 4 again.
Reference
I hope this post was informative. 💪🏾 Feel free to comment or reach out to me if you have any questions.In the next blog, we will be adding a push notification feature to our capacitor app.
For more such insights, checkout my blog website blog.webdrip.in
Top comments (55)
Or just make a PWA
Capacitor provides access to many native api's like push/local notification, geolocation, camera etc. The introductory article does not cover those topics because it would complicate the tutorial. If an app does not need any of the native APIs, I think PWA can be a good choice. I believe that capacitor has better iOS application support.
This interests me:
Capacitor WebRTC feature proposal: github.com/capacitor-community/pro...
Hey can we add custom splash screen to pwa?
Not possible at moment, the default way of adding a splash screen is allows the v browsers to boast up your pwa via web pack JavaScript package behind the scenes, so custom splash is not coming any time soon.
A splash screen? How very late 90s, early 2000s
@jonrandy we also build our app as Pwa but many of our users just don't get it. They want to download it from the store...
Bloody users! Who needs them... 😛
Thats an Apple problem normal companies like Google allow PWAs in the store.
I love the PWA alternative... for me, must be the future... but Apple is not ready for it! PWA apps are not fully supported in iOS as Android. That's a shame! :( I hope someday Apple change their mindsets.
Love that install button
In my experience, it's hard to explain to users what a PWA is.
There's really not much explaining to do - "Click on the install button" - they really don't need to know technical details as to why they're different.
It's also possible to put them in the Play Store
Capacitor is a great tool, but something I blame it for is the fact that it depends on Android studio. I'm used to Vscode, and I prefer working with it. I have no interest in switching to Android Studio. So it becomes frustrating to create a project with Capacitor (and any other similar tools depending of Android Studio too).
Then you don't get it.. you don't need android studio for developing the app, you develop inside vscode like normal and only for the build you need xcode for ios or android studio for android, you develop the whole app still in vscode.
But again, i do need Android Studio or Xcode. I'm just waiting a real good ecosystem where with a simple command, i can build the app. This is possible, but not accessible.
You can't build native apps for ios on windows with vscode and also not for android in xcode you need that, I mean it is already so easy and people still complain, do you understand that you do nothing in android studio other than compiling when its ready nothing hard...
So we stay on the initial problem. We have to install almost 1go of tools (Android Studio), to use in the end not even 10% (the compilation part, build tools). It's like using a tank to kill a fly, it's not necessary.
I know very well that using Android Studio is simple, and very convenient, but why bother installing this IDE when someone could just create an environment for Vscode, or more generally create a CLI. I'm complaining because it's an unnecessary overhead, and many other developers are complaining about it too.
Also, as you mentioned, we can't build Android applications on Mac, and IOS applications on Windows/Linux. This is one of the problems I point out, to have a real ecosystem that is easy to use. Mobile application development is still a niche, but it's growing year by year, thanks to React Native and Expo, which simplifies the whole process.
You sound like a time traveller from 2009
What do you mean?
"Mobile application development is still a niche, but it's growing year by year"
This is what you said like LoL what?
Also I don't think its up to framework authors I think companies like apple force you to use XCode for the build part.
I also think you complain without any reason you sound like your PC has a 500mb hardrive and no space space for android studio.
I sound as someone who would like this ecosystem to be better, and not dependent on unnecessary tools. We can code a backend with any IDE, a frontend with any IDE, but we depend on Android Studio and Xcode for mobile applications. What I would like is to be able to remove this dependency.
I don't have Android Studio installed. I just have the Android SDK and I do everything from the command line
Even the building part. I run the gradlew script that's contained in the Android folder.
I actually managed to build an apk with a single bash function I made and pasted in my rc (no gradle, no android studio). Its actually not that hard, might write an article on it. You just run the command on your project folder, then it spits out an apk ready for installation.
Would be awesome! Don't hesitate to drop the link to your article if you do one!
You will always need Xcode and AStudio to emulate the devices. If you do flutter or react native is this same... although you can code everything is VSCode 😢
Me too, I like to code in vscode and switching to android studio is a pain.
They have introduce a vscode plugin for launching app in terminal but I think I have not installed emulator properly 😅.
Yea but plenty of api for pwa that has been abandoned or discontinued
For instance geo fencing and many more for either security exploits or something else
Pwa is a go to
But some core native api are just need to solve a usecase
AtWood's law has been usurped with WASM.
Javascript is optional now with Rust, Python, C#, and Java. Each create WASM assemblies allowing for no Javascript web apps.
I'm currently working on a Blazor project which is awesome. It's 100% isomorphic in C#. (Front end and backend) it also supports optional TypeScript and Javascript,css and scss.
Interesting, I have never made a website with c#. Is there any benefits for using blazor, .net like framework over svelte, next js?
Yes, Security is increased massively. Not to mention speed due to no JIT requirements.
What about PWA + WebView.
If some feature are not available on PWA you can use device native feature and using JS channel pass data to PWA.
Sounds interesting, do you have any resources where I can find more information about it?
I'm using the same, You can refer this
youtube.com/watch?v=FrqGGw9DYfs
Thank you for sharing
Nice in depth tutorial! 🧡
I'll go with Flutter or React Native for something more complex but overall, Capacitor is great for something fast and quick!
Yes, I think with react native and flutter it is easy to create an app that has native animation and feel to it.
This must be super awesome. Surely can't wait to give it a try. Thanks for this indeed.
You're welcome❤️
Surely, probably we can connect as I could be able to learn a lot more from you. thank you!
Nice introduction!! Will be trying it soon.
Nice tutorial 👌
Thank you❤️
Nice article!
Glad you liked it!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.