Monday, March 8, 2021
Lưu Xuân Trường's Blog
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
Lưu Xuân Trường's Blog
No Result
View All Result

Frontity cơ bản phần I (Tạo và chạy dự án)

truongluu by truongluu
03/11/2020
in Frontity
Reading Time: 9min read
0 0
0
Frontity cơ bản phần I (Tạo và chạy dự án)
0
SHARES
116
VIEWS
Share on FacebookShare on Twitter

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à

  1. @frontity/mars-theme
  2. @frontity/twentytwenty-theme

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 🙂

Giao diện ban đầu của Frontity với @frontity/mars-theme

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é

Cấu trúc thư mục Frontity

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

Lỗi mợ rồi bà con

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

Dữ liệu được tải từ blog của mình rồi nha các bạn

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

Tags: FrontityreactJSServer side renderingSSR
Previous Post

React framework for WordPress

Next Post

Styled components trong ReactJS

truongluu

truongluu

Next Post
Styled components trong ReactJS

Styled components trong ReactJS

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Repetition is the mother of all skills

Tony Robbins

Quotations

About me

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

Recent Posts

  • Code push in React Native
  • What’s middleware? How does it work?
  • Styled components trong ReactJS
  • Frontity cơ bản phần I (Tạo và chạy dự án)
  • React framework for WordPress

Recent Comments

  • truongluu on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Hung on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Redux Saga phần III (Tips khi làm việc) - Lưu Xuân Trường's Blog on Quản lý trạng thái tải khi dùng redux-saga
  • Redux Saga phần II (Các khái niệm cơ bản) - Lưu Xuân Trường's Blog on Cheatsheets Non Blocking, Blocking Redux Saga
  • truongluu on Giới thiệu về UmiJS P4 (Server Side Rendering)

Archives

  • February 2021
  • January 2021
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • March 2020
  • February 2020
  • January 2020
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • April 2018
  • March 2018

Categories

  • AdonisJS
  • Angular
  • Arduino
  • Backend
  • Câu Hỏi Phỏng Vấn
  • CSS
  • Ebook
  • Frontend
  • Frontity
  • Góc Ngoài Lề
  • How to
  • IOS
  • IQ Test
  • Javascript
  • Kinh nghiệm
  • Kinh nghiệm làm việc
  • Máy chủ
  • Mobile
  • MongoDB
  • NestJS
  • NodeJS
  • NuxtJS
  • Plugins
  • React Native
  • React Native
  • ReactJS
  • Redis
  • Redux-Saga
  • RxJS
  • Tutorials
  • UmiJS
  • Uncategorized
  • VueJS
  • WordPress

Friends

Phu's blog
  • RxJS toàn tập (P1 giới thiệu RxJS là gì)

    RxJS toàn tập (P1 giới thiệu RxJS là gì)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

    0 shares
    Share 0 Tweet 0
  • Redux Saga phần I (Giới thiệu)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

    0 shares
    Share 0 Tweet 0
  • Một số câu hỏi phỏng vấn frontend developer

    0 shares
    Share 0 Tweet 0

About me

Lưu Xuân Trường

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

© 2020 https://luuxuantruong.info

No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ

© 2020 https://luuxuantruong.info

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In