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.
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
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
Comments