sindresorhus/electron-serve

🖥️ Phục vụ file tĩnh cho Electron app không cần file://

win.loadURL('file://…') không hoạt động với SPA. electron-serve giải quyết bằng custom protocol + fallback tự động.

electron-serve là một npm package nhẹ của sindresorhus, giải quyết vấn đề kinh điển khi build Electron app dạng single-page: history.pushState() tạo URL không tồn tại trên filesystem, nên win.loadURL('file://…') fail. Thư viện cài đặt một custom protocol server, phục vụ file thật nếu có, fallback về index.html nếu không — cho phép react-router, vue-router hoạt động bình thường.

✨ Điểm nổi bật

• SPA routing hỗ trợ: Fallback tự động về index.html khi URL không tìm thấy trên disk, tương thích với mọi router module
• Custom protocol: Dùng app://- thay vì file://, configurable scheme và hostname cho nhiều window
• ES modules out-of-the-box: Serve file JS với MIME type text/javascript đúng chuẩn, hỗ trợ import/export
• Source maps: File .map phục vụ đúng MIME type, Chrome DevTools load được cho debugging minified code
• Multiple windows: Dùng unique scheme cho mỗi window, mỗi window phục vụ directory hoặc file khác nhau
• Search parameters: Truyền query params qua loadUrl(window, {id: 4, foo: 'bar'})
• CORS toggle: isCorsEnabled mặc định true, tắt khi không cần cho production
• Electron 37+: Yêu cầu phiên bản Electron mới nhất

💡 Vì sao đáng chú ý

Không có electron-serve, dev phải tự viết protocol handler hoặc dùng workaround rườm rà cho SPA routing trong Electron. Thư viện này rút gọn toàn bộ logic xuống một hàm serve() trả về loadUrl, gọi một lần là xong. Đặc biệt hữu ích khi cần nhiều window với nội dung khác nhau — chỉ cần khai báo thêm một serve({directory: '…', scheme: '…'}) riêng.

Yêu cầu Electron 37 trở lên. Kết hợp tốt với electron-util, electron-reloader, electron-debug trong cùng hệ sinh thái của sindresorhus.

#electron #electronjs #static-file-server #spa #javascript #TiniX