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

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 

Comments

[David]

Hi, thanks for the tips with "ionic:serve" but the livereload didn't work anymore because the "server.url" in the capacitor.config.json is not updated when launching the "ionic capacitor run android --open --ssl --livereload --external"
Also, the --open didn't work too

[David]

answer to myself: solution is to use capacitor.config.js instead of capacitor.config.json who didn't work

[Aaron K Saunders]

I guess things have changed abit since I created this content, but glad it all worked out for you

[Luciano Lima]

Thanks for bringing the tutorial Aaron, I'm trying to make some prototypes with Ionic v6 also, and was following your tutorial and everything should be working normally, but when you try to run the vite command, esbuild fails to build it because is missing some "attachShadow" method from stencil:

import { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';

It is a known issue as can be found here: github.com/ionic-team/ionic-framew...

If someone is having the same issue, you just have to install the correct @stencil/core version:

npm install @stencil/core@2.9.0

Hope to help.

P.S.: It seems to not work when using yarn to install your packages, probably because of how yarn manages third party libraries dependencies. Using NPM works as expected.

[Aaron K Saunders]

looks like they already posted a work around - github.com/ionic-team/ionic-framew...