DEV Community

loading...
Cover image for How to transform any SPA/PWA web application into mobile app with CapacitorJs ??

How to transform any SPA/PWA web application into mobile app with CapacitorJs ??

jamalroger profile image BELHARRADI JAMAL ・2 min read

Hi all,web development become more powerful, web now is more easy we can build complex application with technology like Angular, VueJs and react those technology can build SPA/PWA.

What is SPA/PWA/Capacitorjs?? SPA is short of "single page application" is web application that can run in one page in the browser , the app don't need refresh to post or fetch data, we ajax nested of refreshing.

PWA is a SPA with capacity of work offline with "service worker" that cache asset file(js,css) in the browser means no need to download asset file from http server in the second request.

CapacitorJs is a cross-platform native runtime for web apps, means can transform web application into mobile app and run it in os, it take SPA/PWA and run it on a WebView in native application this native application can run anywhere in any os mobile like android and ios.

let take a example with a VueJs app
we suppose that you have already had a Vuejs app
if you don't now how to create a vue app please read this article Get started with Vuejs

The structure of Vue projet is like this

Alt Text

when you build your vuejs app you will find dist that contains of entrypoint of your SPA
Alt Text
if you open index.html in the browser will run your app,
note "verify the the path of assets in index.html"

Now let add CapacitorJs to our vue app.

Installing capacitorjs

npm install @capacitor/core @capacitor/cli
Enter fullscreen mode Exit fullscreen mode

Init app for CapacitorJs

npx cap init 
Enter fullscreen mode Exit fullscreen mode

this command should ask about your name of your app,ID,...
and will generate capacitor.config.json for Capacitorjs config should be like that

{
  "appId": "com.app.app",
  "appName": "app",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}
Enter fullscreen mode Exit fullscreen mode

we will edit the value of attribute webDir from www into dist because Vuejs build your app into dist folder

now should will be like that

{
  "appId": "com.app.app",
  "appName": "app",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "dist",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}
Enter fullscreen mode Exit fullscreen mode

Now will should add platform can be android,ios or electron.

Let start with android

npx cap add android
Enter fullscreen mode Exit fullscreen mode

That should create android folder in your root folder
Alt Text

Now let sync our web app with the android app

npx cap sync
Enter fullscreen mode Exit fullscreen mode

by run this command will copy the dist folder to android app

Alt Text

Now our app is ready to run in android by open android folder in android studio and build our apk.

you can find the source code here vue-capacitorjs-example

Sorry for my bad English, Thanks you for reading.

Discussion (0)

pic
Editor guide