I have been struggling with this for a few days and can't find the solution to deploy successfully the app on Heroku. Has anyone faced this issue before? The build is successful but i keep seeing a A "Not found" error is displayed on the website: https://simucho.herokuapp.com/ Here you can access the github: https://github.com/bentoutcour/simucho

Heroku logs :

2022-11-16T10:25:44.960646 00:00 heroku[web.1]: Idling
2022-11-16T10:25:44.962564 00:00 heroku[web.1]: State changed from up to down
2022-11-16T10:25:46.185457 00:00 heroku[web.1]: Stopping all processes with SIGTERM
2022-11-16T10:25:46.698134 00:00 heroku[web.1]: Process exited with status 143
2022-11-16T10:27:09.000000 00:00 app[api]: Build started by user [email protected]
2022-11-16T10:29:28.651974 00:00 app[api]: Deploy cf69a2b2 by user [email protected]
2022-11-16T10:29:28.651974 00:00 app[api]: Release v58 created by user [email protected]
2022-11-16T10:29:29.791785 00:00 heroku[web.1]: State changed from down to starting
2022-11-16T10:29:32.000000 00:00 app[api]: Build succeeded
2022-11-16T10:29:44.753949 00:00 heroku[web.1]: Starting process with command `node index.js`
2022-11-16T10:29:48.798264 00:00 heroku[web.1]: State changed from starting to up
2022-11-16T10:29:50.038918 00:00 heroku[router]: at=info method=GET path="/" host=simucho.herokuapp.com request_id=faaaacb5-3e26-4998-b14d-b74b96e54ecc fwd="84.173.202.148" dyno=web.1 connect=0ms service=24ms status=404 bytes=412 protocol=https
2022-11-16T10:29:50.040662 00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/src/App.js'

Procfile :

web: node index.js 

package.json (root directory) :

{
  
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js", 
  "scripts": {
    "server": "nodemon index.js",
    "client": "npm run start --prefix ../mon/app",
    "heroku-postbuild": "npm install --prefix app && npm run build --prefix app"
  },
  "proxy": "http://localhost:4000/",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.20"
  },
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "body-parser": "^1.20.0",
    "concurrently": "^7.4.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.1",
    "mongodb": "^4.10.0",
    "mongoose": "^6.6.1",
    "node-mailjet": "^5.1.1"
  }
}

index.js (root directory not the one in the frontend folder) :

const express = require('express');
const bodyParser = require('body-parser');
const routesHandler = require('./route/handler');
const mongoose = require("mongoose");
const dotenv = require('dotenv').config();
const uri = `mongodb srv://${process.env.MONGODB}/?retryWrites=true&w=majority`
const form = require('./route/add.js');


async function connect () {
    try {
        await mongoose.connect(uri)
        console.log("connected to mongo")
    } catch (error) {
        console.error(error);
    }
}

connect();



const app = express();

let cors = require('cors')
app.use(cors())
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use("/", routesHandler);
app.use("/", form);


const PORT = process.env.PORT || 4000;
app.listen(PORT, () => {
    console.log('Server running on ')
});
if (process.env.NODE_ENV === "production") {
    const path = require('path');
    console.log("Current directory:", __dirname);
    app.use(express.static(__dirname   "/src"));
    app.get("*", (req, res) => {
      res.sendFile(path.resolve(__dirname,"/src/App.js"));
      
    });
  }

App.js (frontend paths) :

import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from "react-router-dom";
import Formsa from './Formsa';
import Home from './Home';
import Contact from "./Contact";
import Apropos from "./Apropos";
import Charte from "./Charte";

export default class App extends Component {
  render() {
    return (
    
      <div className="App-intro">
          <Routes>
          <Route path="/" element={<Formsa />} />
            <Route path="/test" element={<Home />} />
            <Route exact path="/apropos" element={<Apropos />} />
            <Route exact path="/contact" element={<Contact />} />
            <Route exact path="/donnees" element={<Charte />} />
           
          </Routes>
        </div>
      
    );
  }
}

ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
  , document.getElementById('root')
);

Folder Structure :

mon

• app
• backend (empty)
• route
• .env
• .gitignore
• Procfile
• index.js
• package-lock.json
• package.json

CodePudding user response：

The error states that the path /src/App.js can't be found:

Error: ENOENT: no such file or directory, stat '/src/App.js'

And your code, in the express app index.js, has the following lines that look for that path:

app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname,"/src/App.js"));
});

Looking at your codebase, you could try /app/src/App.js, since the that would be the path relative from your index.js file.

I'd suggest first building and serving this locally after changing the path that you look for the App.js at, once you can build and serve it locally, you will waste a lot less time trying to deploy it online.