Error: ENOENT: no such file or directory, stat '/opt/render/project/src/frontend/build/index.html'

[ejazr]

I was able to deploy by backend and frontend of my repo with the following commands:

Backend:
root: backend/
build: npm install
start: node app.js

Deployment code in backend:
// ------DEPLOYMENT---------
const _dirname1 = path.resolve()
if(process.env.NODE_ENV === ‘production’) {
app.use(express.static(path.join(_dirname1, ‘…/frontend/build’)));
app.get(‘*’, (req, res) => {
res.sendFile(path.resolve(_dirname1, “…”, “frontend”, “build”, “index.html”))
})

} else {
app.get(“/”, (req, res) => {
res.send(“API is running successfully.”)
});
}
// ------DEPLOYMENT---------

Frontend:
root: frontend/
build: npm run build
publish directory: build
start: node app.js

It says my build was successful on my static site but my backend is not registering the index.html file?

Finance Portfolio

[Keith]

Hi there,

Your front and backends are separate services. Seeing you are running your frontend as a static site, you don’t need this code:

app.use(express.static(path.join(_dirname1, ‘…/frontend/build’)));app.get(‘*’, (req, res) => {res.sendFile(path.resolve(_dirname1, “…”, “frontend”, “build”, “index.html”))

You would only do this if you wanted to run a single service and have your backend serve your static frontend.

Regards,

Keith
Render Support, UTC+10

[ejazr]

So after taking out that code my site goes live but, my site is still having the issue where none of my data from mongodb is being displayed.

When I go to this URL: https://pennypal-backend-7c3h.onrender.com/
I get a CANNOT GET /

When I go to any other URL: https://pennypal-backend-7c3h.onrender.com/expenses
or /incomes

All of my data for income and expenses is there.

How do I communicate my backend sith my frontend to have that data display in my frontend?

Also, when I ran my site locally using the code I removed, my data was being displayed.

[Keith]

Hi there,

Depending on how you changed your code, you may not have a route handler for /. The message CANNOT GET / would be expected then. On your frontend, you would need to make sure you are calling your backend onrender.com domain.

Regards,

Keith
Render Support, UTC+10

[ejazr]

Thanks for the input!
For the frontend in the package.json I made the proxy refer to the backend render.com domain but no data is being loaded.

[ejazr]

In my fetch(‘/incomes’), should I put the full render URL /incomes?

// LOAD all the incomes
useEffect(() => {
// RETRIEVE all incomes
const loadIncomes = async () => {
const response = await fetch(‘/incomes’);
const incomes = await response.json();
// sort incomes by date
const sortedIncomes = incomes.sort((a, b) => new Date(b.date) - new Date(a.date))
setIncomes(sortedIncomes);
};

    loadIncomes();
}, []);