Skip to content

Instantly share code, notes, and snippets.

@dtarnawsky
Last active June 24, 2021 17:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dtarnawsky/964121f121e18f01aafb579bca0feed9 to your computer and use it in GitHub Desktop.
Save dtarnawsky/964121f121e18f01aafb579bca0feed9 to your computer and use it in GitHub Desktop.
How to take your web app to the App Store

Take your web app to the App Store

Do you have a web application that you want to put in the App Store or Play Store?

If so then this guide (with the help of Capacitor) will help you create a XCode and Android Studio project containing your web application that you can build, run and deploy to the store.

What web applications can be converted?

If your web application ends up as html, css and js then you are in luck. Here are some types of web applications you can create a native app using this guide:

  • Modern SPA Frameworks (React, Angular, Vue)
  • Older Frameworks (Jquery, Jquery Mobile, Bootstrap)
  • Vanilla HTML, CSS and Javascript Apps
  • WebAssembly Apps (Blazor)
  • Server side rendered websites (through an iFrame)

What do you need?

Pre-requisites:

  • Make sure to have Nodejs (v12+), XCode and Android Studio installed.
  • You will need a folder that contains all of your static web assets (html, css, js files)

Create a root folder that contains a sub folder with web assets (eg www). After running the steps below your folder will contain an ios and android folder with the necessary native code.

Installation

If your project does not have a package.json file then create one with:

npm init -y

Then install Capacitor:

npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android

Initialize the project:

npx cap init

You will asked a few questions which will create a file capacitor.config.json with your answers.

Next, lets add iOS and Android projects by running:

npx cap add ios

npx cap add android

Conclusion

You now have a project for XCode and Android Studio that you can build, test and deploy to the App Store and Play Store.

There is plenty more to learn, such as how to run your project, and your best place to start is at the Capacitor Getting Started Guide.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment