How to work with data in Astro
Вставка
- Опубліковано 4 лип 2024
- Join early access for my Astro course! learnastro.dev
🔗 Key Links 🔗
- Github: github.com/coding-in-public/a...
- Json Placeholder: jsonplaceholder.typicode.com/
- Astro Endpoints: docs.astro.build/en/core-conc...
- Astro Content Collections: docs.astro.build/en/guides/co...
- Astro Import: docs.astro.build/en/guides/im...
---------------------------------------
📹 Related Videos 📹
- Astro Rendering: • Choosing between SSR, ...
- Content Collections: • Content Collections AP...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
1:19 Local frontmatter data
2:09 Fetch remote data
5:11 Import local files
9:40 Content Collections
17:02 Create JSON endpoints
23:54 Fundraiser
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: marketplace.visualstudio.com/...
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen... - Навчання та стиль
Your videos are helping me go from someone that was only able to deploy static htmls and relied heavily on tools like Webflow and Framer to actually make something meaningful, into someone that is able to make their first CRUDs and actual applications. I never thought I could, but Astro seems to fit my needs so well and without you teaching it I wouldn't be here at all. Thank you so much for the videos, can't wait for the course.
That’s so kind and so encouraging! And congrats! That’s a hard step to take. Great job!
Nice to read this comment! Fellow Webflower here, just learned NextJS but wanted something like Astro to leave Webflow 👌🏾
@@marvinkrI think Astro is the perfect transition tool from low/no code solutions. Unlike others in the space, Astro can scale to nearly anything you need, but can start small. A lot of the other tools in the space either start at too high a bar or don't scale like Astro. I'm biased, but man, just such a beautiful framework.
Great run through, thanks for sharing.
Glad you enjoyed it!
my favourite man posts about my favourite framework, excellent!
🙌
Man I hope a lot of people sign up for your course. I just finished the latest lesson in module 4 and then picked up the part about endpoints here. I really feel like I can do a lot with Astro now instead of feeling burned out and confused like I often do at the end of a 1 week course binge. You're doing great as a teacher. I look forward to more.
Thanks so much for the kind comment! Hoping the course continues to impress!
Great explanations!
Congrats!
Glad it was helpful!
La aportación que haces al compartir tus conocimientos es invaluable, gracias a esto he podido comprender un poco más de como funciona Astro, muchas gracias...
🙏 thanks, my friend!
Thx a lot for your passion.
Glad you enjoyed it!
Very amazing ❤🎉
Great stuff! A video on astro + cms would be awesome as well :) Ive fiddled with sanity, but not much content on astro + sanity on youtube.
Plans are in the works for that… 😉
I'm planning to use this exact combo for my upcoming website, so I'd be thrilled to see an up-to-date guide explaining it :)
Good video, very useful.
Glad it was helpful!
Very Chris 🎉🙏🏾🙏🏾
🙏
More tutorials on astro please....thanks
Many more on the way :)
Great video, concise and helpful! Is there a keyboard shortcut available for console ninja that lets you quickly console.log an output like you did for data2 at 2:48?
Glad to hear it! Yes, turbo console log
Hi, i'm problem with the import json
"Module '"e:/Codigos/Personal/000_Pruebas/07_Portafolio/adoption-mascot/src/data/animales"' can only be default-imported using the 'allowSyntheticDefaultImports' flagts(1259)
animales.json(1, 1): This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.".
I don't now the problem
Nice hat!
lol thx
Hi Chris, great video full of information as always, since you've worked on many astro projects before, i have a question for you, it would be of great help if you could share a bit of your knowledge:
What would be the most cost effective way to setup a membership (aka vip zone, aka member zone, aka paid zone) for an astro site?
It would need a simple login for the users to access certain static pages with the content, a payment zone and i believe a zone to manage their suscription.
I was thinking about stripe, but i would like to know if you had experience you could share on any of those or other platform that allowed you to manage everything about authorization, authentication and billing without a db or server (to reduce costs and setup time).
Thats all, thank you for your dev content, i am on your waitlist for your astro course, it would be great a module about setting up everything about monetization, can't wait to see it!
Currently, I'd probably use stripe? I haven't done it before, but that's likely the way I'd go. You could roll your own auth or use one of the many services out there. Hoping to include something like this eventually in my Astro course…but I'd need to build it out first and ensure it's a good approach.
@@CodinginPublic thank you for the reply! i am currently doing it with firebase + stripe
That's what I'd use! Perhaps supabase, but I think either is great!@@JamLaMermelada
Excellent video. One question: With astro, is it possible to load data dynamically? From what I understand, it only fetches the data at build time. Let's say I have an H1 on the page, which can be changed in a CMS by the user, how can I make the astro always fetch the value of this H1 dynamically, without having to rebuild the page? I wanted to have an endpoint pointing to an API and fetching page data. When the user changes the data in the CMS and simply reloads the page, the data (h1 for example) will already be updated. Is it possible to do this with Astro? Thank you for your video, greetings from Brazil.
Oi! Glad you enjoyed the video! Yes, completely possible! You just need to use the SSR mode. Here’s an explanation of the different rendering options available. I'd recommend SSR and then you can set individual routes to be prerendered where you know the content won't change. Hope this helps! ua-cam.com/video/aIHRjloFASU/v-deo.html
Does astro support yaml? I tried creating a data directory with a yaml file but it does not recognize it, but it recognizes json in the same directory.
Hmm. I’m actually not sure? If I use YAML, it’s always as a content collection data file (which Astro does support). Let me know if you find out!
@@CodinginPublic Thanks for the response!
I tried and I can't get it to work, I ended up using a JSON file instead. My use case is very simple, I just need a file which would hold icon names, so each line in the file would just be the key and value, no objects or arrays. I tried using the collections but maybe I'm doing something wrong because the only way collections worked for me was to create a single file for each icon, resulting in many files with a single line in them.
Any hints on an approximate release timeframe for the Astro course?
EDIT: right after commenting, I heard you mention “a few months”. Can’t wait, thanks!
Since it's just me on weekends and early mornings, it's taking a bit longer than I thought. Hoping it'll be worth the wait!
i appreciate a lot your videos, currently i am working in a side project with astro can you help me with authentication in your tutorials
do you have service in mind?
@@CodinginPublic supabase or pocketbase
df
?
I normally like the pacing of your videos, however, this one felt much too fast for my taste.
Good feedback; thanks, Christian!