Ionic with Vite?

Vite, Rollup, and ESBuild — oh my!

As an added bonus, Framework v6 will be usable with tooling such as Vite, Rollup, and ESBuild, giving you even more options for building apps. This is something that developers have been asking us about for a while, so we are excited to roll this support out.

The blog post announcing Ionic V6 (see above) talked about the inclusion of support for Vite with Ionic. I cannot find any mention of Vite in the Ionic documentation. Is this capability actually available? Are there any instructions available for how to us Vite with Ionic?

Isn’t this also connected to the underlying framework?

Vue and vite might work, but haven’t seen angular moving to vite?

@aaronksaunders has this blog post - Getting Started with ViteJS, Ionic Framework Beta v6 And VueJS - DEV Community

1 Like

@aaronksaunders has this blog post - Getting Started with ViteJS, Ionic Framework Beta v6 And VueJS - DEV Community
Thanks for the link. While that approach works it requires a fair amount of manual steps. Since Ionic said they were enabling Vite support I was hoping for some new commands in the Ionic cli to support Vite.

1 Like

@mmoore99 Hi, can you point me to where Ionic said they plan to support Vite?

I’ve tried to get it running and can only get the web dev going. Running with capacitor ios requires react scripts (i.e. create react app/webpack)

@twestrick just an FYI, the post you mentioned that @aaronksaunders put together no longer works. Not sure it ever worked for mobile.

hey, @nathan feel free to reach out to me directly, I have no problem addressing issues with content that I have put out in the community.

I am not sure what problem you are trying to solve, running vite with vue or running it with react?

@aaronksaunders my comment wasn’t a dig at you. I mentioned you so you’d be in the loop of the discussion – perhaps you’ve stumbled on new info in this regard.

I think the main question that everyone has been driving at is if/when Ionic plans to either replace CRA with Vite or offer an opt-in config.

As for frameworks, I’m more of a React guy, but I think the issue of failing to running capacitor mobile will exist in your solution. Correct me if I’m wrong.

I have resolved the issue in vue, and I am testing in react as we speak… so in next five minutes I will have a project posted on github

@nathan here is the react solution - aaronksaunders/ionic-capacitor-react-vite-app (github.com)

@aaronksaunders that’s great. I couldn’t get it the ios simulator to work.

I’m getting the following:

Any ideas?

This is a completely different issue, your issue here is trying to get live reload working on iOS. I did not test live reload since I don’t really use it that much in my day to day work, the builds are fast enough for me.

I will take a look at live reload using vite

I see. What command are you running to build? Sadly that approach is pretty slow for me.

Would be great if live reload can work! Good luck.

@nathan you can manually get it there

First Start Your Server

aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % npm run dev

> my-react-app@0.0.0 dev
> vite


  VITE v3.0.6  ready in 359 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
12:57:47 AM [vite] hmr update /src/App.tsx

Then modify capacitor.config.ts

const config: CapacitorConfig = {
  appId: 'my.react.app',
  appName: 'my-react-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server : {
    "url" : "http://127.0.0.1:5173/"  //<= use address the server is running on locally
  }
};

And finally deploy your app to the device

aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % npx cap run ios --external  --target=73CE91C9-4855-496B-9481-CA486652E9D7
✔ Copying web assets from dist to ios/App/App/public in 12.83ms
✔ Creating capacitor.config.json in ios/App/App in 1.35ms
✔ copy ios in 25.05ms
✔ Updating iOS plugins in 1.96ms
[info] Found 4 Capacitor plugins for ios:
       @capacitor/app@4.0.1
       @capacitor/haptics@4.0.1
       @capacitor/keyboard@4.0.1
       @capacitor/status-bar@4.0.1
✔ Updating iOS native dependencies with pod install in 2.53s
✔ update ios in 2.56s
✔ Running xcodebuild in 3.20s
✔ Deploying App.app to 73CE91C9-4855-496B-9481-CA486652E9D7 in 1.51s
aaronksaunders@Aarons-14MacBookProM1Pro my-react-app % 

Now your mobile app is pointing to the local server running and you basically have live-reload working. I am certain there is another approach, but like I said I don’t use it often enough. Hopefully, this gets you moving

REMEMBER
remove the edit to the capacitor.config.ts before deploying to production otherwise the app will be looking for the local server to run the app !!

@aaronksaunders Hey, that worked! Wow, I’ve been pulling my hair out for the last few hours. Thank you!

1 Like
ionic cap run ios --open --livereload --external

Same for android, replace ios with android.

If you have multiple IP addresses and you’re on macOS:

# Set this in your shell alias file
alias ip='ifconfig en0 inet | grep inet | awk -F " " ''{ print $2 }'''

# Run this
ionic cap run ios --open --livereload --external --host $(ip)

That will auto select the first IP address.

@aparajita - you must have a different config because this approach doesn’t work for me either

@aaronksaunders Ha! You were the one who showed me how to get it working in the first place!

This is something that really has to get solved. Ionic needs to support Vite.

i had never really used live reload, when someone asked about it last week was when I realized it didn’t work