How to deploy MERN app to Heroku with frontend inside of backend folder

user_16939261 0
Viewed 1186

Deploying my MERN app to heroku says the build has succeeded, but upon opening the app all it says is NOT FOUND. I suspect there is a problem with routing and paths, particularly in index.js of the backend. As the title mentions, the frontend is inside of the backend folder so as to only use one website for both. I've followed all of the recommendations from this GitHub repo for doing such a process. I've gone overboard on including code as I don't know exactly where the problem lies, and as you know in production it's all connected. From what I understand, I don't need to run a build/production folder of React until heroku-postbuild, but heroku cannot find the build folder or its index.html.

Project Structure

api //frontend is inside backend for the benefit of only deploying to one site
-mappinapp //the react frontend
----node_modules
----public
------index.html
----src
------components
------App.js
------config.js
------index.js
----.env
----.gitignore
----package-lock.json
----package.json
-models
-node_modules
-routes
-.env
-.gitignore
-index.js
-package-lock.json
-package.json

Heroku logs --tail

heroku[router]: at=info method=GET path="/" host=mappinapp.herokuapp.com request_id=redacted fwd="redacted" dyno=web.1 connect=0ms service=9ms status=404 bytes=380 protocol=https
app[web.1]: Error: ENOENT: no such file or directory, stat '/app/mappinapp/build/index.html'

api(backend) package.json

{
  "name": "api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "heroku-postbuild":  "cd mappinapp && npm install && npm run build" //build succeeded on heroku
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.0.1",
    "dotenv": "^8.6.0",
    "express": "^4.17.1",
    "mongoose": "^5.13.9",
    "nodemon": "^2.0.7",
    "path": "^0.12.7"
  }
}

index.js of api(backend)

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const dotenv = require("dotenv");
const userRoute = require("./routes/users");
const pinRoute = require("./routes/pins");
const path = require("path");

dotenv.config();

app.use(express.json());

mongoose 
 .connect(process.env.MONGO_URL, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useCreateIndex: true,   })   
 .then(() => console.log("MongoDB connected!"))
 .catch(err => console.log(err));

app.use("/api/users", userRoute);
app.use("/api/pins", pinRoute);

// app.use(express.static(path.join(__dirname, "/api/mappinapp/build")));

app.get('*', function (req, res) {
  const index = path.join(__dirname, '/mappinapp/build', 'index.html');
  console.log(__dirname);
  res.sendFile(index);
});

app.listen(process.env.PORT || 5000, () => {
  console.log("Backend server is running!");
});

app.use line commented out and app.get function added after reading this post I do notice that hovering over "/api/mappinapp/build" or '/mappinapp/build' doesn't show the path like it does at say "./routes/users". I've attempted changing the paths and using the app.use(express... line in a number of ways. I suspect this is where the problem lies, but maybe not.

config.js

import axios from "axios";

export const axiosInstance = axios.create({
    baseURL: "https://mappinapp.herokuapp.com/api/"
})

api(backend) .gitignore

/node_modules
.env

frontend .gitignore

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production - removed /build in case having it in the .gitignore would cause issues.

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Opening the app on heroku says NOT FOUND and the console says

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). moz-extension:1592:49
Content Security Policy: The page’s settings blocked the loading of a resource at https://mappinapp.herokuapp.com/favicon.ico (“default-src”). resource:191:19
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). moz-extension:199:11

Not sure if it's relevant, but I included

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self';" />

in index.html of frontend react app. Still shows the same errors in browser console log.

And finally,

heroku build log

remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: heroku/nodejs
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 14.x...
remote:        Downloading and installing node 14.17.6...
remote:        Using default npm version: 6.14.15
remote:        
remote: -----> Restoring cache
remote:        - node_modules
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules
remote:        
remote:        > bcrypt@5.0.1 install /tmp/build_4d6aebd0/node_modules/bcrypt
remote:        > node-pre-gyp install --fallback-to-build
remote:        
remote:        [bcrypt] Success: "/tmp/build_4d6aebd0/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" is installed via remote
remote:        
remote:        > nodemon@2.0.12 postinstall /tmp/build_4d6aebd0/node_modules/nodemon
remote:        > node bin/postinstall || exit 0
remote:        
remote:        Love nodemon? You can now support the project via the open collective:
remote:         > https://opencollective.com/nodemon/donate
remote:        
remote:        added 248 packages in 5.263s
remote:        
remote: -----> Build
remote:        Running heroku-postbuild
remote:        
remote:        > api@1.0.0 heroku-postbuild /tmp/build_4d6aebd0
remote:        > cd mappinapp && npm install && npm run build
remote:        
remote:        audited 248 packages in 2.297s
remote:        
remote:        15 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        found 0 vulnerabilities
remote:        
remote:        
remote: -----> Caching build
remote:        - node_modules
remote:        
remote: -----> Pruning devDependencies
remote:        audited 248 packages in 2.168s
remote:        
remote:        15 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        found 0 vulnerabilities
remote:        
remote:        
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote: 
remote: -----> Compressing...
remote:        Done: 35.8M
remote: -----> Launching...
remote:        Released v16
remote:        https://mappinapp.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
mern reactjs node.js heroku javascript
1 Answers

Right above the app.listen() in server.js, I usually add the following when deploying the Heroku:

if (process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname, 'mappinapp', 'build')));

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

Create a Procfile in the root with:

web: npm install
web: npm start

and make sure this script is in the package.json:

"scripts": {
        "start": "node server",
        "server": "nodemon server",
        "client": "npm run start --prefix mappinapp",
        "heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
user_149244170
Related