error in hosting the web app.

mbret2 years 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 Tananaev2 years 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.

mbret2 years ago

how do I deploy the app directly in Traccar?

Anton Tananaev2 years ago

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

mbret2 years 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 Tananaev2 years ago

Have you read my earlier comment?

Proxy configuration is for debug only.

mbret2 years ago

i did as you mentioned still getting same error

Anton Tananaev2 years ago

What did you do exactly? What's URL?

mbret2 years 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 Tananaev2 years ago

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

mbret2 years 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 Tananaev2 years ago

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

mbret2 years ago

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

Ashok Chandra2 years 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.

mbret2 years ago

no, it's on shared hosting