Ionic with Vite

Ionic Framework Ionic React
1

Hi guys,

I do have an Ionic project with Vite set up on it. Is it a regular way to work with Ionic + Vite ?

Because I have so interface issues and I don’t know if it can be related to Vite.

ionic-error.PNG
ionic-error.PNG1284×2778 188 KB

I don’t have an index.html inside /public but at the root of the project. And in the I have this :

<body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>

Normally on Ionic there is the index.html in the /public folder and no “module” import inside script tags.

The main.tsx is at the same level as App.tsx and looks like this :

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';


const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <React.StrictMode>
    <App />

  </React.StrictMode>
);

I believe that it’s the way Vite works. But I don’t know if this “Vite integration” can cause the issues I’m experimenting in the app. It looks like Ionic is unable to load properly as usual and detecting for example de Home Indicator on iPhone.

The code in App.tsx looks like this which is a very regular way to work with tabs :

import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  setupIonicReact
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Route, Redirect } from 'react-router-dom'; // Import Redirect pour react-router-dom v5

import { airplaneSharp, personSharp, locationSharp, homeSharp } from 'ionicons/icons'; // Import des icônes appropriées
import Tab1 from './pages/Tab1';
import MapDisplay from './pages/MapCityDisplay';
import CitiesDisplay from './pages/CitiesDisplay';

/* 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';
/* 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';
import 'swiper/swiper-bundle.css';

/**
 * Ionic Dark Mode
 * -----------------------------------------------------
 * For more info, please see:
 * https://ionicframework.com/docs/theming/dark-mode
 */

/* import '@ionic/react/css/palettes/dark.always.css'; */
/* import '@ionic/react/css/palettes/dark.class.css'; */
import '@ionic/react/css/palettes/dark.system.css';
/* Theme variables */
import Test from './pages/Test';
import City from './pages/City';

setupIonicReact();

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/feed">
            <Tab1 />
          </Route>
          <Route path="/destinations">
            <MapDisplay />
          </Route>
          <Route path="/trips">
            <CitiesDisplay />
          </Route>
          <Route path="/account">
            <Test />
          </Route>

          {/* Route pour les villes spécifiques */}
          <Route path="/city/:slug">
            <City />
          </Route>

          {/* Redirection par défaut */}
          <Route exact path="/">
            <Redirect to="/feed" />
          </Route>

        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="feed" href="/feed">
            <IonIcon aria-hidden="true" icon={homeSharp} />
            <IonLabel>Feed</IonLabel>
          </IonTabButton>
          <IonTabButton tab="destinations" href="/destinations">
            <IonIcon aria-hidden="true" icon={locationSharp} />
            <IonLabel>Destinations</IonLabel>
          </IonTabButton>
          <IonTabButton tab="trips" href="/trips">
            <IonIcon aria-hidden="true" icon={airplaneSharp} />
            <IonLabel>Trips</IonLabel>
          </IonTabButton>
          {/* <IonTabButton tab="account" href="/account">
            <IonIcon aria-hidden="true" icon={personSharp} />
            <IonLabel>Account</IonLabel>
          </IonTabButton> */}
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

Also, I’m not able to use -l --external due to Vite maybe ?

Thanks in advance for your help
Thomas

1 Like
2

If you are using Vite, the index.html goes in the root folder and not public. Are you converting your app over to using Vite? If so, maybe take a look at the React Vite starter project to make sure you didn’t miss anything - starters/react-vite at main · ionic-team/starters · GitHub.

I can confirm Vite with Vue and ionic cap run android -l --external works.

3

Thanks for your feedback, you say “I can confirm Vite with Vue” but I use React not Vue. Can you confirm it works too ?
Thanks a lot

4

Right, that is why I clarified that I am using Vue :grin: If it doesn’t work for you with a fresh Ionic React Vite app created from ionic start, then it is probably a bug with either the starter project (what ionic start uses as a base) or the Ionic CLI.

5

I don’t know if there is a “default” way of dealing with these safe-area issues other than using Ionic’s components, but I always use the env(safe-area-inset-top) and the env(safe-area-inset-bottom) for the padding top and bottom of the pages, that will align the content to the safe area for iOS, then you can add another value checking for the platform when dealing with Android

1 Like
6

Oh! Good point. I overlooked that the issue could just be due to safe area padding not taking affect.

Here is another post about having issues of it not applying - SOLVED -–ion-safe-area has no effect on iOS. Make sure your meta viewport is correct.

And Safe Area Values Always Zero on Android with Ionic Capacitor Version 6

2 Likes
7

Hi guys,
Thanks for your feedback. I just figured out that I was missing in the index.html meta viewport the descriptions as follow :
viewport-fit=cover, minimum-sale=1.0
Now it works good :slight_smile:
And for Vite the issue was that the project was set up on an other PC with CLI 7 and I was at CLI 6 so now that I moved to 7 it works very well :slight_smile:
And regarding the white screen on live reload, I figured out that for iOS it’s better to open Xcode, do a run from Xcode UI and then execute npx cap run ios -l --external and it works :slight_smile:
Thanks for your support

2 Likes