This is now the 3rd or 4th blog/video I have done on this and i think it gets easier each time!!
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
Top comments (0)