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/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s