Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

September 17, 2021 12:53 am GMT

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@latestnpx: installed 6 in 2.281s Project name:  vite-ionic-react Select a framework:  react Select a variant:  react-tsScaffolding project in /Users/aaronksaunders/dev/projects/vite/vite-ionic-react...Done. Now run:  cd vite-ionic-react  npm install  npm run devAarons-iMac:vite aaronksaunders$ cd vite-ionic-react/Aarons-iMac:vite-ionic-react aaronksaunders$ npm installAarons-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/corenpm install @capacitor/cli --save-devnpx cap init --web-dir dist

then build app

vite build

now lets run on ios, first add the platform

npm install @capacitor/iosnpx 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

Original Link: https://dev.to/aaronksaunders/vitejs-ionic-framework-beta-v6-reactjs-and-capacitor-mobile-device-deployment-53e3

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To