ViteJS, Ionic Framework Beta v6, ReactJS And Capacitor Mobile Device Deployment
Tags: vite, react, ionic, tutorial
Published: 2021-09-17 00:53:03

Since Ionic has announced the beta for v6, I wanted to see if I can start using Ionic Framework and Capacitor with [ViteJS](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).

Even if you don't use the [Ionic ReactJS Components](https://ionicframework.com/docs/react), this video shows you how you can deploy you ViteJS application to mobile devices using [Ionic Capacitor](https://capacitorjs.com/)

> If you are looking for VueJS integration, I got you covered here. [ViteJS Ionic Framework and VueJS](https://www.youtube.com/watch?v=JnfAH1gXVdU)

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!!

{% youtube uVjPBiNz5yk %}

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

```bash
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

```jsx
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

```bash
<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

```bash
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

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

then build app

```bash
vite build
```

now lets run on ios, first add the platform

```bash
npm install @capacitor/ios
npx cap add ios
```

then run the app

```bash
npx cap run ios
```

### Running Capacitor Live Reload

make sure you select `custom`

```shell
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"`

```json
"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.

```bash

ionic cap run ios --livereload --external 
```
[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)