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
Latest comments (56)
Unlock the power of web-to-app transformation with this insightful guide on how to create Android app from website! Thanks for sharing this resource, Narottam. Converting websites into apps using Capacitor is a game-changer for user engagement and accessibility.
Nice introduction!! Will be trying it soon.
There is a native plugin for Splash screen.
capacitorjs.com/docs/apis/splash-s...
why not use react native?
It is flexible. You can use your favourite framework like svelte, Vue js or even vanilla js.
Might not be the best solution for every apps but I think there are usecases where you can use a library like this.
I have created a web app, which I will be deploying on playstore in few days which uses capacitor under the hood.
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.
Nice tutorial 👌
Thank you❤️
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
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!
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).
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.
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 😢
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!
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.
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
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.
Nice article!
Glad you liked it!
Thank you for sharing this!
You're welcome ☺️
bravo
Glad you liked it ♥
Or just make a PWA
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
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
@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...
Thats an Apple problem normal companies like Google allow PWAs in the store.
Bloody users! Who needs them... 😛
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.
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
This interests me:
Capacitor WebRTC feature proposal: github.com/capacitor-community/pro...