React là một cách tuyệt vời để phát triển, xây dựng và gửi các ứng dụng nhanh chóng. Nó cung cấp trải nghiệm tốt và nhanh chóng cho nhà phát triển cũng như nhiều công cụ giúp chúng tôi phát triển ứng dụng nhanh hơn.

Nhưng đôi khi, chúng ta lại rơi vào một tình huống khá rắc rối. Mọi thứ hoạt động trên máy chủ phát triển cục bộ của chúng tôi. Nhưng khi chúng tôi chạy ứng dụng trong sản xuất thì hoàn toàn ngược lại. Nói cách khác, không có gì hoạt động. Điều đó đưa chúng ta đến một câu hỏi rất quan trọng.

Làm thế nào để chạy React JS Build cục bộ?

Chạy bản dựng sản xuất của ứng dụng React JS cục bộ là một quá trình đơn giản. Nó có thể được tóm tắt thành một chuỗi gồm 3 bước

  • Tạo bản dựng sản xuất của ứng dụng React JS
  • Sử dụng máy chủ cục bộ để phục vụ bản dựng React JS
  • Kiểm tra xem mọi thứ có hoạt động như mong đợi không

Tôi sẽ giải thích từng bước chi tiết hơn trong bài viết này. Nếu bạn quan tâm đến điều đó, hãy đọc thêm!

Chạy React Build cục bộ

Để tạo bản dựng chính thức cho ứng dụng React của bạn, tất cả những gì bạn cần làm là chạy lệnh sau.

npm run build
Or if you're using Yarn
yarn build

Sẽ mất vài giây, thậm chí có thể vài phút. Nhưng sau một thời gian, bạn sẽ thấy nó tạo ra một thư mục mới. Thông thường, nó được gọi là build hoặc public.

Hầu hết các nhà quản lý dự án React như Create React App, Nex t hoặc Gatsby đều có cấu hình sẵn quy trình xây dựng. Đó là lý do tại sao chúng ta chỉ cần chạy một lệnh. Và trong nền, họ làm tất cả những điều còn lại cho chúng ta.

Quá trình xây dựng nhằm tối ưu hóa mọi thứ trong ứng dụng của chúng tôi. Và làm cho nó sẵn sàng sản xuất cho người dùng của chúng tôi. Bước này rất quan trọng vì nó nhận được tất cả những thứ không cần thiết.

Để cung cấp cho bạn một ví dụ. Trong chế độ phát triển, chúng tôi yêu thích nhật ký bảng điều khiển, hot reloading và thông báo lỗi mô tả. Nhưng trong phiên bản sản xuất, chúng tôi không muốn bất kỳ điều nào trong số này. May mắn cho chúng tôi, quá trình xây dựng thường loại bỏ tất cả các tính năng này.

Cung cấp Thư mục React Build

Bây giờ chúng tôi đã tạo các tệp bản dựng của mình, đã đến lúc biến chúng thành một trang web hoạt động. Để làm như vậy, chúng tôi cần một số loại máy chủ HTTP chạy trên máy cục bộ của chúng tôi.

Trong khi điều này nghe có vẻ khó khăn, chúng ta có thể nhanh chóng đạt được nó bằng cách cài đặt một gói gọi là serve

Giả sử bạn muốn cung cấp một trang web tĩnh, ứng dụng trang đơn hoặc chỉ một tệp tĩnh (bất kể là trên thiết bị của bạn hay trên mạng cục bộ), gói này là lựa chọn phù hợp cho bạn.

Trong thiết bị đầu cuối của bạn, hãy chạy lệnh sau.

npm install -g serve
Or if you're using Yarn
yarn global add serve

Tất cả những gì còn lại cần làm là serve biết bạn muốn phân phát thư mục nào. Giả sử bạn đang ở trong thư mục dự án của mình. Bạn sẽ chạy một lệnh như thế này.

serve build

Và bạn sẽ thấy đầu ra sau đây, chỉ định nơi ứng dụng React của bạn đang được phục vụ.

Thử nghiệm React Build cục bộ

Khi ứng dụng React của bạn được thiết lập và chạy, tất cả những gì còn lại cần làm là sử dụng ứng dụng của bạn, kiểm tra và gỡ lỗi ứng dụng đó. Và cuối cùng, hãy tìm ra vấn đề mà bạn đang gặp phải ngay từ đầu.

Tôi ước tôi có thể chia sẻ các mẹo và thủ thuật để giúp bạn tìm ra vấn đề của mình, nhưng không có giải pháp kỳ diệu nào phù hợp với tất cả các trường hợp sử dụng. Các lỗi khác nhau giữa các ứng dụng. Và để giải quyết chúng, bạn chỉ cần dành thời gian thử nghiệm và gỡ lỗi.

Kết luận

Nhóm React đang cố gắng hết sức để làm cho cuộc sống của các nhà phát triển React trở nên dễ dàng và thú vị hơn. Một điều thực sự giúp ích cho chúng tôi là khả năng chạy và thử nghiệm bản dựng sản xuất của các ứng dụng React JS cục bộ.

Đôi khi, chúng ta gặp phải tình huống trong đó bản dựng sản xuất ứng dụng React của chúng ta không hoạt động. Khả năng chạy và thử nghiệm bản dựng sản xuất ứng dụng của chúng tôi tại địa phương có thể giúp chúng tôi tiết kiệm rất nhiều thời gian và không phải lo lắng.

Trong bài viết này, bạn đã học các bước cần thiết để chạy, phục vụ và kiểm tra bản dựng React cục bộ. Với kiến thức này, lần tới khi gặp sự cố sản xuất, bạn sẽ biết chính xác những bước mình cần thực hiện.

Bài viết gốc tại đây.

Hiện tại khóa học Web Frontend + React.js tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Với cả hai hình thức là đào tạo Offline và học trực tuyến có tương tác. Và vẫn đảm bảo việc làm cho học viên tốt nghiệp đối với cả hai hình thức đào tạo.

Chi tiết khóa học: https://frontend.techmaster.vn/.

Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).