error in hosting the web app.

mbreta year 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 Tananaeva year 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.

mbreta year ago

how do I deploy the app directly in Traccar?

Anton Tananaeva year ago

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

mbreta year 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 Tananaeva year ago

Have you read my earlier comment?

Proxy configuration is for debug only.

mbreta year ago

i did as you mentioned still getting same error

Anton Tananaeva year ago

What did you do exactly? What's URL?

mbreta year 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 Tananaeva year ago

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

mbreta year 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 Tananaeva year ago

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

mbreta year ago

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

Ashok Chandraa year 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.

mbreta year ago

no, it's on shared hosting