I tried to deploy my Express.js app on Heroku so many times and I get "Application error"

Question

I wanna deploy my Expree.js "Blogging-website" project on Heroku, But after trying soo many times I'm getting "Application error" that your app has been crashed "H10". This is package.json file. I followed all the steps , please let me know if I've missed anything :

{
  "name": "ejs-challenge",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
 },
  "repository": {
    "type": "git",
    "url": "[email protected]:soniiya/Blogging-final.git"
  },
  "author": "",
  "license": "ISC",
  "engines": {
    "node": "14.17.6"
  },

And also added this in my app.js file:

app.listen(process.env.PORT || 3000, function () {
  console.log("Server started on port 3000");
});

I've created Procfile too "web: node app.js". Actually when I deployed the same app without User Authentication feature, it deployed successfully but when added authentication it's crashing now. I used MongoDB for database, If you have any suggestions then please let me know. What can cause "App crashed" on heroku?

This is the "heroku logs":

$ heroku logs --app agile-journey-27742
 »   Warning: heroku update available from 7.53.0 to
 »   7.59.2.
2021-12-25T15:01:48.138120+00:00 app[api]: Release v4 created by user [email protected]
2021-12-25T15:01:48.138120+00:00 app[api]: Set DB_PATH config vars by user [email protected]
2021-12-25T15:01:48.343377+00:00 heroku[web.1]: State changed from crashed to starting
2021-12-25T15:01:51.169675+00:00 heroku[web.1]: Starting process with command `node app.js`
2021-12-25T15:01:52.431858+00:00 app[web.1]: Sat, 25 Dec 2021 15:01:52 GMT express-session deprecated req.secret; provide secret option at app.js:50:9
2021-12-25T15:01:52.432471+00:00 app[web.1]: Warning: connect.session() MemoryStore is not
2021-12-25T15:01:52.432472+00:00 app[web.1]: designed for a production environment, as it will leak
2021-12-25T15:01:52.432472+00:00 app[web.1]: memory, and will not scale past a single process.
2021-12-25T15:01:52.442695+00:00 app[web.1]: /app/node_modules/passport-oauth2/lib/strategy.js:87
2021-12-25T15:01:52.442712+00:00 app[web.1]: if (!options.clientID) { throw new TypeError('OAuth2Strategy requires a clientID option'); }
2021-12-25T15:01:52.442713+00:00 app[web.1]: ^
2021-12-25T15:01:52.442713+00:00 app[web.1]:
2021-12-25T15:01:52.442713+00:00 app[web.1]: TypeError: OAuth2Strategy requires a clientID option
2021-12-25T15:01:52.442714+00:00 app[web.1]: at Strategy.OAuth2Strategy (/app/node_modules/passport-oauth2/lib/strategy.js:87:34)
2021-12-25T15:01:52.442714+00:00 app[web.1]: at new Strategy (/app/node_modules/passport-google-oauth20/lib/strategy.js:52:18)
2021-12-25T15:01:52.442714+00:00 app[web.1]: at Object.<anonymous> (/app/app.js:97:14)
2021-12-25T15:01:52.442714+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1072:14)
2021-12-25T15:01:52.442718+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
2021-12-25T15:01:52.442718+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:937:32)
2021-12-25T15:01:52.442719+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:778:12)
2021-12-25T15:01:52.442719+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
2021-12-25T15:01:52.442719+00:00 app[web.1]: at internal/main/run_main_module.js:17:47
2021-12-25T15:01:52.585001+00:00 heroku[web.1]: Process exited with status 1
2021-12-25T15:01:52.686499+00:00 heroku[web.1]: State changed from starting to crashed
2021-12-25T15:02:05.594774+00:00 app[api]: Set DB_ADMIN config vars by user [email protected]
2021-12-25T15:02:05.594774+00:00 app[api]: Release v5 created by user [email protected]
2021-12-25T15:02:06.819898+00:00 heroku[web.1]: State changed from crashed to starting
2021-12-25T15:02:09.868314+00:00 heroku[web.1]: Starting process with command `node app.js`
2021-12-25T15:02:11.032225+00:00 app[web.1]: Sat, 25 Dec 2021 15:02:11 GMT express-session deprecated req.secret; provide secret option at app.js:50:9        
2021-12-25T15:02:11.032895+00:00 app[web.1]: Warning: connect.session() MemoryStore is not
2021-12-25T15:02:11.032896+00:00 app[web.1]: designed for a production environment, as it will leak
2021-12-25T15:02:11.032896+00:00 app[web.1]: memory, and will not scale past a single process.
2021-12-25T15:02:11.042607+00:00 app[web.1]: /app/node_modules/passport-oauth2/lib/strategy.js:87
2021-12-25T15:02:11.042608+00:00 app[web.1]: if (!options.clientID) { throw new TypeError('OAuth2Strategy requires a clientID option'); }
2021-12-25T15:02:11.042609+00:00 app[web.1]: ^
2021-12-25T15:02:11.042609+00:00 app[web.1]:
2021-12-25T15:02:11.042610+00:00 app[web.1]: TypeError: OAuth2Strategy requires a clientID option
2021-12-25T15:02:11.042610+00:00 app[web.1]: at Strategy.OAuth2Strategy (/app/node_modules/passport-oauth2/lib/strategy.js:87:34)
2021-12-25T15:02:11.042610+00:00 app[web.1]: at new Strategy (/app/node_modules/passport-google-oauth20/lib/strategy.js:52:18)
2021-12-25T15:02:11.042611+00:00 app[web.1]: at Object.<anonymous> (/app/app.js:97:14)
2021-12-25T15:02:11.042611+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1072:14)
2021-12-25T15:02:11.042611+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
2021-12-25T15:02:11.042612+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:937:32)
2021-12-25T15:02:11.042612+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:778:12)
2021-12-25T15:02:11.042612+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
2021-12-25T15:02:11.042613+00:00 app[web.1]: at internal/main/run_main_module.js:17:47
2021-12-25T15:02:11.173932+00:00 heroku[web.1]: Process exited with status 1
2021-12-25T15:02:11.236915+00:00 heroku[web.1]: State changed from starting to crashed
2021-12-25T15:02:18.714430+00:00 app[api]: Set DB_PASS config vars by user [email protected]
2021-12-25T15:02:18.714430+00:00 app[api]: Release v6 created by user [email protected]
2021-12-25T15:02:18.957618+00:00 heroku[web.1]: State changed from crashed to starting
2021-12-25T15:02:21.915023+00:00 heroku[web.1]: Starting process with command `node app.js`
2021-12-25T15:02:23.655207+00:00 app[web.1]: Sat, 25 Dec 2021 15:02:23 GMT express-session deprecated req.secret; provide secret option at app.js:50:9        
2021-12-25T15:02:23.656076+00:00 app[web.1]: Warning: connect.session() MemoryStore is not
2021-12-25T15:02:23.656077+00:00 app[web.1]: designed for a production environment, as it will leak
2021-12-25T15:02:23.656077+00:00 app[web.1]: memory, and will not scale past a single process.
2021-12-25T15:02:23.667352+00:00 app[web.1]: /app/node_modules/passport-oauth2/lib/strategy.js:87
2021-12-25T15:02:23.667354+00:00 app[web.1]: if (!options.clientID) { throw new TypeError('OAuth2Strategy requires a clientID option'); }
2021-12-25T15:02:23.667355+00:00 app[web.1]: ^
2021-12-25T15:02:23.667355+00:00 app[web.1]:
2021-12-25T15:02:23.667355+00:00 app[web.1]: TypeError: OAuth2Strategy requires a clientID option
2021-12-25T15:02:23.667356+00:00 app[web.1]: at Strategy.OAuth2Strategy (/app/node_modules/passport-oauth2/lib/strategy.js:87:34)
2021-12-25T15:02:23.667356+00:00 app[web.1]: at new Strategy (/app/node_modules/passport-google-oauth20/lib/strategy.js:52:18)
2021-12-25T15:02:23.667356+00:00 app[web.1]: at Object.<anonymous> (/app/app.js:97:14)
2021-12-25T15:02:23.667357+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1072:14)
2021-12-25T15:02:23.667357+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
2021-12-25T15:02:23.667358+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:937:32)
2021-12-25T15:02:23.667358+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:778:12)
2021-12-25T15:02:23.667358+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
2021-12-25T15:02:23.667359+00:00 app[web.1]: at internal/main/run_main_module.js:17:47
2021-12-25T15:02:24.059553+00:00 heroku[web.1]: Process exited with status 1
2021-12-25T15:02:24.113339+00:00 heroku[web.1]: State changed from starting to crashed
2021-12-25T15:04:27.000000+00:00 app[api]: Build started by user [email protected]
2021-12-25T15:04:55.732410+00:00 app[api]: Release v7 created by user [email protected]
2021-12-25T15:04:55.732410+00:00 app[api]: Deploy 28c347cb by user [email protected]
2021-12-25T15:04:55.964469+00:00 heroku[web.1]: State changed from crashed to starting
2021-12-25T15:04:58.000000+00:00 app[api]: Build succeeded
2021-12-25T15:04:58.661868+00:00 heroku[web.1]: Starting process with command `node app.js`
2021-12-25T15:04:59.859458+00:00 app[web.1]: Sat, 25 Dec 2021 15:04:59 GMT express-session deprecated req.secret; provide secret option at app.js:27:9        
2021-12-25T15:04:59.860069+00:00 app[web.1]: Warning: connect.session() MemoryStore is not
2021-12-25T15:04:59.860070+00:00 app[web.1]: designed for a production environment, as it will leak
2021-12-25T15:04:59.860070+00:00 app[web.1]: memory, and will not scale past a single process.
2021-12-25T15:04:59.869458+00:00 app[web.1]: /app/node_modules/passport-oauth2/lib/strategy.js:87
2021-12-25T15:04:59.869466+00:00 app[web.1]: if (!options.clientID) { throw new TypeError('OAuth2Strategy requires a clientID option'); }
2021-12-25T15:04:59.869466+00:00 app[web.1]: ^
2021-12-25T15:04:59.869467+00:00 app[web.1]:
2021-12-25T15:04:59.869467+00:00 app[web.1]: TypeError: OAuth2Strategy requires a clientID option
2021-12-25T15:04:59.869467+00:00 app[web.1]: at Strategy.OAuth2Strategy (/app/node_modules/passport-oauth2/lib/strategy.js:87:34)
2021-12-25T15:04:59.869467+00:00 app[web.1]: at new Strategy (/app/node_modules/passport-google-oauth20/lib/strategy.js:52:18)
2021-12-25T15:04:59.869468+00:00 app[web.1]: at Object.<anonymous> (/app/app.js:66:14)
rror code=H10 desc="App crashed" method=GET path="/" host=agile-journey-27742.herokuapp.com request_id=aa9d093d-d785-4933-9c55-b9ce42ed5075 fwd="110.227.56.110" dyno= connect= service= status=503 bytes= protocol=https
2021-12-25T15:05:06.063156+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=agile-journey-27742.herokuapp.com request_id=231a0059-325c-4e81-b20d-20c70a8065d3 fwd="110.227.56.110" dyno= connect= service= status=503 bytes= protocol=https

Answer 1

1. Try to set up this type of directory Structure

|__client/  THIS IS EVERYTHING FROM THE REACT SIDE 
    |__ node_modules/
        |__ tons of stuff...
    |__ public/
        |__ index.html
        |__ favicon.ico
        |__ etc.
    |__ src/
        |__ index.js
        |__ main/
            |__ App.js
            |__ etc.
|__ models/
    |__ user.js
    |__ todo.js
    |__ etc.
|__ node_modules/
    |__ stuff...
|__ routes
    |__ userRoutes.js
    |__ todoRoutes.js
    |__ etc.
|__ .gitignore
|__ package.json
|__ server.js
|__ etc.

2. Please Add this Middleware

// ... Other imports
const path = require("path");

// Other app.use middleware
app.use(express.static(path.join(__dirname, "client", "build")));

// Right before your app.listen(), add this:
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});

app.listen(...);

3. Add a proxy to the client's package.json based on your deploy server

"proxy": "http://localhost:8000"

So, your package.json file looks like...

{
    "name": "client",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "axios": "^0.17.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-scripts": "1.0.17"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    },
    "proxy": "http://localhost:8000"
}

4. Setting environment variables on the website:

A. Open your app in Heroku
B. Go to "Settings"
C. Click "Reveal Config Vars"
D. Add a new variable and click "Add". Done!
E. Your port has to look like:- process.env.PORT || 8000

Your Port looks like this:-

const port = process.env.PORT || 8000;
.
.
.
app.listen(port);

5. Set up MongoDB Atlas IP access control

Next, you'll need to whitelist your IP address so that you can access your cluster. Go to Network Access on the navigation menu, and Add IP Address. You can either Add Your Current IP Address or Allow Access from Anywhere. Confirm your choice.

For any projects deployed through Heroku, you'll have to select Allow Access from Anywhere. This is because Heroku uses Dynamic IPs. While this isn't the most secure option, it is fine for now.

6. Add this scripts start heroku-postbuild and engines

After all this, your server's package.json should look something like this: In the terminal, type node -v. It should spit out the version of Node.js you're using. add this version in the "engines": "14.17.5"

{
    "name": "mern-to-heroku",
    "version": "1.0.0",
    "main": "server.js",
    "license": "MIT",
    "dependencies": {
        "body-parser": "^1.18.2",
        "express": "^4.16.2",
        "mongoose": "^4.13.6",
        "morgan": "^1.9.0"
    },
    "scripts": {
        "start": "node server.js",
        "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
    },
    "engines": {
        "node": "14.17.5"
    }
}

You should now be all set up to deploy your site through Heroku!

Answer 2

The issue is your app can't find the Google Client ID.

It seems like you haven't configured your .env variables properly in Heroku. The solution is really simple.

DOTENV Approach If you've defined your .env in this manner,

MONGO_URL="xxx.....xxx"
GOOGLE_CLIENT_ID="xx......xxx"
GOOGLE_CLIENT_SECRET="xxx.....xxx"

and in your passport-setup and db-setup you are using dotenv as,

require('dotenv').config();
.
.
.
passport.use(
  new GoogleStrategy
  (
    {
      clientID : process.env.GOOGLE_CLIENT_ID,
      clientSecret : process.env.GOOGLE_CLIENT_SECRET,
      callbackURL : '/auth/google/callback'
    },
.
.
.

then, you must have declared a .env file in your project's root directory on your computer.

Your .gitignore file might have .env mentioned, as this is the standard way of doing it (You don't push env variables to public/team repositories).

The reason it works on your computer is that the app has the context of the environment variables. In Heroku since the .env file isn't present, the app doesn't know where to find them.

All you have to do is add your environment variables to Heroku. Just go to settings in Heroku Dashboard, go to the Config variables menu.

Add your env variables in the format

Restart the dyno.

This would solve your issue.

Answer 3

1. Add this middleware in the app.js

  app.use(express.static(path.join(__dirname, "public")));

2. Folder Structure

|__public/   
    |__ css/
        |__ css files...
    |__ js/
        |__ js files...

3. Import this way

Now you set the path to the public directory you have to give the path public folder when you import

<link rel="stylesheet" href="/css/main.css" />

<script src="/js/main.js" crossorigin="anonymous"> </script>

You should now be all set up to access CSS files