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

#1

Chào anh em

Mình có một vài thắc mắc cần anh em giúp. Mình đang build một website viết bằng sveltekit và tích hợp sveltia cms. Tuy nhiên, khi truy cập vào phần admin theo đường dẫn url của website là zsr.vercel.app/admin hay ở localhost:5173/admin/index.html và chọn vào phần login to github thì nó báo là lỗi 404. Khi mình kiểm tra console thì nó báo là

Erroroauth:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://zsr.vercel.app/_app/immutable/entry/start.DtRM1Y6A.jsErroroauth:1 Request unavailable in the network panel, try reloading the inspected page Failed to load resource: the server responded with a status of 404 ()

, khi mình đóng lại thì nó hiện ra thông báo là Authentication aborted. Please try again. Mình rất mong anh em có thể giúp mình, cảm ơn.

Đây là repo của dự án anh em có thể click vào đây, vị trí lưu trữ Website nằm trong thu mục /site/htdocs

#2
  1. You are running a server on localhost, port 5173. Can you show us the index.html file in the admin directory?
  2. The error message is so clear that all you have to do is google the number 404 and you will know what to do.
#3

It could be due to an oauth configuration error or something else. The index file is in the static/admin/ directory. I checked and found it is due to oauth error but I don’t know how to fix it and make sure it is compatible with sveltekit and sveltia cms.

#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
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?