- vừa được xem lúc

Hướng dẫn deploy React JS

0 0 82

Người đăng: Harry

Theo Viblo Asia

Hướng dẫn deploy ReactJS app

Trong quá trình phát triển ứng dụng cùng với thư viện React, chúng ta đang lập trình trong môi trường nhà phát triển (development mode). Bạn có thể xác định bằng React Dev Tool sẽ có biểu tượng màu đỏ.

Sau đây, mình sẽ liệt kê các cách để triển khai ứng dụng ReactJS trong Production mode

I. Buid ứng dụng

  • Tại folder chứa code của bạn chạy câu lệnh:
 npm run buid
  • Sau bước này sẽ tạo ra 1 thư mục build. Đây chính là thư mục dùng để triển khai.

II. Triển khai ứng dụng

**Lưu ý**: Server của bạn phải được cài NodeJS và npm

1. Static Server

Sử dụng 1 dịch vụ dựa trên môi trường Node đó là Serve:

npm install -g serve
serve -s build
  • build là đường dẫn tới folder build mà bạn vừa chạy câu lệnh npm run build.
  • Bạn cũng có thể chọn cổng được bind cho ứng dụng của bạn:
serve -s build -l 4000
  • Xem chi tiết các câu lệnh của Serve:
serve -h

2 . Các cách khác

Bạn có thể sử dụng Node và Express như sau(cái này cũng tương tự như Serve nhưng bạn cần tạo 1 dịch vụ, còn bên trên đã dựng sẵn )

const express = require('express');
const path = require('path');
const app = express(); app.use(express.static(path.join(__dirname, 'build'))); app.get('/', function (req, res) { res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); app.listen(9000); 
  • dirname là đường dẫn tới thư mục build của bạn ==> Thôi cứ dùng cách trên cho nhanh
  • Sử dụng các bên thứ 3 như Azure or Firebase

III. Kết luận

  • Bạn nên sử dụng cách đầu tiên, là 1 cách dễ dàng nhất trong triển khai ứng dụng lên server của bạn.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Những điều cần lưu ý và sử dụng Hook trong React (Phần 5)

V. Sử dụng useRef như thế nào cho đúng.

0 0 140

- vừa được xem lúc

7 Cách viết code React "clean" hơn

Mở đầu. Là nhà phát triển React, tất cả chúng ta đều muốn viết code sạch hơn, đơn giản hơn và dễ đọc hơn. 1. Sử dụng JSX shorthands.

0 0 199

- vừa được xem lúc

Create app covid-19 use Reactjs

Chào các bạn hôm nay mình sẽ chia sẻ với các bạn một app covid-19, để mọi người cùng tham khảo, tính năng của App này chỉ đơn giản là show số liệu về dịch Covid của các nước trên thế giới như: Số ngườ

0 0 53

- vừa được xem lúc

ReactJS Custom Hooks

ReactJS cung cấp rất nhiều cho bạn các hook mà bạn có thể sử dụng hằng ngày vào project của mình. Nhưng bên cạnh đó bạn có thể tự tạo ra các hook của riêng bạn để sử dụng, làm cho việc tối ưu hóa code

0 0 80

- vừa được xem lúc

3 cách để tránh re-render khi dùng React context

3 cách để tránh re-render khi dùng React context. Nếu đã từng sử dụng React context cho dự án của bạn, và gặp phải tình trạng các component con - Consumer re-render rất nhiều lần, thậm chí bị sai logi

0 0 38

- vừa được xem lúc

Tìm hiểu về React Hook: Sử dụng useDebugValue

Trong bài viết hôm này, tôi sẽ giới thiệu các bạn một React Hook tiếp theo, đó là useDebugValue. useDebugValue là gì .

0 0 58