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...
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