0

i am trying to deploy my portfolio site to the heroku but showing applicatio error

here is my heroku log:

-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 12.x...
       Downloading and installing node 12.20.0...
       Using default npm version: 6.14.8
       
-----> Restoring cache
       - node_modules
       
-----> Installing dependencies
       Installing node modules
       
       > nodemon@2.0.6 postinstall /tmp/build_85c92c3d_/node_modules/nodemon
       > node bin/postinstall || exit 0
       
       Love nodemon? You can now support the project via the open collective:
        > https://opencollective.com/nodemon/donate
       
       added 232 packages in 9.267s
       
-----> Build
       Running heroku-postbuild
       
       > my-profile@1.0.0 heroku-postbuild /tmp/build_85c92c3d_
       > cd profile && npm install && npm run build
       
       
       > core-js@2.6.12 postinstall /tmp/build_85c92c3d_/profile/node_modules/babel-runtime/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > core-js@3.8.0 postinstall /tmp/build_85c92c3d_/profile/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > core-js-pure@3.8.0 postinstall /tmp/build_85c92c3d_/profile/node_modules/core-js-pure
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > ejs@2.7.4 postinstall /tmp/build_85c92c3d_/profile/node_modules/ejs
       > node ./postinstall.js
       
       
       > nodemon@2.0.6 postinstall /tmp/build_85c92c3d_/profile/node_modules/nodemon
       > node bin/postinstall || exit 0
       
       added 2198 packages from 953 contributors and audited 2202 packages in 60.162s
       
       134 packages are looking for funding
         run `npm fund` for details
       
       found 8 low severity vulnerabilities
         run `npm audit fix` to fix them, or `npm audit` for details
       
       > profile@0.1.0 build /tmp/build_85c92c3d_/profile
       > react-scripts build
       
       Creating an optimized production build...
       Compiled with warnings.
       
       src/pageComponent/Map.js
         Line 60:10:  'popupInfo' is assigned a value but never used  no-unused-vars
       
       Search for the keywords to learn more about each warning.
       To ignore, add // eslint-disable-next-line to the line before.
       
       File sizes after gzip:
       
         398.36 KB  build/static/js/2.08586e80.chunk.js
         5.39 KB    build/static/js/main.a1597eb1.chunk.js
         770 B      build/static/js/runtime-main.2eab5cd0.js
         509 B      build/static/css/main.5ca926eb.chunk.css
       
       The project was built assuming it is hosted at /.
       You can control this with the homepage field in your package.json.
       
       The build folder is ready to be deployed.
       You may serve it with a static server:
       
         npm install -g serve
         serve -s build
       
       Find out more about deployment here:
       
         https://cra.link/deployment
       
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       audited 232 packages in 2.028s
       
       15 packages are looking for funding
         run `npm fund` for details
       
       found 0 vulnerabilities
       
       
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 95.1M
-----> Launching...
       Released v4
       https://portfolio-rony.herokuapp.com/ deployed to Heroku

it is an portfolio app made by react in client side and in server side i have used nodemailer for mailing purpose. while executing node index and npm start both side it works well in localhost. then i have reconfigured for deployment. below i am showing the deployment configuration. here is my server side:

myprofile/index.js:

const express = require("express");
const router = express.Router();

const http = require('http')
 const cors = require("cors"); 
 const nodemailer = require("nodemailer");


const app = express();
app.use(cors()); 
app.use(express.json());
app.use("/", router);

/* app.listen(5000, () => console.log("Server Running")); */
 
const whiteList = [
  "http://localhost:3000",
  "http://localhost:5000",
  "https://portfolio-rony.herokuapp.com/",
];
const corsOption={
  origin:function (origin,callback){
    console.log("**Origin of request" +origin)
    if(whiteList.indexOf(origin)===-1||!origin){
      console.log("origin acceptable")
      callback(null,true)
    }else{
      console.log("Origin rejected")
      callback(new Error('not allowed by CORS'))
    }
  }
}

const contactEmail = nodemailer.createTransport({
  service: "**",
  auth: {
    user: "***",
    pass: "**",
  },
});

contactEmail.verify((error) => {
  if (error) {
    console.log(error);
  } else {
    console.log("Ready to Send");
  }
});

router.post("/contact", (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  const message = req.body.message;
  const mail = {
    from: name,
    to: "**",
    subject: "Contact Form Message",
    html: `<p>Name: ${name}</p><p>Email: ${email}</p><p>Message: ${message}</p>`,
  };
  contactEmail.sendMail(mail, (error) => {
    if (error) {
      res.json({ result: "ERROR" });
    } else {
      res.json({ result: "Message Sent" });
    }
  });
});
if (process.env.NODE_ENV==='production'){
app.use(express.static(path.join(__dirname,'profile/build')))
app.get('/*',(req,res)=>{
  res.sendFile(path.join(__dirname,'profile/build/index.html','index.html'))
})}
const PORT = process.env.PORT || 5000;
const server = http.createServer(app);
server.listen(PORT, () => {
  console.log(`server started on port: ${PORT}`);
});

myprofile/package.json:

"scripts": {
    "start": "node index.js",
    "heroku-postbuild":"cd profile && npm install && npm run build"
  },

here is my client side:

myprofile/profile/package.json:

"proxy": "http://localhost:5000",
  "scripts": {
    
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    
  },

there is an axios part which i turned from axios .post("https://localhost:5000/contact", data) into axios .post("/contact", data).

then i have deployed to github and from there i have deployed it to heroku. in gitignore node_modules mentioned in both sides also.

but still after the successful deploment, the landing page is showing the Application error.

how can i solve it? please let me know.

Update: here is the view logs:

2021-01-01T20:09:26.763964+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=f6540932-1f90-4a2e-a841-695cc2c7ca9c fwd="81.193.90.208" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:09:40.255285+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=a9e291e7-24e3-4259-8c56-778f2cca2e0e fwd="54.162.178.132" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:10:05.041138+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=HEAD path="/" host=portfolio-rony.herokuapp.com request_id=8d47400f-4d58-45df-a897-107f3bf1c0ee fwd="217.182.175.162" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:10:58.282388+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=128a5a0f-e331-45cb-ac7b-0fa96ec8fdb1 fwd="49.36.45.97" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:11:00.534560+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=0f9959f2-b16a-45d1-95b2-4ea82e815080 fwd="49.36.45.97" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:11:29.573355+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=6b378c7e-86d3-4134-b0b3-d800b50e0dd7 fwd="34.201.67.118" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:16:08.302973+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=60a19d50-2735-4c36-8bb1-f0d432b7e3a9 fwd="2.49.4.168" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:16:13.658790+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=c2dede38-1f95-4795-ab37-d0e15b180ccc fwd="2.49.4.168" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:46:07.132299+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=portfolio-rony.herokuapp.com request_id=3065ce5f-2d5a-4df5-b16b-94871f574377 fwd="81.193.90.208" dyno= connect= service= status=503 bytes= protocol=https
2021-01-01T20:46:09.400243+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=08cd3df3-cd33-4502-b03c-103996cfad3e fwd="81.193.90.208" dyno= connect= service= status=503 bytes= protocol=https

i have no idea what does it mean and why my app is crashing...

ali
  • 135
  • 1
  • 13
  • What do the logs show when you hit the homepage? – LoXatoR Jan 01 '21 at 20:16
  • well i didn't use the command lines to deploy. i have used deploy app connected to github and deploy manually. when i check the activity after deployment error, there is iamrony@gmail.com: Deployed f847cd90 Today at 7:46 PM · v4 · Compare diff and when i click on compare diff it took me to the github pull request page. is this ok or should i have to do heroku cli command line? – ali Jan 01 '21 at 20:37
  • Please follow the steps mentioned here -https://devcenter.heroku.com/articles/logging#:~:text=You%20can%20view%20your%20logs,menu%20select%20%E2%80%9CView%20logs%E2%80%9D Then, once you have the logger open on heroku.com, hit your homepage again and see what the logs show – LoXatoR Jan 01 '21 at 20:39
  • i went to view log and it is showing after browsing the open app link: 2021-01-01T20:09:26.763964+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=portfolio-rony.herokuapp.com request_id=f6540932-1f90-4a2e-a841-695cc2c7ca9c fwd="81.193.90.208" dyno= connect= service= status=503 bytes= protocol=https i am showing the latest one. because they are so big – ali Jan 01 '21 at 20:51
  • That log isn't very helpful but I googled H10 error code and found this https://stackoverflow.com/questions/14322989/first-heroku-deploy-failed-error-code-h10 – LoXatoR Jan 01 '21 at 20:55
  • the accepted answer is showing it's source from another post which shows that .listen(process.env.PORT || 5000). i had used it by declaring a const PORT then have use it in listen. so i have did it already and mentioned in the post in myprofile/index.js part. – ali Jan 01 '21 at 21:03
  • 1
    Sorry, even I am clueless in that case :/ If you find it, please update this answer as I am very interested in knowing. Good luck! – LoXatoR Jan 02 '21 at 23:34
  • thanx for putting a message. i was very new to nodejs and that's why i had to uninstall everything except two dependencies : express and nodemailer, rests were unnecessary. i had to clean nodejs part which was something like getting rid of cors and other things. but in the mean time i had to update my smtp server with sendgrid and last night my smtp server Ip or something else is blocked and i can't send any email from smtp sendgrid or gmail config. i dun know what to do. but now my site is up. please feel free to leave feedback as i am learning still. please give me any feed back. – ali Jan 03 '21 at 12:12

1 Answers1

0

well this issue is solved

myprofile/index.js:

const express = require("express");
const router = express.Router();
const path=require('path')

const nodemailer = require("nodemailer");


const app = express();
app.use(express.json());
app.use("/", router);
app.use(express.static(path.join(__dirname, "profile/build")));
 **************email part config***********

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/profile/build/index.html"));
});
 
const port = process.env.PORT || 5000;
app.listen(port);

console.log(`Server running on ${port}`);

myprofile/package.json dependecies:

"scripts": {
    "start": "node index.js",
    "heroku-postbuild": "cd profile && npm install && npm run build"
  },

 "express": "^4.17.1",
 "nodemailer": "^6.4.17"

in client side i didn't have to change anything except uninstalling some unnecessary dependencies.

and it worked.

but in the meantime i have blocked my smtp email thing. it stops sending any email so my website app has an inactive contact me section

thanx everyone

ali
  • 135
  • 1
  • 13