Trong bài Frontity cơ bản phần I, mình sẽ giới thiệu các bước cơ bản để tạo một dự án mới với Frontity cli, qua bài này các bạn có thể tự mình tạo được 1 webapp xịn xò hổ trợ SSR giống như ai, mà không tốn nhiều thao tác, chỉ dựa trên site WordPress đã có sẵn của các bạn và một vài cấu hình cơ bản. Bài này mình chia ra các mục nhỏ sau:
- Tạo dự án mới với Frontity cli
- Cấu trúc thư mục Frontity
- Một số cấu hình cơ bản
Tạo dự án mới với Frontity cli
Đầu tiên các bạn chạy dòng lệnh như bên dưới để bắt đầu tạo 1 dự án với Frontity
|
1 |
npx frontity create my-app |
Bài này mình sẽ áp dụng Frontity cho website hiện tại của mình luôn là https://luuxuantruong.info. Đối với site WordPress của các bạn thì các bạn đổi lại link config theo site của mình nhé
Trong quá trình đợi chạy thì có 1 thao tác là chọn starter theme cho ứng dụng. Hiện tại Frontity đang cung cấp cho mình 2 bộ theme lúc cài là
Các bạn có thể coi thông tin chi tiết của từng theme trên official document nhé, ngoài 2 theme mặc định thì Frontity cũng được đóng góp từ cộng đồng nhiều theme khác, và các bạn sau khi có kiến thức rõ về Frontity cũng sẽ xây được bộ theme cho cộng đồng rồi, ứng với mổi theme sẽ cho thiết lập kèm theo tương ứng. Sau khi chạy xong lệnh tạo dự án với Frontity sẽ hiện thị màn hình thông báo
Mình sẽ chạy lệnh cd frontity-luuxuantruong-info && npm frontity dev để coi kết quả như thế nào nhé
Truy cập đường link http://localhost:3000 để xem kết quả nhé các bạn, thật tuyệt vời vậy là mình có đã có 1 ứng dụng web SSR chỉ trong vòng 1 nốt nhạc 🙂
Tiếp tục, giờ mới là bước chúng ta bắt đầu khám phá về Frontity coi xem nó có gì nào
Cấu trúc thư mục Frontity
Xem qua cấu trúc thư mục của một ứng dụng Frontity nhé
Một ứng dụng Frontity gồm có
- build: thư mục được build từ Frontity lúc chạy
- node_modules: package node
- packages: hiện tại là packages/mars-theme, nó chứa toàn bộ mã của ứng dụng, bao gồm những file js và styles của ứng dụng
- fontity.settings.js: toàn bộ cấu hình của frontity sẽ nằm ở file này và ở bài này mình sẽ giới thiệu về cấu hình api để liên kết tới WordPress site
- package.json: file này là quản lý các gói node và phiên bản cần trong ứng dụng.
Phần này mình sẽ chú ý nhiều tới file frontity.settings.js
Một số cấu hình cơ bản
Mình xem qua thông tin trong file cấu hình frontity.settings.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
const settings = { "name": "frontity-luuxuantruong-info", "state": { "frontity": { "url": "https://test.frontity.org", "title": "Test Frontity Blog", "description": "WordPress installation for Frontity development" } }, "packages": [ { "name": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Nature", "/category/nature/" ], [ "Travel", "/category/travel/" ], [ "Japan", "/tag/japan/" ], [ "About Us", "/about-us/" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, { "name": "@frontity/wp-source", "state": { "source": { "api": "https://test.frontity.org/wp-json" } } }, "@frontity/tiny-router", "@frontity/html2react" ] }; export default settings; |
Hiện tại thì mọi thứ được quản lý trong Frontity đều là package, theme cũng là package, contact form 7 cũng là package. Currently, everything I know in Frontity is package :), Tạm thời các bạn chỉ coi qua cơ bản về phần cấu hình. Frontity sẽ cung cấp 1 số cấu hình trong file frontity.settings.js và chỉ tập trung tại file này nên nó focus 100% vào WordPress là đều hiển nhiên, rất thuận tiện cho người mới bắt đầu chỉ cần nắm 1 ít kiến thức về ReactJS và js cơ bản là đã làm được một dự án đơn giản với Frontity rồi
- name: tên của ứng dụng
- state: trạng thái ban đầu của ứng dụng, với trạng thái này chúng ta có thể truy xuất được giá trị trong toàn bộ ứng dụng
- packages: là mảng cái gói sử dụng trong ứng dụng, nơi khai báo các package và cấu hình liên quan (mặc định sẽ có 1 số packages bắt buộc kèm theo từ Frontity (@frontity/tiny-router, @frontity/html2react)
Bài viết này mình quan tâm với 2 package là: @frontity/wp-source và @frontity/mars-theme
- @frontity/wp-source: cho mình thiết lập cấu hình việc kết nối tới WordPress từ Frontity (phần này mình chỉ coi về cấu hình lấy dữ liệu từ WordPress)
- @fontity/mars-theme: tải dữ liệu và tùy chỉnh theme theo ý mình với styled-component
Để tùy chình api liên kết tới WordPress, các bạn chỉ cần chỉnh lại cấu hình của package @frontity/wp-source theo như bên dưới
|
1 2 3 4 5 6 7 8 |
{ "name": "@frontity/wp-source", "state": { "source": { "api": "https://luuxuantruong.info/wp-json" } } }, |
Mình chỉnh lại state.source.api là đường dẫn tới api bên site của mình: https://luuxuantruong.info/wp-json, các bạn chỉnh lại theo site của mình và chạy lại ứng dụng nhé
Và xem kết quả nhé các bạn
Bị lỗi các bạn ơi, nhưng đừng lo lắng hãy đọc xem thông báo là lỗi gì nào, mình đang thấy mã lỗi 401 chưa được xác thực từ postTypeArchive.ts, mình có thể đoán là có vẻ nhưng cái api WordPress của mình đang giới hạn quyền đọc từ postType rồi :). Lỗi này là do mình có cài plugin security bên site WordPress và tắt luôn cái wp api luôn rồi
Bước tiếp theo mình sẽ chỉnh lại menu tiêu đề cho webapp
Để chỉnh phần title, description và link trang chủ của ứng dụng, mình chỉnh phần sau trong frontity.settings.js
|
1 2 3 4 5 6 7 8 9 10 |
const settings = { "name": "frontity-luuxuantruong-info", "state": { "frontity": { "url": "https://luuxuantruong.info", "title": "Lưu Xuân Trường's Blog", "description": "Blog chia sẻ kinh nghiệm về lập trình" } }, } |
Và mổi lần thay đổi file cấu hình mình chạy lại ứng dụng với lệnh: npx frontity dev
Chỉnh lại menu theo đúng với menu mà mình cần hiển thị, phần này các bạn chỉnh ở mục menu của theme @frontity/mars-theme. Xem theo ví dụ bên dưới
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
{ "packages": [ { "name": "@frontity/mars-theme", "state": { "theme": { "menu": [ [ "Home", "/" ], [ "Backend", "/category/backend/" ], [ "Frontend", "/category/frontend/" ], [ "Tutorials", "/category/tutorials/redux-saga/" ], [ "How to", "/category/how-to/" ], [ "Liên hệ", "/lien-he" ] ], "featured": { "showOnList": false, "showOnPost": false } } } }, } |
Tùy theo mổi site mà các bạn sẽ cấu hình lại menu tương ứng cho ứng dụng của bạn
