Convert your website into an android app using capacitor 😱.
Tags: webdev, beginners, tutorial, javascript
Published: 2022-06-09 12:31:55

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.

```bash
npx create-react-app my-app
cd my-app
```

Now to run our react application we use the below command

```bash
npm start
```

Our demo application will look something like this.

![demo app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn6albcmahrpo2f8gq1t.png)

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

```bash
npm run build
```

## Step 3: Install capacitor 

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

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

![capacitor cli](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kp1bhhx6gxevo5c3zp6.png)

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

![capacitor config file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bp5kigqt5hbcfng2oukf.png)

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

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

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

![android studio project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78z121k3yjo25n3386wa.png)

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

![open emulator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwj2wgfgzhara8drdxm7.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl51ywsai9mq585knmhl.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brl21wdxuz82pk4m67uc.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0b8lyok91hsne45eyi0.gif)

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.

```bash
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
```

![folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y75hp38jcnuc6ijwt4km.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/](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.

![icon folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7angwe1854b29o8zm9pb.png)

Now to test our splash screen follow step 4 again.

![final app demo!!!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pnyuzvqmtakbwg8c0i8.gif)

## Reference

- [Capacitor Docs](https://capacitorjs.com/docs)

![https://media.giphy.com/media/xUPOqo6E1XvWXwlCyQ/giphy.gif](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.

<a href="https://www.buymeacoffee.com/narottam"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=narottam&button_colour=FFDD00&font_colour=000000&font_family=Poppins&outline_colour=000000&coffee_colour=ffffff"></a>

For more such insights, checkout my blog website [blog.webdrip.in](http://blog.webdrip.in/)