React và Heroku

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

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/

Khởi đầu với Heroku

Cài đặt heroku-cli:

brew tap heroku/brew && brew install heroku

Clone started template

git clone https://github.com/heroku/node-js-getting-started.git
cd node-js-getting-started

Đem code bỏ vào node-js-getting-started (có thể đổi tên lại thành gì đó cho đẹp hơn)

Tạo heroku app

heroku create

Code gì đó, commit code và push lên heroku

git push heroku master

Để xem page online:

heroku open