Since Ionic has announced the beta for v6, I wanted to see if I can start using Ionic Framework and Capacitor with ViteJS.

Even if you don't use the Ionic ReactJS Components, this video shows you how you can deploy you ViteJS application to mobile devices using Ionic Capacitor

If you are looking for VueJS integration, I got you covered here. ViteJS Ionic Framework and VueJS

In this video, the approach I took is to follow the instructions for creating a ReactJS project in ViteJS and then add in the Ionic packages with npm and then pasted in the required styles and it worked!!

Start Here

We are using the command npm init vite@latest to get things rolling, see output below

Aarons-iMac:vite aaronksaunders$ npm init vite@latest
npx: installed 6 in 2.281s
✔ Project name: … vite-ionic-react
✔ Select a framework: › react
✔ Select a variant: › react-ts

Scaffolding project in /Users/aaronksaunders/dev/projects/vite/vite-ionic-react...

Done. Now run:

  cd vite-ionic-react
  npm install
  npm run dev

Aarons-iMac:vite aaronksaunders$ cd vite-ionic-react/
Aarons-iMac:vite-ionic-react aaronksaunders$ npm install
Aarons-iMac:vite-ionic-react aaronksaunders$ npm i @ionic/react@next  @ionic/react-router@next react-router react-router-dom

Now that the project is set up and running, we need to make it an Ionic React Project. Add some ionic specific code by replacing the existing code in App.jsx with the code below

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import {
  IonContent,
  IonPage,
  IonRouterOutlet,
  IonApp,
  IonToolbar,
  IonHeader,
  IonButtons,
  IonBackButton,
  IonButton,
  IonTitle,
  IonItem,
  IonLabel,
} from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { Redirect, Route, useHistory } from "react-router-dom";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

function App() {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/home" component={HomePage} exact={true} />
          <Route path="/detail" component={DetailPage} exact={true} />
          <Route path="/" exact={true}>
            <Redirect to="/home" />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
}

function HomePage() {
  const history = useHistory();
  const nextPage = () => {
    history.push("/detail");
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <h1>HOME PAGE</h1>
        <IonButton onClick={nextPage}>NEXT PAGE</IonButton>
      </IonContent>
    </IonPage>
  );
}

function DetailPage() {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton></IonBackButton>
          </IonButtons>
          <IonTitle>Detail Page</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <h1>DETAIL</h1>
        <IonItem details>
          <IonLabel>More Information</IonLabel>
        </IonItem>
      </IonContent>
    </IonPage>
  );
}

export default App;

Update the index.html, replace the viewport tag to make sure the page renders properly

<meta
   name="viewport"
   content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

You can run the app now to see that it is working before we install on device, type the following command in project directory

vite

you should see your inoic project running with a Home Page and a Detail Page.

Running The Application On Device

Add Capacitor to the project so we can deploy on device, I am just doing IOS here but a similar approach will work with Android

npm install @capacitor/core
npm install @capacitor/cli --save-dev
npx cap init --web-dir dist

then build app

vite build

now lets run on ios, first add the platform

npm install @capacitor/ios
npx cap add ios

then run the app

npx cap run ios

Running Capacitor Live Reload

make sure you select custom

ionic init

Then modify the script section of the package.json file. We need to do this so Ionic knows how to build the web application... there might be another way to accomplish this but I am not sure at this point. New code below is "ionic:serve": "vite"

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "ionic:serve": "vite"
},

Now you can run the command below to run then application on device and have live reload working when you make changes in the website.


ionic cap run ios --livereload --external

ViteJS, Ionic Framework Beta v6, ReactJS And Capacitor Mobile Device Deployment

Start Here

Running The Application On Device

Running Capacitor Live Reload