Vite app shows blank page with embeded backend mern

Hello render community, I have created a reactjs app with nodejs backend and mongodb. I was able to deploy the backend which embedded in my root folder and it does not have a separate frontend folder. Backend successfully provides the data from db. I have checked the routes except “/” which gives cannot get / error.

So I am using a static site using render titled shoppe-globe and other one for backend using webservices titled shoppe-globe-app for backend from the same repo to connect my backend and display react pages. When i deploy static website it shows blank page and not errors. Any suggestion about this.
I am pasting my folder structure and package.json file in the root
folder structure is like this

Shoppe_Globe_App

  • backend
  • node_modules
  • public
  • src
  • git_ignore
  • eslint.config.js
  • index.html
  • package-lock.json
  • package.json
  • vite.config.json
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "server" : "npm install && npm run start --prefix Backend",
    "preview": "vite preview --port 4000",
    "start": "npm run server",
    "render-postbuild": "NPM_CONFIG_PRODUCTION=false npm install && npm run build"
  },
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
  base: '/',
  build: {
      outDir: './dist',
      manifest: true,
      rollupOptions: {
           input: './src/main.jsx'    
      },      
  },
  publicDir: 'assets',
  server: {
    cors: { origin: "https://shoppe-globe-app.onrender.com"},
    host: true,
    port: 8000,
    allowedHosts: true,
    proxy: {
      '/api': {
        target: 'http://localhost:4002',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ''),
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err);
          });;
          proxy.on('proxyReq', (proxyReq, req, _res) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          })
        },
      },
    },
  },
})

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.