I keep seeing this over and over. Proxy configuration is for debug only. For production you have to set up your own proxy or deploy the app directly in Traccar.
how do I deploy the app directly in Traccar?
Well, you compile the app and replace the modern folder with your compiled code.
In your Vite config file (vite.config.js), you have set up a proxy for the /api and /api/socket routes. Are these proxy configurations still valid for your live hosting environment?
Have you read my earlier comment?
Proxy configuration is for debug only.
i did as you mentioned still getting same error
What did you do exactly? What's URL?
This is the URL http://193.203.161.39:8082
where I have installed the Traccar server software on VPS. this is https://geonavig.com
where the web app is deployed after the npm run build
.
It doesn't sound like you've done what I said you should do.
sorry my bad I am a New Developer still Learning ....
understood that Traccar is a combination of server+web apps they will be installed together not separately. correct me if I am wrong.
Correct. So if you know that, why are you trying to install them separately? Makes no sense to me.
Thanks, Anton. To clarify ..I am still learning... will back to for help
@mbret https://geonavig.com/
this website is on cloud hosting or its on shared hosting.
If its on cloud hosting so have you start the server using npm install then npm start.
no, it's on shared hosting
Hi this is vite.config.js file. when the web is run on localhost:3000 it works but when it is deployed on hosting after following the steps.
To run the project in development mode:
Make sure you have Traccar backend running locally
Install dependencies using the npm install command
Run the development server using the npm start command
We recommend using Visual Studio Code as the IDE
To compile a release build, run npm run build.
import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import svgr from 'vite-plugin-svgr'; import { VitePWA } from 'vite-plugin-pwa'; /* eslint-disable no-template-curly-in-string */ export default defineConfig(() => ({ server: { port: 3000, proxy: { `'/api/socket': 'ws://104.237.9.196:8082',` `'/api': 'http://104.237.9.196:8082',` }, }, build: { outDir: 'build', }, plugins: [ svgr(), react(), VitePWA({ workbox: { navigateFallbackDenylist: [/^\/api/], }, manifest: { short_name: '${title}', name: '${description}', theme_color: '${colorPrimary}', icons: [ { src: 'pwa-64x64.png', sizes: '64x64', type: 'image/png', }, { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png', }, { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable', }, ], }, }), ], }));
once the build folder is hosted live on Godaddy it's not working but on the localhost:3000 it's working but with live hosting it's not working.
Error on live Hosting
Consol error
localhost:3000
Please anyone help me to fix this.