Cách xây dựng Micro Frontend với React và SSR

Tạo app React cho micro frontend

Chúng ta cần tạo app React trước khi bắt đầu với khái niệm micro frontend.

Vì vậy, bạn có thể clone app React ở đây github.com/StyleT/ilc-learning-react. Hoặc bạn có thể sử dụng codesandbox.io/s/github/StyleT/ilc-learning-react để nó chạy trên cloud. Tôi khuyên bạn nên sử dụng codesandbox.io để loại bỏ tất cả các vấn đề liên quan đến môi trường local có thể xuất hiện khi chúng ta chạy app.

Ngay khi bạn bắt đầu app – hãy thử chơi vài trận đấu tic-tac-toe

Điều chỉnh app React thành ILC

Để làm cho app React hoạt động chính xác với ILC, chúng ta cần điều chỉnh app tuân thủ giao diện ILC to App interface. Khá dễ dàng, vào source code theo link đã cho và vấn đề sẽ được resolve.

Ngay sau khi bạn hoàn thành việc này – hãy khởi động lại app và thử mở route /microfrontend. Bạn sẽ nhận được response status 200 OK và một số đánh dấu SSR.

Lưu ý: trong trường hợp có bất kỳ lỗi – hãy thử chuyển sang branch ‘step_1-ILC_integration‘

Cấu hình ILC cho app mới

Trong bước này, chúng ta sẽ sử dụng trang web demo và “Develop ngay tại “production” tính năng ILC. Chúng ta sẽ làm điều này vì nó rất đơn giản. Tuy nhiên, bạn có thể đạt được kết quả khá giống nhau khi sử dụng ILC mà bạn chạy ở local.

Để làm cho micro frontend mới của bạn, trước tiên chúng ta cần xác định publicPath & ssrPath của bạn.

Nếu bạn sử dụng Codeandbox.io (tôi đã đề xuất)

• publicPath của bạn sẽ giống thế này https://abcde.sse.codesandbox.io/public/. Kiểm tra thanh địa chỉ của trình duyệt ảo của bạn xem app React.
• Và ssrPath của bạn sẽ là https://abcde.sse.codesandbox.io/microfrontend

Khi bạn chạy app dưới local

• publicPath sẽ là http://127.0.0.1:5000/public/.
• Và ssrPath của bạn là http://XXX.XXX.XXX.XXX:5000/microfrontend với XXX là địa chỉ ip thật của bạn. Bạn có thể sử dụng các services như https://ngrok.com/ nếu nhà cung cấp dịch vụ Internet giữ IP của bạn phía sau NAT.

Ngay sau khi bạn đã tìm ra tất cả các chi tiết – hãy thay đổi cấu hình ILC của chúng ta. Để làm như vậy, bạn cần mở demo.microfrontends.online/nosuchpath và chạy code sau trong phần console của trình duyệt:

var publicPath = 'https://abcde.sse.codesandbox.io/public/';
var ssrPath = 'https://abcde.sse.codesandbox.io/microfrontend';var overrideConfig = encodeURIComponent(JSON.stringify({
    apps: {
        '@portal/myapp': {
            spaBundle: publicPath + 'client.js',
            cssBundle: publicPath + 'style.css',
            ssr: {
                src: ssrPath,
                timeout: 10000,
            },
            props: { publicPath },
            kind: 'primary',
        },
    },
    routes: [{
        routeId: 555,
        route: '/nosuchpath',
        slots: {
            body: {
                appName: '@portal/myapp'
            }
        }
    }]
}));
document.cookie = `ILC-overrideConfig=${overrideConfig}; path=/;`

Refresh trang sau khi code được chạy. Nếu bạn đã làm mọi thứ chính xác – bạn thấy app react của mình chạy bên trong trang web demo ILC.

Nếu nó không hoạt động – hãy đảm bảo rằng ssrPath và các liên kết JS / CSS có thể truy cập không chỉ từ máy của bạn (sử dụng https://reqbin.com/)

Bây giờ hãy thử thay đổi các tab khác nhau bằng thanh bar phía trên. Xem rằng chúng không chỉ render phía server hoạt động mà cả phía client. Sau đó thử vô hiệu hóa JS để xem trang trông như thế nào nếu không có nó.

Và cuối cùng – bạn đã xây dựng micro frontend thành công

Kết luận

Chúng ta đã biến ứng dụng React đơn giản nhất thành Micro Frontend. Giúp bạn có cái nhìn tổng quan về Micro Frontend.

Tham khảo thêm Micro Frontend : Micro Frontend là gì ? Hướng dẫn tạo micro frontend

HocWeb VN

Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.