Bạn cần có những thứ sau được cài đặt và cấu hình sẵn trước khi bắt đầu cài đặt project: NodeJS, Visual Studio Code. Nếu chưa cài đặt, vui lòng xem hướng dẫn sau:

• Hướng dẫn cài đặt NodeJS

Ở thời điểm hiện tại, các công nghệ sử dụng đã phát hành các phiên bản mới với nhiều bổ sung, nâng cấp. Tuy nhiên, những nâng cấp đó không phải lúc nào cũng đảm bảo được tính tương thích ngược, dẫn đến việc cài đặt theo hướng dẫn này có thể gặp những lỗi phát sinh không cần thiết. Vì vậy, nên sử dụng các bộ cài đặt được cung cấp ở đây:

• Installers

Khi đã sẵn sàng cho quá trình cài đặt project, thực hiện lần lượt các bước 1 đến 3:

• Thêm thư mục project basewebfrontend vào Workspace trong Visual Studio Code
• Mở Git Bash tại thư mục project, chạy lệnh: npm i

• Mở Git Bash tại thư mục project (có thể sử dụng Windows Command Prompt, Visual Studio Code Terminal, Windows PowerShell,...), chạy lệnh: npm start

Sau lần chạy thành công đầu tiên, ở các lần chạy sau chỉ cần thực hiện bước 2

Bước này nhằm cài đặt và cấu hình một số extension hữu ích cho trải nghiệm và quá trình phát triển ứng dụng, ví dụ: tiện ích refactor, format code tự động, tiện ích làm việc với Git,... Vì vậy, bước này giữ vai trò cực kì QUAN TRỌNG và là BẮT BUỘC để giữ cho code base chuyên nghiệp, thống nhất xuyên suốt project.

Thực hiện lần lượt theo các bước sau:

• Mở Visual Studio Code (nếu chưa mở)

• Tuỳ chọn sử dụng một trong hai cách sau:

  • Mở Git Bash tại thư mục editor, chạy lệnh: ./vscode-extension-install.bash

  • Mở Visual Studio Code PowerShell tại thư mục editor, chạy lệnh:

  Get-Content extensions.txt | ForEach-Object {code --install-extension $_ --force}
  

• Trong Visual Studio Code, mở Command Palette bằng shotcut CTRL + SHIFT + P

• Trong Command Palette, nhập vào Open Settings và chọn Open Settings (JSON)

• Thêm các cấu hình sau vào file settings.json ở vị trí cuối file, điều này đảm bảo ghi đè các cấu hình tương ứng (nếu có) được định nghĩa trước đó

• Tab: src/component/tab
• Button: src/component/button
• Dialog: src/component/dialog

• Tips cấu hình IDEs