This is now the 3rd or 4th blog/video I have done on this and i think it gets easier each time!!

All Videos Related to This Series

Capacitor is an open-source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

In 8 minutes I explain how to create a vue js project with vite and convert it to a mobile application and deploy it to a simulator with live-reload for an efficient development process.

You can create your mobile application without using Ionic Framework Components so that is not included in this process, but leave a comment below if it is something you would like to see.

Also, this same process should work with ReactJS and ViteJS

Note

99.99% of this was done using the Ionic VS Code Plugin but there was an edit to the package.json file that was needed to get live-reload working.

Live Reload is useful for debugging both the web portion of an app as well as native functionality on device hardware or simulators. Rather than deploy a new native binary every time you make a code change, it reloads the browser (or Web View) when changes in the app are detected. - from capacitor website

line 11 previously said npm run dev

Links

• Ionic Capacitor - https://capacitorjs.com/
• Vite - https://vitejs.dev/
• Ionic VS Code Plugin - https://marketplace.visualstudio.com/items?itemName=ionic.ionic