Hi Jared,
Thank you very much for this great tutorial, it seems like a great workable solution for contact forms and after learning react and node, a great first project for a working react app.
Everything works great locally.
However, getting the app to work in heroku is a no-no.. I think the problem is related to the package.json file.
After pushing to heroku the server.js files starts, however the app does not load (nothing loads).
After trying to push changes to heroku i keep getting a git-push-error-pre-receive-hook-declined
two things of my concern:
In the first step of creating the React app, i've created the app WITHIN the nodemailerAPI folder. This eventually leads to having two package.json files. Was this supposed to be this way? See the image with the folder structure.
i might have messed up the package.json file(s) by trying to create them using npm init, prior to deploying to heroku. Could you post how both of them should look like? I can update the versions of the dependencies ofcourse.
What i fail to understand is how the react app will actually gets build.. the procfile on heroku only specifies server.js
Please forgive my noobiness on this project :) hope you can help me out!
Hey no problem at all! Deploying can be its own beast. I'd definitely recommend separating the two projects from each other, especially when deploying to Heroku. React has to go through a special deployment/build process for Heroku.
Thank you Jared! I guess i will try to build some other react apps first, keep getting all kinds of errors. Trying to be ahead of my lurning curve i guess.. Thanks for the response and the tutorial, i will pick this project up later and deploy it!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Jared,
Thank you very much for this great tutorial, it seems like a great workable solution for contact forms and after learning react and node, a great first project for a working react app.
Everything works great locally.
However, getting the app to work in heroku is a no-no.. I think the problem is related to the package.json file.
After pushing to heroku the server.js files starts, however the app does not load (nothing loads).
After trying to push changes to heroku i keep getting a git-push-error-pre-receive-hook-declined
two things of my concern:
What i fail to understand is how the react app will actually gets build.. the procfile on heroku only specifies server.js
Please forgive my noobiness on this project :) hope you can help me out!
I will post the package.json code below:
I hope you can help me out!
Thanks!
Arejas
outer package.json (from nodemailerAPI
{
"name": "arejoreactcontact",
"version": "1.0.0",
"description": "contactreactapp",
"main": "server.js",
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^16.0.0",
"express": "^4.17.3",
"nodemailer": "^6.7.3",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {},
"repository": {
"type": "git",
"url": "git+github.com/arejasverduras/reactnod..."
},
"bugs": {
"url": "github.com/arejasverduras/reactnod..."
},
"homepage": "github.com/arejasverduras/reactnod..."
}
package.json inner (react app nodemailer-form)
{
"name": "nodemailer-form",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Hey no problem at all! Deploying can be its own beast. I'd definitely recommend separating the two projects from each other, especially when deploying to Heroku. React has to go through a special deployment/build process for Heroku.
To deploy a react app to heroku, run this:
Thank you Jared! I guess i will try to build some other react apps first, keep getting all kinds of errors. Trying to be ahead of my lurning curve i guess.. Thanks for the response and the tutorial, i will pick this project up later and deploy it!