DEV Community

Cover image for Convert your website into an android app using capacitor 😱.
Narottam04
Narottam04

Posted on

Convert your website into an android app using capacitor 😱.

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
Enter fullscreen mode Exit fullscreen mode

Now to run our react application we use the below command

npm start
Enter fullscreen mode Exit fullscreen mode

Our demo application will look something like this.

demo app

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
Enter fullscreen mode Exit fullscreen mode

Step 3: Install capacitor

To create our android application, let’s first install capacitor cli and its core library.

npm install @capacitor/cli @capacitor/core
npx cap init
Enter fullscreen mode Exit fullscreen mode

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.

capacitor cli

Now, open the capacitor.config.ts file in webDir and enter the name of your build folder if it is different.

capacitor config file

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

android studio project structure

By clicking on the play button in android studio, you can now run your android application.

open emulator

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.

build apk

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.

build apk success

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.

app demo gif1

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

folder structure

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
Enter fullscreen mode Exit fullscreen mode

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.

icon folder structure

Now to test our splash screen follow step 4 again.

final app demo!!!

Reference

https://media.giphy.com/media/xUPOqo6E1XvWXwlCyQ/giphy.gif

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

Discussion (57)

Collapse
jonrandy profile image
Jon Randy

Or just make a PWA

Collapse
narottam04 profile image
Narottam04 Author

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.

Collapse
lukeshiru profile image
Luke Shiru • Edited on

You might have to update your PWA sources. PWAs has all that 😅 ... you can even share to and from a PWA. Just try Twitter's PWA if you don't believe me 😊

Thread Thread
cyril_ogoh profile image
ogoh cyril

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

Thread Thread
gismo1337 profile image
Sebastian

you are trying to sell this a way too much.

Collapse
jzombie profile image
jzombie

This interests me:

Capacitor WebRTC feature proposal: github.com/capacitor-community/pro...

Collapse
muhammedfuhad profile image
Muhammed Fuhad

Hey can we add custom splash screen to pwa?

Thread Thread
fridaycandour_46 profile image
FridayCandour

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.

Thread Thread
jonrandy profile image
Jon Randy

A splash screen? How very late 90s, early 2000s

Collapse
jankapunkt profile image
Jan Küster

@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...

Collapse
jonrandy profile image
Jon Randy

Bloody users! Who needs them... 😛

Collapse
ivanjeremic profile image
Ivan Jeremic • Edited on

Thats an Apple problem normal companies like Google allow PWAs in the store.

Collapse
adam_cyclones profile image
Adam Crockett

Love that install button

Collapse
mkvillalobos profile image
Manrike Villalobos Báez

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.

Collapse
anesu profile image
Anesu Kafesu

In my experience, it's hard to explain to users what a PWA is.

Collapse
jonrandy profile image
Jon Randy • Edited on

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

Collapse
olyno profile image
Olyno

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).

Collapse
ivanjeremic profile image
Ivan Jeremic

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.

Collapse
olyno profile image
Olyno

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.

Thread Thread
ivanjeremic profile image
Ivan Jeremic

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...

Thread Thread
olyno profile image
Olyno

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.

Thread Thread
ivanjeremic profile image
Ivan Jeremic

You sound like a time traveller from 2009

Thread Thread
olyno profile image
Olyno

What do you mean?

Thread Thread
ivanjeremic profile image
Ivan Jeremic • Edited on

"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.

Thread Thread
olyno profile image
Olyno

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.

Collapse
anesu profile image
Anesu Kafesu

I don't have Android Studio installed. I just have the Android SDK and I do everything from the command line

Collapse
anesu profile image
Anesu Kafesu

Even the building part. I run the gradlew script that's contained in the Android folder.

Collapse
zippcodder profile image
Deon Rich • Edited on

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.

Collapse
olyno profile image
Olyno

Would be awesome! Don't hesitate to drop the link to your article if you do one!

Collapse
raibtoffoletto profile image
Raí B. Toffoletto

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 😢

Collapse
narottam04 profile image
Narottam04 Author

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 😅.

Collapse
jwp profile image
John Peters • Edited on

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.

Collapse
narottam04 profile image
Narottam04 Author

Interesting, I have never made a website with c#. Is there any benefits for using blazor, .net like framework over svelte, next js?

Collapse
jwp profile image
John Peters

Yes, Security is increased massively. Not to mention speed due to no JIT requirements.

Collapse
rukundob451 profile image
Benjamin Rukundo

This must be super awesome. Surely can't wait to give it a try. Thanks for this indeed.

Collapse
narottam04 profile image
Narottam04 Author

You're welcome❤️

Collapse
rukundob451 profile image
Benjamin Rukundo

Surely, probably we can connect as I could be able to learn a lot more from you. thank you!

Collapse
kissu profile image
Konstantin BIFERT

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!

Collapse
narottam04 profile image
Narottam04 Author

Yes, I think with react native and flutter it is easy to create an app that has native animation and feel to it.

Collapse
devsmitra profile image
Rahul Sharma • Edited on

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.

Collapse
narottam04 profile image
Narottam04 Author

Sounds interesting, do you have any resources where I can find more information about it?

Collapse
devsmitra profile image
Rahul Sharma

I'm using the same, You can refer this

youtube.com/watch?v=FrqGGw9DYfs

Thread Thread
narottam04 profile image
Narottam04 Author

Thank you for sharing

Collapse
raibtoffoletto profile image
Raí B. Toffoletto

Nice introduction!! Will be trying it soon.

Collapse
jeremymonatte profile image
Mbenga

Nice tutorial 👌

Collapse
narottam04 profile image
Narottam04 Author

Thank you❤️

Collapse
jonaspetri profile image
Jonas Petri

Nice article!

Collapse
narottam04 profile image
Narottam04 Author

Glad you liked it!

Collapse
yongchanghe profile image
Yongchang He

Thank you for sharing this!

Collapse
narottam04 profile image
Narottam04 Author

You're welcome ☺️

Collapse
avi1112 profile image
Avi1112

Apt and well explained 👍🏻

Collapse
narottam04 profile image
Narottam04 Author

Thank you!❤️

Collapse
sojinsamuel profile image
Sojin Samuel

bravo

Collapse
narottam04 profile image
Narottam04 Author

Glad you liked it ♥

Collapse
sahillangoo profile image
Sahil Langoo

There is a native plugin for Splash screen.
capacitorjs.com/docs/apis/splash-s...

Collapse
chismo950 profile image
chismo950

why not use react native?

Collapse
narottam04 profile image
Narottam04 Author

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.