Simple video walkthrough as I try to utilize the Ionic VS Code Extension to add native functionality to a Vite ReactJS Application. I wanted to show how you can create native applications from web applications using Ionic Framework Capacitor.

A Visual Studio Code Extension for Ionic - Ionic Blog -
https://ionicframework.com/blog/a-visual-studio-code-extension-for-ionic/

I think this is important to show that Ionic has a ReactJS Component Library that I am using in the React Application and a tool Capacitor, that I am using to create the native application. This video shows that the two are separate and that you don't have to start with an Ionic Project to get to a native application. In fact you don't need to use any of the Ionic Framework UI Components to deploy a web application to a native device, you only need Capacitor

Some Observations

I did find some interesting challenges and observations which I have listed below and will add to the project's github issues.

• How to debug on a native device? You can debug on the web, but connecting to a native device through the extension would be a game changer IMHO
• Could not configure the build directory through the UI. There are some options to configure, but not the build directory. Adding this would make it easier to onboard non-ionic projects
• Why do I always have to specify the device when running the app? This is just another point to make the process seamless. I should be able to set a default device to use based on the platform instead of being forced to select it every time
• Why does sync fail, it is missing some property? This is an issue, was displaying an error message and breaking the development flow
• Can we integrate build and run on device into one command? I think I am looking for this because live-reload was not integrated into the tool

Looking for support with your cross-platform mobile solution using Ionic Framework? Contact Me at my company Clearly Innovative Inc for a free 30-minute Consultation
www.clearlyinnovative.com