Chào các bạn, hôm nay tôi muốn chia sẻ với các bạn về dự án mới nhất của tôi - Offline Dev Tools, một ứng dụng desktop nhỏ gọn được xây dựng bằng Electron, React TypeScript, Tailwind CSS và một số công cụ hỗ trợ khác.
Giới thiệu về Offline Dev Tools
Offline Dev Tools cung cấp một số công cụ hữu ích có thể thực hiện offline như: phát sinh dữ liệu, chuyển đổi dữ liệu, mã hóa/giải mã base64, so sánh múi giờ và nhiều hơn nữa. Ứng dụng này được lấy cảm hứng từ DevToys và các thư viện như transform.tools, faker-js.
Tôi đã dành vài tuần để thiết kế và xây dựng ứng dụng này, và còn nhiều tính năng hơn mà tôi dự định phát triển trong tương lai. Bạn có thể xem, tải và sử dụng ứng dụng trên các hệ điều hành như Linux, Windows hoặc MacOS tại đây: Github - Offline Dev Tools.
Lựa chọn giữa Electron Forge và Electron Vite
Khi mới bắt đầu quá trình phát triển với Electron, tôi đã khởi tạo dự án với Electron Vite do đã quen với Vite và React. Mặc dù Electron Vite giúp tôi tiết kiệm thời gian khởi tạo dự án và tích hợp Tailwind CSS, nhưng tôi gặp một số khó khăn trong quá trình đóng gói và cài đặt thêm các gói thư viện. Do đó, tôi đã quyết định chuyển sang sử dụng Electron Forge để phát triển ứng dụng một cách thuận tiện hơn.
Khởi tạo ứng dụng mới với Electron Forge
Để khởi tạo một ứng dụng mới, bạn có thể sử dụng lệnh sau:
npm init electron-app@latest ten-du-an-cua-ban -- --template=webpack-typescriptTrong đó, bạn hãy thay ten-du-an-cua-ban bằng tên dự án của mình. Lựa chọn template là webpack-typescript để đảm bảo bạn sử dụng Webpack và TypeScript thay vì JavaScript. Mặc dù Electron Forge cũng hỗ trợ tạo dự án với Vite, nhưng hiện tại chưa hoàn thiện cho việc kết hợp với React.
Sau khi chạy lệnh trên, dự án sẽ được khởi tạo và bạn có thể chạy nó bằng lệnh npm start. Tại đây, bạn sẽ thấy các file cơ bản đã được tạo sẵn cho bạn.
Cài đặt React vào dự án
Để cài đặt React, bạn cần chạy các lệnh sau:
npm install --save react react-dom
npm install --save-dev @types/react @types/react-domTiếp theo, bạn có thể tạo file app.tsx trong thư mục src để làm root cho phần React của mình:
javascript
import './index.css';
import * as React from "react";
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<h1>Hello React</h1>
</React.StrictMode>
);Sau đó, bạn import file app.tsx vào src/renderer.ts.
Cuối cùng, bạn cần chỉnh sửa file src/index.html để thêm thẻ div có id là root, nơi phần React của bạn sẽ được render.
Cài đặt Tailwind CSS
Để sử dụng Tailwind CSS trong dự án, bạn cần cài đặt các gói phụ thuộc:
npm install tailwindcss autoprefixer --save-devKhởi tạo file cấu hình:
npx tailwindcss initMở file tailwind.config.js và điều chỉnh nội dung để Tailwind hiểu được các class sẽ được sử dụng ở đâu. Bạn cũng cần cài đặt postcss và postcss-loader để hỗ trợ Tailwind hoạt động mượt mà trong ứng dụng của bạn.
Kết luận
Trên đây, tôi đã hướng dẫn các bạn cách khởi tạo một dự án Electron với TypeScript, tích hợp React và Tailwind CSS. Hy vọng bài viết này sẽ giúp ích cho bạn trong quá trình phát triển ứng dụng của riêng mình. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại đặt câu hỏi nhé! Cảm ơn các bạn đã dành thời gian đọc bài viết và hãy ủng hộ bài viết gốc tại: Codeduthu.
source: viblo
