Hướng dẫn deploy React JS

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

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.

Nguồn: viblo.asia

Bài viết liên quan

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 2

viết lại nội dung này ” Phát hiện các cuộc tấn công Cross Site Scripting (XSS)

AI Chatbot 2025: Xu Hướng Tất Yếu Cho Doanh Nghiệp Dẫn Đầu

Giới thiệu AI chatbots đã trải qua một hành trình đáng kể, từ những công cụ t

Tấn Công Ứng Dụng Web: Mối Đe Dọa Hàng Đầu – Phần 1

Tấn công web là gì? Ứng dụng web là các ứng dụng cung cấp dịch vụ cho người

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp

SEO Mũ Trắng, Mũ Đen, Mũ Xám: Hiểu Biết và Lựa Chọn Phù Hợp Trong kỷ nguyên s