I guarantee they are on the same WIFI. What should I do? What are the specific steps?
http://192.168.2.174:8100 runs normally in Chrome.
capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'myApp',
webDir: 'dist',
server: {
androidScheme: "http",
cleartext: true,
},
};
export default config;
You probably need to open up port 8100 in the firewall on your computer so the device can access it.
I don’t think it’s a problem with the firewall, because it can be accessed through the Edge browser on the phone http://192.168.2.174:8100 Normal access. Only displaying timeout issues within the app. What should I do?
When you run with the live reload option -l, Capacitor temporarily modifies android/app/src/main/assets/capacitor.config.json adding in the server.url to the dev server which in your case would be http://192.168.2.174:8100. That seems to be set from your image in your OP.
It also modifies android/app/src/main/AndroidManifest.xml allowing clear text (non-HTTPS).
I know you said it works in the browser on the device. But, for my app using Vite, I had to also open up port 6001 for the live reload to work.
Maybe try disabling the firewall on your computer if it isn’t already just to see if it works?
Have you looked in LogCat in Android Studio to see if there are any other errors?
Turning off the firewall doesn’t work either. I don’t quite understand why I still need to open port 6001, it’s not mentioned in the documentation. Can you tell me specifically how to do it? The command is executed in VsCode, and there are no logs in AS.
ionic.config.json
{
"name": "myApp",
"integrations": {
"capacitor": {}
},
"type": "react-vite"
}
package.json
{
"name": "myApp",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test.e2e": "cypress run",
"test.unit": "vitest",
"lint": "eslint"
},
"dependencies": {
"@capacitor/android": "7.2.0",
"@capacitor/app": "7.0.1",
"@capacitor/browser": "^7.0.1",
"@capacitor/core": "7.2.0",
"@capacitor/haptics": "7.0.1",
"@capacitor/keyboard": "7.0.1",
"@capacitor/status-bar": "7.0.1",
"@ionic/react": "^8.5.0",
"@ionic/react-router": "^8.5.0",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"ionicons": "^7.4.0",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4",
"ros2d": "github:Neoplanetz/ros2djs-ros2",
"ros3d": "^1.1.0",
"roslib": "^1.4.1",
"vconsole": "^3.15.1",
"zustand": "^5.0.5"
},
"devDependencies": {
"@capacitor/cli": "7.2.0",
"@testing-library/dom": ">=7.21.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^14.4.3",
"@types/react": "19.0.10",
"@types/react-dom": "19.0.4",
"@types/roslib": "^1.3.5",
"@vitejs/plugin-legacy": "^5.0.0",
"@vitejs/plugin-react": "^4.0.1",
"cypress": "^13.5.0",
"eslint": "^9.20.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"jsdom": "^22.1.0",
"terser": "^5.4.0",
"typescript": "^5.1.6",
"typescript-eslint": "^8.24.0",
"vite": "~5.2.0",
"vitest": "^0.34.6"
},
"description": "An Ionic project"
}
To correct it, the problem I encountered using command ionic cap run android --external --livereload now is as follows:, I know this, is there any way to solve it? And I also have a question, The offline installation package built using command ionic cap run android can run, aren’t they the same webview?
If I remember correctly, that is used by Vite for the livereload. It’s the WebSocket port. But, if you’re firewall is off and it still doesn’t work, then it’s something else.
Yes, the same WebView but building for production is different than live reload. A production build is gonna make sure things are compatible based on your config, usually your .browserslistrc file. In livereload or HMR, Vite uses native ES modules which might not be supported in the Android WebView version you are using. See Getting Started | Vite.
The Android WebView is updated independently of the OS version so you should be able to update it via the Play Store.
got it. So what should be done specifically in Vite? I have tried some online solutions from @rollup/plugin-babel and rollup-plugin-esbuild, but they have not been successful in running on Chrome 78 in the development environment.
vite.config.ts
/// <reference types="vitest" />
import legacy from "@vitejs/plugin-legacy";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import babel from "@rollup/plugin-babel";
import esbuild from 'rollup-plugin-esbuild'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
legacy(),
esbuild({
target: 'chrome78',
loaders: {
'.jsx': 'js',
'.tsx': 'js'
}
}),
{
...babel({
include: [/\.vue$/, /\.ts$/, /\.tsx$/, /\.jsx$/, /\.js$/],
extensions: ['.vue', '.ts', '.js', '.tsx', '.jsx'],
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3,
targets: {
chrome: '78',
},
modules: false,
},
],
],
}),
apply: 'serve',
},
],
test: {
globals: true,
environment: "jsdom",
setupFiles: "./src/setupTests.ts",
},
});“The Android WebView is updated independently of the OS version so you should be able to update it via the Play Store.”
I don’t understand what this means What should I do specifically? I am a web developer and do not understand Android technology. Thank you very much.
Since one of the screenshots shows Chinese characters I’m going to assume you are in China.
For updating the WebView you need Google Services and Google Play, and as far as I know, those don’t work on China, so that’s probably why the WebView is outdated.
Sadly I don’t know how you can updated without those.
thank. So my energy was not focused on how to update the webview. Do you know how to run Chrome 78 in compatibility with Vite’s development mode?
Yikes, Chrome 78 is 6 years old…lol.
Vite dev mode assumes a modern browser by default:
During development, Vite sets
esnextas the transform target, because we assume a modern browser is used and it supports all of the latest JavaScript and CSS features. This prevents syntax lowering, letting Vite serve modules as close as possible to the original source code. (source).
It looks like you can override this by setting the following in your Vite config to change how dev works:
optimizeDeps: {
esbuildOptions: {
target: 'chrome78'
}
}
There is some discussion about this here - Wrong esbuild target when using `vite dev` · Issue #13756 · vitejs/vite · GitHub