How to Deploy a Full-Stack App to Render from WSL2 (Windows)

If you're building a web application using React (frontend) and Node.js/Express (backend) and you're working inside WSL2 on Windows, this guide is for you!

By the end of this blog, you’ll have your full-stack app live on the internet using Render — a free hosting service that supports Node.js and static websites.

📁 Example Project Structure

Let’s say your project folder looks like this:

my-app/
├── client/         # React frontend
├── server/         # Express backend
├── shared/         # Shared code used by both client and server
├── .git/           # Git initialized
└── README.md

⚙️ Prerequisites

• Your app works locally inside WSL2

• You pushed your code to a GitHub repository

• You have:

  • ✅ GitHub account

  • ✅ Render account

✅ Step 1: Set Up Your Backend (Node.js + Express)

1.1. Go to server/ folder and make sure:

Your package.json has a start script:

"scripts": {
  "start": "node index.js" 
}

Replace index.js with your actual file name (like app.js or server.js).

1.2. Use environment variable for the port:

In your Express app:

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

This helps Render assign a dynamic port when deployed.

1.3. Add a .env.example file

Create a file like this (just for documentation):

DATABASE_URL=your_database_url_here
JWT_SECRET=your_jwt_secret_here

Never upload your real .env — only .env.example.

1.4. Handling the shared/ folder (important!)

If your server imports from shared/ like this:

const someUtil = require('../shared/someUtil');

Make sure when you deploy on Render:

• You tell Render the root folder is server

• You include the shared/ folder in your Git repo (same parent as server/)

• In your backend code, use relative paths like ../shared/...

✅ This works perfectly as long as your file paths are correct and your repo has all folders.

🚀 Step 2: Deploy Backend to Render

1. Go to Render Dashboard

2. Click "New +" → Web Service

3. Connect your GitHub account and select your repo

Now fill the form:

4. Click "Advanced" → Add Environment Variables manually (from your .env.example)

5. Hit "Create Web Service"

🚀 It will deploy your backend and give you a public URL like:

https://my-backend.onrender.com

Keep this URL — your frontend will use it!

🎨 Step 3: Prepare Your React Frontend

Go to your client/ folder.

3.1. Add a .env.production file

VITE_API_URL=https://my-backend.onrender.com

You can now access this in React like:

const api = import.meta.env.VITE_API_URL;

✅ Works for Vite-based apps. For CRA (Create React App), use REACT_APP_API_URL instead.

3.2. Add a build script in client/package.json (if not present)

"scripts": {
  "build": "vite build"
}

Or if you're using CRA:

"scripts": {
  "build": "react-scripts build"
}

3.3. Test your build locally (optional)

cd client
npm run build

Make sure the dist/ or build/ folder is created successfully.

🌍 Step 4: Deploy Frontend to Render (as Static Site)

1. Go back to Render

2. Click "New +" → Static Site

3. Choose your repo again

Fill the form:

4. Add VITE_API_URL or REACT_APP_API_URL in the environment variables section.

5. Click "Create Static Site"

Render will build and host your frontend at a URL like:

https://my-frontend.onrender.com

🔁 Step 5: Enable CORS on Backend

To let your frontend access the backend:

npm install cors

Then in server/index.js:

const cors = require("cors");

app.use(cors({
  origin: "https://my-frontend.onrender.com",
  credentials: true,
}));

🔍 Step 6: Test Everything

• Open your frontend URL

• Try submitting a form or logging in

• Check the browser console (Dev Tools → Network tab) to make sure API requests are working

---

Recap: What We Did

✅ Deployed a full-stack app (React + Node.js) using Render
✅ Used .env.production to connect frontend with backend
✅ Configured CORS for safe communication
✅ Handled shared code between client and server
✅ Did all this from WSL2 on Windows

💡 Bonus Tips

• Add a custom domain to your frontend (Render allows free domains!)

• Monitor logs in Render → Go to your service → Logs

• Keep your .env secrets safe (never upload them to GitHub)

🙋 Need Help?

If you're stuck or confused, just comment below or reach out. I’ll help you debug it!