This content originally appeared on DEV Community and was authored by Aaron K Saunders
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
This content originally appeared on DEV Community and was authored by Aaron K Saunders
Aaron K Saunders | Sciencx (2021-09-17T00:53:03+00:00) ViteJS, Ionic Framework Beta v6, ReactJS And Capacitor Mobile Device Deployment. Retrieved from https://www.scien.cx/2021/09/17/vitejs-ionic-framework-beta-v6-reactjs-and-capacitor-mobile-device-deployment/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.