How to Turn Your Website into an iOS/Android App in Just Five Minutes

DESCRIPTION

You can distribute a website from app stores
Let us walk through app-ifying a website step by step
If you can build a website, you can ship an app

Main Text

DESCRIPTION states it boldly up front, but that is largely true. App-ifying has limits—content often needs to be a media-style "app"—but as a starting point, let us see how to run a website built with HTML/CSS and a little JavaScript as an app on a real device.

The website we will app-ify is here:
https://www.benaton.net/

In I renewed the website for a French restaurant listed in the Michelin Guide—explaining the thinking and implementation behind the scenes I covered the background; here I will app-ify that site with the Capacitor library and display it in iOS and Android emulators.

It is a French restaurant that is actually open for business, so please visit if you are interested.

Environment Setup

First, set up the environment needed to use Capacitor. This tutorial also builds an iOS app, so I write it assuming macOS; if you only build Android and not iOS, Windows works too.

By the way, Xcode and Android Studio take a long time to download, so download them when you have time.

1. Installing NodeJS

Install NodeJS, a JavaScript runtime. Installing it also lets you use npm, a package manager for JavaScript libraries.

From https://nodejs.org/ja/download/, install the "LTS (Recommended)". "Current" may not be supported by some libraries, so use LTS.

iOS App Environment Setup (macOS Only)

Installing Xcode

Install Xcode from the App Store.

https://apps.apple.com/jp/app/xcode/id497799835?mt=12

Even if you downloaded it before, Capacitor does not support Xcode below 11, so I recommend updating to be safe.

Installing CocoaPods

Use CocoaPods, the package manager for Xcode, and Xcode Command Line tools to use it from the command line. Open Terminal and run the following.

% sudo gem install cocoapods
% xcode-select --install
% pod repo update

Android App Environment Setup (Common)

You need to download Android Studio, an IDE (integrated development environment). Download from the URL below.

https://developer.android.com/studio

After installation, launch it once and complete the initial setup.

Preparing to Build the App

Now configure building the current website as an app. First, download the website source to your machine.

https://github.com/le-benaton/website

Source code (except text and photo data) is published under the MIT license.

If you know Git, git clone git@github.com:le-benaton/website.git; otherwise click the "↓Code" tab and the "Download ZIP" button to download the full source.

This repository is structured as follows.

le-benaton/
├── .github/ ............. GitHub Actions control
├── scripts/ ............. Template application scripts
├── src/
│   ├── data/ ............ News and wine-list data
│   └── template/ ........ Website templates
├── .gitignore ........... Source files excluded from GitHub
├── package.json ......... Library management file
├── package-lock.json .... Library version lockfile (generated automatically)
├── prettier.config.js ... Source auto-formatting configuration
├── README.md ............ This file
└── tsconfig.json ........ Script configuration

The full source is under src, but building with the program auto-generates www with files for publication, so let us try that.

First, use npm, the Node.js package manager you installed earlier, to install the program for building. From the downloaded directory, run:

If you are not sure how to run commands, drag and drop the extracted folder onto Terminal. Terminal opens at that directory; run the command there.

% npm install

Running this starts installation automatically. When it finishes, run:

% npm run build

Wait a bit and you will see www created in the directory. That folder is what you publish and what becomes the app.

📌 When You Prepare Your Own Website

If you do not use a build-then-publish flow like this (you prepare HTML and JavaScript files for publication directly), you need to prepare as follows.

Change all CDN calls to local files
For example, when loading CSS or jQuery, do you use a CDN?

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
	defer
></script>

In that case, change all CDN calls to local files. Download the files and call them locally. The following is OK. Do the same if you load CSS from a CDN.

<script
  src="assets/jquery-3.5.1.min.js"
	defer
></script>

Note: Google Analytics will not work (it is web-only), so leaving it as-is is fine. Google Adsense will not work either; if you want ads, you need AdMob (this article does not cover details).

Move files to a publication directory and set up npm
Next, create a www directory and move all publication files into it. Then, in the project directory, run:

% npm init

It asks for package name and more; since you are not publishing, press Enter through everything. Then package.json is created automatically—that means success.

Capacitor Setup

Next install Capacitor. Run:

% npm install @capacitor/core @capacitor/cli

This installs Capacitor itself and the CLI. Wait until it finishes, then run:

% npx cap init

It asks various questions; press Enter through all of them. capacitor.config.json is generated—your Capacitor app config. Then create the platforms you need.

For an iOS app

% npx cap add ios

For an Android app

% npx cap add android

For iOS you get an ios directory; for Android, android—all app files are created there automatically. If you see [error] Capacitor could not find the web assets directory, you forgot to create www.

Launching the App

On iOS

Let us launch the app in an emulator. Run the following to open Xcode you installed earlier.

% npx cap open ios

When it opens, you see a screen like this (if the screen is blank, select App at top left)

First, sign the app. From the left, click "App" → "(TARGETS) App", then the "Signing & Capabilities" tab at the top to see Signing. Select your account under "Team".

Next, select "Generic iOS Device" at top left and choose the emulator you want. Press ▶ to emulate running on an iOS device (first launch takes time)

Let us select iPhone SE and run. A screen like this opens and you can emulate.

JavaScript works too, so you can open and close menus and so on.

On Android

Run the following to open Android Studio.

% npx cap open android

If you did not run npx cap add android earlier, you get [error] android" platform has not been created. Use "npx cap add android" to add the platform project.
When Android Studio opens cleanly, click ▶ at the top to start the emulator.

You can pick the emulated device from the dropdown left of ▶; if nothing appears, add a device from "OPEN AVD Manager".
If it runs well, you see something like this.

Updating Content

Right now www is copied to both iOS and Android, but you will update content. When you do, update www first, then run:

% npx cap copy

That copies the latest www contents to iOS and Android.

Closing

Now you know a normal web app can be built as iOS and Android apps. From the left: web view, Android emulator, iOS emulator.

App-ifying also reveals the next steps. Namely:

App-like appearance
iOS follows Human Design Guideline and Android Material Design, right? Push transition animations and button click effects in HTML/CSS are hard.
App-like features
Not just displaying screens—you might want task lists, real-time articles, chat, and other app-like features.

To solve these, the Ionic team that develops Capacitor released "Ionic Framework" for use with various JavaScript frameworks. Please try it as the next step.

For detailed usage, including Capacitor plugins, see the book Mobile App Development with Ionic [Angular Edition].

See you again.