Watch out for anti-reaching parties/forget that this article is written by ordinary people: the source code of the project is not provided, but it provides ideas. independent thinking! independent thinking! independent thinking! The reference project is placed at the end, and it is more efficient to follow along than to pull the source code directly! Spray/do not want to use Heroku, click on the upper right corner? This is deployed in Heroku (I will use 0-0), don't spray if you don't like it!

Let's goooooooo~!

Sign up for Heroku

First of all, you need to surf the Internet scientifically.
Secondly, you need an outlook mailbox or Google mailbox. It is best to use outlook because the registration will not check the location of the mobile phone number. The
first question arises, an unknown question appears and then refuse, because the robot verification does not show a picture, it defaults that you are Robot
This is because of the lack of plug-ins, which need to be installed in the browser!

solution

firefox google

Then after the registration is successful, it will send you an email, click the link to verify, and then log in

Here Heroku has canceled the free server, and a VISA credit card must be bound to create a server APP project. After creation, it comes with a website domain name , which can be modified.

The interface is as follows

~~(If you don’t have one, find Taobao (not recommended) or apply for a secondary card in the name of your parents)~~

Modify the base code

For the project written by myself, if the front and back ends are separated, drag the front end (client) into the back end (api) folder. If the follow-up operation cannot be done by dragging and dropping, change the permissions
, go directly to the client folder to change the permissions, and any in the security group The user has full control.

Pay attention to the files modified in the backend api, mainly these two package.json and index.js

package.json nodem->node plus new script heroku-postbuild

  "name": "api",
  "homepage": "获得的网址",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  }

The index.js resource path should not be written incorrectly, just write it here or the resource will not be found and the page will be blank

app.use(express.static(path.join(__dirname,'/client/build')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
  });
app.listen(process.env.PORT || 5000,async ()=>{
    console.log("Backend is running-")
})

Add config.js in the client folder

After writing a new axios route, axiosInstance will replace all the places where axios was originally used. The modification here needs to be completely changed in the code, and the place where the local backend http://localhost:5000 is used is also replaced with the new URL.

import axios from "axios";

export const axiosInstance = axios.create({
    baseURL:"新的网址"
})

Also prevent the blank page from appearing again

Add <script type="text/babel"></script> in client/public/index.html

<script type="text/babel"></script>
<noscript>You need to enable JavaScript to run this app.</noscript>

official deployment

Install git. If you don’t have it installed, you need to install it. It doesn’t matter if you don’t have a github account. Here is a local link to the remote Heroku
to install Heroku. It is best to use the installer directly, with the smallest error rate. Official website

Start creating a local code repository

git init
git add .
git commit -am "1234" //当代码有变化的时候保存之后再用这个重新提交 必须命名commit不然提交失败

HerokuOperation

登录 输入Heroku注册时使用的 邮箱 密码
heroku login -i
远程连接你的app
heroku git:remote -a 创建的app名字
推送代码部署
git push heroku master

It is worth mentioning that if the local warehouse is established after the app connection is established, then the local warehouse is deleted and a new warehouse is created, it will not be able to connect to the previously connected remote app. Oh 0-0! Because it is bound to one by default, it will not be changed. Delete the app project and try again!

A long list of prompt messages began to appear

Nevermind, look at the sign below

When you see successfully and display the URL, the build is successful, but the deployment may not be successful. Maybe the backend is successful, but the frontend link cannot connect to the resource path. See error usage here

heroku logs --tail

There is also a question to ask Google Baidu. At present, the pitfalls I have encountered are really bad luck 0-0!

Finally tossed until dizzy, and finally successfully displayed the interface! 0-0 hee hee, both at home and abroad can visit...

The price is 7 dollars a month? Those who have no money and only want to make a static interface can use Vercel/Render.

My success interface!

Referenced github link/other referenced link:

Except for Xiaoqiu, there are videos on Youtube! Reach out/pay for refund!

If you want to do a full-stack project in the future, it is best to find a time period with a lot of time to do it yourself. This is my homework (already handed in), and I didn’t spend time carefully polishing it. After that, I may need to access APIs such as Netease Cloud and Weather and add Password encryption and decryption function, verify data input and then prevent attacks, access to a complete game section? Or access to the background of file uploading.....

This is something for later, but, short-term crash projects really consume life, so I won't say much, I'm going to sleep first.

How to successfully deploy React+Node.js front-end and back-end separation projects on Heroku?

Sign up for Heroku

Modify the base code

official deployment

Guess you like