Search
  • Clearly Innovative

Using Ionic Framework VS Code Extension To Add Capacitor To Vite ReactJS Project

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


Video



30 views0 comments