< Go Back

How to Create a Capacitor Android Application from a Jekyll Site with Yarn on Linux

Empower your site with Capacitance!

This how-to will step through the processes on how to create and prepare a WWW project that will be compiled into an Android application. This same process can be used for compiling on iOS, but it is highly recommended to own iOS hardware.

This process allows developers to build an application that works on any Android or Apple device without having to jump through all the hoops of learning Java or Kotlin.

According to Thami at plaineenglish.io,

"CapacitorJS is a great tool. It is open-source, well documented, and simple to use. Personally, I use it a lot and I rarely face any issues with it. Also, you can use it without affecting your codebase.
Of course, you will be getting a hybrid app, so the performance will be less than native mobile apps. But it’s still enough for many use cases, and the gain in development speed and maintenance is very important."

For our own business, we will be building tidy Android/iOS apps that work side-by-side our Jekyll stack architecture. This will enable us to create for all devices and significantly expand upon the opportunities for future projections.

I would prefer the native speedy response times and maybe eventually we will learn Kotlin in the future, but for now, Capacitor is exactly what we are looking for! Thami has a great article on the topic if interested in learning more.

Requirements

We will be using volta and yarn for managing our flux of packages from nodejs engine.

Volta https://volta.sh/
Yarn https://yarnpkg.com/
NodeJs https://nodejs.org/
Android Studio SDK https://developer.android.com/studio
Linux CLI
Editor (I prefer Geany) https://www.geany.org/

Optional requirements if you want to bootstrap a Jekyll WWW site

Docker Engine https://docs.docker.com/engine/install/
Docker Compose https://docs.docker.com/compose/
Git https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
Nano
A HTML, CSS, JS website https://git.sharpetronics.com/sharpetronics/st-jekyll-bootstrap

Setup your environment

After all the requirements are met, we will begin setting up our environment for our mock website app that we will be compiling on Android.

For simplicity sake, we assume you have your Jekyll _site built, but if not and you would like to use an example site, we have created a nifty Jekyll bootstrap script that enables getting up and running in no time! Any HTML, CSS, JS website will do, but in this example, we are exemplifying Jekyll superpowers!

In the root of your android site directory, clone the Jekyll site

git clone https://git.sharpetronics.com/sharpetronics/st-jekyll-bootstrap

Then, follow the README.md

Initialize Your App

In the root of your Jekyll web application, we init with yarn and add the capacitorjs packages.

yarn init
yarn add @capacitor/core

Add capacitor/cli to yarn as a dev dependency.

yarn add -D @capacitor/cli

After adding the packages to our package.json, we initialize the capacitor app and enter the details on the prompt. Keep in mind the Jekyll _site directory is where the static website is built.

yarn cap init

Then, we add the Android native platform to our capacitor package.

yarn add @capacitor/android
yarn cap add android

We should now have the following files in the root of our application:

android capacitor.config.json .editorconfig .git .gitignore package.json .pnp.cjs README.md _site .yarn yarn.lock

ls -a

The package.json file displays the packages we added earlier

{
 "name": "appExample",
 "packageManager": "[email protected]",
 "dependencies": {
   "@capacitor/android": "^4.6.1",
   "@capacitor/core": "^4.6.1"
 },
 "devDependencies": {
   "@capacitor/cli": "^4.6.1" 
 }
}

Now, we update the config file if it needs updated. Normally, the prompts should have updated this, but in case you inputted the wrong directory for where your site lives, we change the following line to your site directory. If following along, the _site directory is where our static site is after Jekyll builds it.

nano capacitor.config.json

Change the webDir to the location where your HTML site lives and save/exit nano.

Run your App via CLI

After you have done all the following, we run our app via CLI or open the Android project in Android Studio.

yarn cap run android

open the android app project from the root directory called "android".

Note: You must have a emulator installed in Android Studio, including the bios option for cpu virtualization enabled. In AMD, this is called SVM and Intel bios is called VMX.

egrep "svm|vmx" /proc/cpuinfo will display if your CPU supports virtualization.

lscpu will also display if your CPU architecture supports virtualization.

Congratulations!!!

We have successfully compiled an Android application from a Jekyll HTML site with Capacitor superpowers! From this starting point, we are able to make use of other plugins and interact with the native features of the Android device.

Financial Support & Donations

I mainly debug code, drive, yak shave and deep dive into research for Linux base operating systems.

I am a Free Software Associate (FSF), privacy advocate and Cosmopolitan that enjoys philosophie, meta-physics, hacking and debugging computer hardware/software.

https://liberapay.com/oDinZu/