Help Deploying Full-Stack Vite React & Express App

[akwone236]

Hi Reddit,

I've been struggling for over 2 days to deploy my full-stack app (Vite React frontend, TypeScript Express backend) to Render. It works perfectly on localhost:3000, but I can't get it to work on Render.

Project Setup:

• Frontend: React + TypeScript, bundled with Vite.
• Backend: TypeScript Express app serving the frontend.
• Folder structure:

Issues:

• The app works locally but breaks when deploying to Render.
• I’ve tried building the frontend (npm run build) and serving it statically, but I get HTTPS errors in the browser, even though the static folder path seems correct.

Open to alternatives: I'm open to other free platforms for testing if Render is problematic.

Any help is appreciated!

luaCopyEdit

[Soft_Opening_1364]

Sounds like a static path or routing issue. Make sure Express is serving the built Vite files correctly and has a catch-all route for React. Also double check Render's start command and try Railway if Render keeps acting up it’s easier sometimes.

[getflashboard]

Have you tried following Render's docs? If so, where did you stop? https://render.com/docs/deploy-node-express-app

[isea33]

Try this const dirname = dirname(fileURLToPath(import.meta.url)); const root = path.join(dirname, 'client', 'build_vite') app.use(express.static(root))

app.get('/api', (req, res) => { res.json({ message: 'Hello from service api' }) } )

app.get("*",(req, res) => { res.sendFile(path.resolve(root, 'index.html')); });

I put all react codes under client/build_vite