Question 117122 in Mongodb Question posted in
The official documentation can be found here.

Mongodb – Heroku Create React app deploy no such directory

I am trying to deploy my React app to heroku 22 stack, I have completed the code part of it and local machine it works fine. I have a Reactjs FrontEnd and Nodejs Backend. First After completing the project I moved my Reactjs frontend into the Nodejs Backend and run the npm run build command on the front end My folder structure looks like this:

enter image description here

but When I push my code to heroku using CLI

git push heroku master:main

I keep getting cannot get / or no such file or directory /app/vrestaurant/build/index.html

here is my package.json in backend

{
  "name": "nodejs-mongodb-mongoose",
  "version": "1.0.0",
  "engines": {
    "node": "17.x",
    "npm": "8.x"
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "node app.js"
  },
  "author": "Vishal",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.1",
    "connect-mongo": "^4.6.0",
    "connect-mongodb-session": "^3.1.1",
    "cors": "^2.8.5",
    "crypto": "^1.0.1",
    "debug": "^4.3.4",
    "dotenv": "^16.0.1",
    "express": "^4.17.2",
    "express-session": "^1.17.2",
    "mini-css-extract-plugin": "^2.4.6",
    "mongoose": "^6.1.7",
    "nodemon": "^2.0.19",
    "passport": "^0.5.2",
    "passport-local": "^1.0.0",
    "passport-local-mongoose": "^7.0.0",
    "razorpay": "^2.8.1",
    "shortid": "^2.2.16"
  }
}

my app.js file on backend

// imports
require('dotenv').config();
const express = require('express')
const session = require("express-session")
const bodyParser = require('body-parser')
const cors = require('cors')
const zomatoRoutes = require('./Routes/zomato')
const paymentRoutes = require('./Routes/payments')
const mongoose = require('mongoose')
const passport = require("passport")
const LocalStrategy = require("passport-local")
const passportLocalMongoose = require("passport-local-mongoose")
const MongoStore = require('connect-mongo');
const MongoClient = require("mongodb").MongoClient;


const User = require('./Models/user') 

// create express server
var app = express()

// add middleware before routes
app.use(bodyParser.json())
app.use(cors())

//connect to mongoDB

const uri = 'mongodb+srv://vishal_torne_22:*****@db-hernode.zu6btrs.mongodb.net/<mydbname>?retryWrites=true&w=majority';

console.log(uri, "this is the uri")

const options = {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    dbName:'zomato1'
}

mongoose.connect(uri, options).then(() => {
    console.log('mongoose connected')
}).catch(e => console.log(e))



mongoose.connection.on('connected', () => {
    console.log('mongoose is connected')
})


app.use(session({
    secret: "this is unambigous secret",
    resave: false,
    saveUninitialized: false,
    cookie: { maxAge: 24*60*60*1000 },
    store   : MongoStore.create({ 
        mongoUrl: uri,
        ttl: 14 * 24 * 60 * 60
     })
    
}));

app.use(passport.initialize());
app.use(passport.session());
 


// middleware routes
app.use('/zomato', zomatoRoutes)
app.use('/payment', paymentRoutes)


// heroku configuration
if(process.env.NODE_ENV=="production"){
    app.use(express.static('vrestaurant/build'))
    const path = require('path')
    app.get("*", (req, res) => {
        res.sendFile(path.resolve(__dirname, "vrestaurant/build/index.html"))
    })
}

//listen to a port
app.listen( process.env.PORT ||5252 , () => {
    console.log("express app is up and running on port 5252");
    console.log(process.env.PORT,'this is the env port')
})

things I have tried :

  1. I have added heroku post build but gives error ‘ Missing Build script‘
  2. I added build webpack in package.json but it gives me error
  3. also added the https://github.com/mars/create-react-app-buildpack.git build pack using heroku website settings, It gives me error :

Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0
remote: =====> Detected Framework: React.js (create-react-app)
remote:        Writing `static.json` to support create-react-app
remote:        Enabling runtime environment variables
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git#21c1f5175186b70cf247384fd0bf922504b419be
remote: =====> Detected Framework: Static HTML
remote: Stack heroku-22 is not supported!
remote:  !     Push rejected, failed to compile React.js (create-react-app) multi app.

can anybody help me out with this please? Thank you.

Tags:

2

Answers


  1. 0

    Your buildpack should be Node.Js and not react.

    Also try to print the output of
    path.resolve(__dirname, "vrestaurant/build/index.html") to verify if it is resolving to correct path for index.html file in build folder.

    Provide full path in setting the static folder

    app.use(express.static(path.resolve(__dirname, "vrestaurant/build/index.html")))

    Login or Signup to reply.
  2. 0

    Actually it might be better for you to use os.path.join() because it can cause on error on different systems:
    you can use:

    const path = require('path');
    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'vrestaurant', 'build', 'index.html'));
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search