React新手部署项目到Heroku后仍显示Edit src/App.js默认页如何解决

问题原因 #

你部署后仍显示Edit src/App.js and save to reload默认提示，核心原因及流程错误如下：

• 你执行npx create-react-app react-heroku初始化项目后，直接执行了部署流程，没有将自己开发的pocketNote项目代码替换到当前部署目录，推送到Heroku的仅为create-react-app的默认模板代码
• 你执行的git remote add heroku命令缺少后续的仓库地址参数，虽然你最终推送成功，但流程不规范易出现绑定错误
• Heroku平台的Node.js构建包会自动执行npm run build构建操作，你提前手动执行构建反而可能出现静态资源路径错误

解决步骤 #

1. 替换部署目录代码

• 进入你之前创建的react-heroku文件夹，删除除.git隐藏文件夹之外的所有文件
• 将你本地pocketNote项目的全部源码复制到react-heroku根目录，确认根目录下存在package.json文件，且文件内包含build执行脚本

2. 重新提交代码并部署
   执行以下命令完成代码提交推送：

git add .
git commit -m "替换为pocketNote项目代码"
# 如果提示heroku远程仓库不存在，先执行下一行命令，否则跳过
heroku git:remote -a react-heroku-juvie
git push heroku master

3. 验证效果
   推送完成后等待1-2分钟待Heroku完成自动构建，刷新站点即可看到你的项目内容。如果仍无法正常访问，可执行heroku logs --tail命令查看构建运行日志排查错误。

内容的提问来源于stack exchange，提问作者tomato_ketch