Capacitor: Running a Web App on Mobile

Published on February 27, 2019
    Capacitor: Running a Web App on Mobile

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    Capacitor, a project built by the team behind Ionic, is a great way to take your JavaScript web applications and get them running on iOS, Android, desktop (via Electron) or the web platform. It allows you to access the native device’s SDKs and aims to be a replacement for Cordova. I’ll be assuming that we have an Ionic application built with Create React App (yes, you read that right!) for this article, but your implementation may be different.

    Firstly, let’s build our application so that our production build can be ran on a device:

    $ npm run build

    Next, to install Capacitor, run the following in your terminal inside of your project folder to install the needed packages:

    $ npm install --save @capacitor/core @capacitor/cli
    $ npx cap init

    You’ll then be asked some information about your project. As this is project is simply an example, use the defaults for each prompt.

    We’ll then be greeted with something similar to this:

    🎉   Your Capacitor project is ready to go!  🎉
    Add platforms using "npx cap add":
      npx cap add android
      npx cap add ios
      npx cap add electron

    From here we can select the project we’d like to build to. I’ll be using ios for my example.

    $ npx cap add ios

    Uh oh, running this with the default settings gives us this error!

    [error] Capacitor could not find the web assets directory "/repos/ionic-react/www".
        Please create it, and make sure it has an index.html file. You can change
        the path of this directory in capacitor.config.json.
        More info: https://capacitor.ionicframework.com/docs/basics/configuring-your-app

    This is a common error you may run into when adding Capacitor to a new Ionic project. Let’s update the newly created capacitor.config.json to point toward the build directory:

      "appId": "com.example.app",
      "appName": "App",
      "bundledWebRuntime": false,
      "webDir": "build"

    If we run the command again, Capacitor will add an iOS application to our project which we can open inside of Xcode with:

    $ npx cap open ios

    We can open our application on a device by clicking the Play button from within Xcode.

    Making Changes to the App

    As we continue to develop our application, we don’t want to have to remove the platform folder and re-add it each time. Luckily, we can build our JavaScript and copy the files over to our iOS project by using cap copy:

    $ npm run build
    $ npx cap copy

    This will use the files inside of our build folder to update our build. If we restart our application from within Xcode again, you’ll see that the application updates with any changes you’ve made.

    And that’s it! Now that you’re up and running with Capacitor, you can checkout the official documentation to learn about plugins and how to use the different device SDKs or web APIs.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us

    About the authors

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Hi PaulHalliday, Actually i have PWA which is in .Net, i want to convert PWA to IOS native app using Capacitor is it possible, please let me know, if possible please let me know the Steps to convert PWA to IOS app. Thank you in Advance

    hi can a mac laptop with mac os 10.13.6 do this?

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel