React và Heroku

Đầu tiên khởi tạo website bằng react cli

npx create-react-app hello-world

Sau khi tạo xong thì vào chạy thử web trên localhost

cd hello-world
yarn start

Browser tự động mở ra http://localhost:3000/ với logo của react là thành công bước đầu. Bây giờ mình sẽ host website này lên heroku.

Login vào heroku (yêu cầu phải cài đặt trước heroku-cli):

heroku login

Tạo heroku app

heroku create

Sau khi tạo thành công app, bạn có thể chạy thử lại ở localhost. Chạy thành công thì bạn sẽ có thể mở http://localhost:5000/ để xem lại.

heroku local web

Như vậy là mọi chuyện ở local đã xong, mình sẽ public nó lên internet.

Install thêm serve để chạy server

yarn add serve

Sửa lại lệnh start trên package.json

...
"scripts": {
  "start": "serve -s build",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js"
}
...

Đầu tiên, mình tạo bản build production:

yarn build

commit thay đổi

git add .
git commit -m "commit message"

push lên master của heroku.

git push heroku master

Bây giờ bạn có thể mở website của mình ra để xem thành quả:

heroku open

Ví dụ trên sẽ ra kết quả như thế này: https://secure-springs-54670.herokuapp.com/