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);
})
},
},
},
},
})