error in hosting the web app.

mbret10 months ago

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.

Anton Tananaev10 months ago

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.

mbret10 months ago

how do I deploy the app directly in Traccar?

Anton Tananaev10 months ago

Well, you compile the app and replace the modern folder with your compiled code.

mbret10 months ago

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?

Anton Tananaev10 months ago

Have you read my earlier comment?

Proxy configuration is for debug only.

mbret10 months ago

i did as you mentioned still getting same error

Anton Tananaev10 months ago

What did you do exactly? What's URL?

mbret10 months ago

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.

Anton Tananaev10 months ago

It doesn't sound like you've done what I said you should do.

mbret10 months ago

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.

Anton Tananaev10 months ago

Correct. So if you know that, why are you trying to install them separately? Makes no sense to me.

mbret10 months ago

Thanks, Anton. To clarify ..I am still learning... will back to for help

Ashok Chandra10 months ago

@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.

mbret10 months ago

no, it's on shared hosting