node.js - reactjs frontend showing blank page with embedded backend on render hosting - Stack Overflow

admin管理员组

文章数量:1403500

Good day all, 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 and I am 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

and repo link :

package.json in the root folder:

  "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"
  },

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// /config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
  base: '/',
  build: {
      outDir: './dist',
      manifest: true,
      rollupOptions: {
           input: './src/main.jsx'    
      },      
  },
  publicDir: 'assets',
  server: {
    cors: { origin: ";},
    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);
          })
        },
      },
    },
  },
})

本文标签： nodejsreactjs frontend showing blank page with embedded backend on render hostingStack Overflow