Cần sự trợ giúp về lỗi sveltia cms với sveltekit

#4

Vấn đề có vẻ như từ file site/htdocs/static/admin/config.yml của bạn.

Bỏ 2 cái base_url + auth_endpoint đi xem sao.

backend:
  base_url: https://zsr.vercel.app
  auth_endpoint: oauth
2 Likes
#5

Em đã bỏ đi rồi nhưng nó không đăng nhập được vào github của em mà nó lại nhảy ra netlify. Trong khi đó, em sử dụng vercel nên không thể login vào netllify được, em có đọc tài liệu của sveltia cms thì nó có một tập lệnh oauth nhưng nó chỉ hoạt động được với netlify và Cloudflare. LIệu anh có cách nào để nó hoạt động với vercel không ạ? Em cảm ơn.

#6

If you are working with exotic package like sveltia and vercel, you should know how to do research with GOOGLE. Click HERE to learn more if your English is sufficient enough.

#7

There are two issues to consider:

  1. IT is not a frontend error but a backend error, specifically sveltia cms, not sveltekit. When deployed to vercel, the main page still works normally without syntax errors, but when accessing admin in sveltia cms, it cannot log in but shows api.netllify.com while it should redirect to github.
  2. The error here may be due to lack of oauth but I did not find anything related when searching google and sveltia cms is used as a substitute for netlify cms and decap cms.

I think we need to review this issue.

#8

Sorry…there’s nothing to consider. I’m starting to think that you’re a casual programmer who has neither studied computer science nor knows the basics. Reason: The 404 error means that something is missing - more precisely: 404 Not Found - and the error text is clear:

TypeError: Failed to fetch dynamically imported module: https://zsr.vercel.app/_app/immutable/entry/start.DtRM1Y6A.jsErroroauth:1…
Failed to load resource: the server responded with a status of 404 ()

“Failed to fetch” or “Failed to load” here simply means: NOT FOUND. You have to find out where and how to get the file mentioned. I don’t think anyone in this forum is looking for this file for you.

#9

The important thing is that what I need is to be able to log in to login and sveltia cms has nothing to do with sveltekit because it is configured in a separate folder. While the website content is in the src folder, sveltia cms is in the static folder. What I need is a file to display oauth and login to github with sveltia cms. Netlify has oauth support while vercel probably doesn’t or if it does, it needs a separate file. I know 404 means file not found, but what file is it specifically? On this forum, someone helped me remove two lines in the config.yml file and it fixed the 404 but it showed up as api.netlify.com, not login to github. While decap cms and sveltia cms or netlify cms also have the same login mechanism when configured with vercel, using oauth on github. Maybe you don’t understand what I said. In short, the 404 was fixed by support from a member on this forum but it caused another bug. You should see my code to understand the problem.

#10

I removed two lines in the config.yml file and it fixed the 404 but gave me the error that it’s not github’s oauth

backend:
base_url: https://zsr.vercel.app
auth_endpoint: oauth

#11

Mình vừa mới xem lại code github của bạn, có vẻ như bạn còn thiếu bước triển khai máy chủ backend để thực hiện việc xác thực.

Bạn xem kỹ lại hướng dẫn ở file: site/htdocs/oauth/README.md nhé.

Luồng của việc xác thực sau khi triển khai hoàn tất nó sẽ như này:

  • người dùng truy cập vào https://zsr.vercel.app/admin, và nhấn đăng nhập bằng github
  • trình duyệt sẽ chuyển hướng hoặc mở một cửa sổ mới đến trang xác thực của github
  • sau khi xác thực thành công, github sẽ gọi đến Authorization callback URL mà bạn đã đăng ký trước đó ở github app, thông tin mà github gọi đến callback url sẽ có mã ủy quyền tạm thời
  • phía máy chủ xác thực sẽ lấy mã ủy quyền tạm thời, cộng thêm thông tin về github app id và github app secret đăng ký trước đó, rồi gửi đến api https://github.com/login/oauth/access_token của github để lấy mã truy cập (access token)
  • từ access token đó, máy chủ xác thực có thể gọi các api khác của github để lấy thông tin của người dùng như user id, username, email, …
  • với nhưng thông tin người dùng trên, máy chủ xác thực tiến hành đăng nhập/đăng ký và kết thúc luồng
3 Likes
#12

Cảm ơn anh, em đã đọc phần readme của nó và em đã hiểu nguyên lý hoạt động mà anh mô tả nhưng em không thấy nó có cấu hình cho vercel và em cũng không biết làm thế nào để kết hợp với nó trong một repo anh ạ vì nó chỉ hỗ trợ netlify và Cloudflare.

Trên Cloudflare thì chỉ cần deploy lên là được nhưng trong netlify thì không cần vì nó đã hỗ trợ oauth rồi.

Còn trên vercel thì em không tìm thấy cách cấu hình oauth cho nó.

Em tạo oauth apps và thiết lập biến môi trường trên vercel rồi ạ. Nhưng em không biết thay đổi nó để chạy với vercel.

#13

chào anh, em đã cấu hình được oauth rồi. Tuy nhiên, em gặp khó ba phần sau:

  1. Em không biết làm thế nào để thay đổi đường dẫn của url callback ví dụ: Mặc định nó là localhost:5173/callback nhưng em muốn thay bằng localhost:5173/oauth/callback thì làm cách nào ạ? Em đã cấu hình đường dẫn cho nó nhưng nó không có tác dụng gì cho lắm.
  2. Em có cài đặt sveltia cms dưới dạng library packages nhưng em đang gặp khó trong việc import và tích hợp nó vào website của em vì trước đây em sử dụng api endpoint để lấy giữ liệu từ nó. Tuy nhiên, website load khá chậm nên em tối ưu nó bằng cách tạo một file sveltia.config.js ở thu mục gốc của dự án. nhưng khi em truy cập trang admin thì nó không load được giữ liệu của file config. Theo anh, em nên làm thế nào để giải quyết nó ạ?

Em cảm ơn.

#14

Em đã khắc phục được lỗi sveltia cms và oauth rồi ạ, tuy nhiên, em gặp lỗi là khi tích hợp google adsense và google analytics thì website load khá chậm ạ.

Cụ thể:

  • khi em đưa adsense thì mọi thứ vẫn hoạt động tốt nhưng khi thêm mã analytics thì nó lại chậm đi. Mặc dù, em đã làm đủ mọi cách nhưng không giải quyết được vấn đề.
  • Dù cho mạng khỏe thì website load khá chậm và mãi mới load xong ạ.
  • Performance của nó khá tệ vì em có dùng Lighthouse để kiểm tra thì số điểm khá thấp và thực tế là khi truy cập thì nó load chậm
  • Thậm chí, thỉnh thoảng nó không hoạt động đúng cách nữa ạ.

Theo anh, em nên làm cách nào để giải quyết vấn đề này ạ? Em cảm ơn. Website của em đã thay domain là zeppreader.com

Để đảm bảo anh có thể xem lại repo ạ, nó ở thu mục site/htdocs:
repo của em

1 Like
#15

Mình thấy bạn có thêm thuộc tính async vào để cải thiện nhưng nó chỉ giúp cho việc tải mã google ads diễn ra đồng thời, nếu mã tải xong trước các tài nguyên khác nó vẫn có thể được thực thi ngay lập tức, làm chậm quá trình tải trang.

Bạn có thể cân nhắc thử các cách dưới đây thử xem:

  • dùng defer cho thẻ script thay vì async => giúp mã được thực thi sau cùng sau khi tài nguyên được tải hết
  • thay đổi importance="high" thành importance="low" hoặc bỏ hẳn nếu không cần phân tích dữ liệu ngay khi trang tải
  • thêm thẻ <link> để thiết lập kết nối sớm với máy chủ Google
    <link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://pagead2.googlesyndication.com">
1 Like
#16

thanks anh nhiều ạ, em sẽ thử ạ, em muốn hỏi thêm là theo anh, em có nên
chia nhỏ code ra để tối ưu code hơn không ạ? Tức là em có ý định là tách adsense và analytics ra thành hai components khác nhau ạ. Em sợ là nó nặng web nên nó load chậm với nó ảnh hưởng tới Performance nữa ạ.

#17

Mình nghĩ nó không ảnh hướng mấy đâu. :v

1 Like
#18

Cảm ơn anh, mọi thứ hoạt động tốt, tuy nhiên, tốc độ load nó không thay đổi quá nhiều, khi tải trang lần đầu vẫn bị chậm, Performance không hoàn toàn tốt như lúc mới build web. Em nghĩ là nên chuyển host thôi, hiện tại em đang dùng vercel, em cũng chưa biết nên tìm cái nào thay thế phù hợp hơn nữa.

#19

Sau 77 - 49 cách optimize bao gồm loại bỏ bớt tailwindcss, bỏ bớt js thừa, chỉ giữ lại cái gì cần thiết nhưng vẫn đảm bảo website hoạt động ổn định thì kết quả em thu được là

  • website load nhanh với tốc độ khủng khiếp, phải nói là nhanh với tốc độ bàn thờ luôn ạ, 1s là đã load xong, Lighthouse cái nào cũng 100 điểm hết.
  • Có điều thỉnh thoảng khi load lại lần đầu, cụ thể em có dùng một browser khác để truy cập vào web của em thì thỉnh thoảng nó bị lag hay khựng lại một chút
  • Em cũng đã thử sử dụng chrome ẩn danh để vào thì thỉnh thoảng nó lại hiện ra thông báo là website không an toàn, mặc dù ssl vẫn có. Khi bấm vào tiếp tục truy cập thì phải đợi khoản 1 phút thì mới load xong.

Với những vấn đề trên, em muốn dời hosting đi chỗ khác, deploy ở nơi khác. Anh tư vấn giúp em, ngoài vercel thì còn cái nào phù hợp với yêu cầu website của em không ạ, chứ như này thì nó bị gián đoạn truy cập thì khả năng khó lên top lắm ạ, thanks anh nhiều. nói chung, website của em chắc là không toang đâu nhỉ? Em lo quá. Mong nó sớm lên top để chạy adsense.

#20

Tải trang nhanh hơn thì phần lớn là tác dụng của bộ đệm (disk cache). Nếu có dữ liệu trong bộ đệm thì mở trang web nhanh hơn, nếu chưa thì phải tải lại tài nguyên từ máy chủ của Vercel.

Dịch vụ miễn phí của Vercel nó không giữ cho web của bạn luôn hoạt động 24/7, mà nó sẽ “ngủ” nếu sau một thời gian không nhận được yêu cầu mới.
=> đây là nguyên nhân khiến việc tải trang bị khựng.

Những hosting miễn phí theo mình biết thì đều như vậy, bạn có thể tham khảo hosting khác ở đây.

“lên top”, “không toang” là sao bạn nhỉ?

Để kiếm tiền quảng cáo từ một trang web thì cần phải có nội dung cuốn hút người xem, giao diện bắt mắt, dễ dàng sử dụng. Đánh giá đến từ Lighthouse chỉ mang tính chất tham khảo, nó hoàn toàn không phản ánh được những điều này.

Hiện tại mình không thấy được gì từ trang web của bạn.
Thứ nhất, nó nói về một ứng dụng Zeppos gì đó, là ứng dụng của một bên khác, vậy thì tại sao lại không vào thẳng trang web của họ mà phải thông qua trang của bạn?
Thứ hai, đối tượng mà ứng dụng này nhắm đến là những người khiếm thị, mà còn là những người khiếm thị có điều kiện tiếp cận công nghệ. => Người dùng đã ít lại càng ít.
Và cuối cùng, không biết bạn làm trang web này một mình hay có ai khác làm cùng không, bởi vì theo mình thấy giao diện bị vỡ css rất nhiều, phối màu cũng không được ổn cho lắm.

2 Likes
#21

Em có một vài thắc mắc, website của em build bằng sveltekit, tailwindcss, sveltia cms nên anh có thể tư vấn cụ thể vì em thấy nhiều web khác cũng chạy vercel nhưng không bị khựng hay có cảnh báo là website không an toàn. Ví dụ: svelte.dev còn về phần website của em:

  • Việc website bị toang Ý em nói ở đây là sợ nó bị sập ý vì em có thử truy cập lại vào những thời điểm khác nhau thì có lần nó bị không load được web mặc dù mạng khỏe, có khi nó hiển thị cảnh báo là website không an toàn khi em bấm vào tiếp tục truy cập thì hơn 1 phút nó mới load được.

  • em kiểm tra bằng Lighthouse và google PageSpeed Insights thì mọi thứ ở mức 100 điểm cho bốn mục như accessibility, SEO, Best practices, Performance thì mọi thứ là đều 100 điểm. Em có test bằng screen reader như NVDA và webaim.org thì đều tốt.

  • Thứ nhất, website này nói về zepp os screen reader một trình đọc màn hình của người khiếm thị và đây là website chính thức của dự án, cái repo mà em chia sẻ cho anh thì đó là repo của apps và website đó luôn. Website của nó nằm trong thu mục site/htdocs thì ở thu mục chính của repo là cái apps của nó.

  • Mục đích của dự án này là nhắm đến người dùng khiếm thị có điều kiện thấp khi tiếp cận với smart watch vì thường thì máy tính, smart phone v…v thì đều có screen reader nhưng smart watch thì chỉ có mấy dòng cao cấp chạy weare os hay apple watch thì mới có screen reader thôi. Em cũng chưa tìm được bạn nào có kỹ năng làm về ứng dụng cho zepp os cả.

  • VỀ WEBSITE CỦA EM:

  • Em tự làm chứ nếu đi thuê thì tiền đâu mà thuê anh. Tiền ít thì tự làm là khỏe nhất. AI nó support khá ổn, nhiều nguồn tư liệu để tham khảo, mặc dù mất thời gian nhưng ít ra nó vẫn là của mình chứ không phải là của người khác, em mất hai tuần để code tính cả học thì là 1 tháng. nhưng fixbug phải mất gần 1 năm vì kiến thức của em hạn hẹp và vẫn phải phụ thuộc vào google và AI khá nhiều.

  • Những cái khó thì em hỏi trên diễn đàn nhưng sveltekit ở VIệt Nam hiếm người học nhưng em học nó là vì nó có cảnh báo a11y.

  • Về css thì do em không nhìn được mà phải nhờ vào scrreen reader nên dù cho AI nó code hộ thì cũng chẳng biết là đẹp hay sấu. Bố cục HTML thì em hình dung trong đầu mà viết thôi. Nếu đi thuê thì website cũng không có a11y đâu vì anh biết đó, 90% website ở VN đều không accessible tức là các assistive technology như screen reader không thể tiếp cận hay đọc được nội dung trên đó. Thế nên, đi thuê là không khả thi còn đương nhiên nhiều tiền thì lại là cái khác.

Tóm lại, em làm một mình và nếu tìm được người hỗ trợ thực sự có tâm với dự án thì rất khó vì đây là dự án đặc thù. Nếu anh có đóng góp cho nó thì giúp em cũng được, dù sao thì em phải phụ thuộc vào screen reader nên đòi hỏi là phải đẹp thì không thể. Quan trọng là những người dùng có nhu cầu đặc biệt như người khuyết tật có thể tiếp cận được thì là tốt lắm rồi. Các công ti ở VN chắc gì đã biết WCAG mà nếu có biết thì cũng chẳng quan tâm vì đó không phải là khách hàng tiềm năng của họ.

NẾu anh có nhã ý thì có thể sửa giúp em css với vì dù sao em cũng chạy adsense cho nó. Phải adsense thì mới có kinh phí mà duy trì dự án lâu dài chứ nguồn mở thôi là chưa đủ. Chỉ có những người cùng cảnh ngộ thì mới hiểu nhau được chứ còn nếu không đặt mình vào họ thì khó có thể hiểu. Về host thì anh cứ liệt kê danh sách ra em dễ dàng chọn chứ đọc tài liệu thì dễ bị ngộ độc lý thuyết lắm mà chatgpt thì nó cũng cho em rất nhiều sự lựa chọn về hosting nhưng em muốn hỏi ý kiến người có chuyên môn hơn thay vì phải nhờ AI.

#22

Mình không dám đảm bảo trang web của bạn sẽ lọt top tìm kiếm hay có thể kiếm được khoản tiền ổn định từ nó, nhưng mình có thể giúp bạn trong quá trình xây dựng trang web. Giúp thì mình cũng chỉ giúp bạn tìm sửa lỗi, hỗ trợ cải thiện giao diện, chứ mình sẽ không động vào phần code của bạn.
Để tiện trao đổi thì bạn có thể qua discord tìm mình với username sherly1001 hoặc link mời này.

1 Like
#23

Thanks anh, em rất vui khi nhận được sự giúp đỡ từ anh. Dạo này mấy anh em trên diễn đàn svelte Việt Nam không mấy hoạt động xôi nổi nên em cũng không biết tìm sự trợ giúp ở đâu cả, may quá. Code của em thì em nghĩ là không vấn đề gì vì nó vẫn chạy tốt, đúng với ý của em. Nhưng cái css thì em bó tay. Có gì anh em mình chao đổi thêm nha.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?