deno-docs icon indicating copy to clipboard operation
deno-docs copied to clipboard

Astro tutorial

Open dnbkr opened this issue 1 year ago • 2 comments

Hi

With the release of Deno 2 with full npm compatibility, it's unclear to me how to best use Astro with Deno. There is/was an astro integration for deno but it hasn't seen a commit for four months and has unaddressed issues mentioning problems with support for newer Astro features.

However, with npm/node compatibility, perhaps I should use the astro-supported node integration and just run it with deno instead? I gave it a go, and dev mode seems to start up at least, but when you build the app the dist bundle doesn't run in deno.

I think the lack of clarity is also one of ownership - does Deno support Astro? Or should Astro be supporting Deno? The Astro logo was prominently featured around the marketing for the Deno 2 release but what does that mean?

Looking forward to trying out Deno with Astro!

dnbkr avatar Oct 15 '24 13:10 dnbkr

Absolutely agree, an Astro tutorial is in the pipeline!

thisisjofrank avatar Oct 21 '24 16:10 thisisjofrank

@astro.md

So there's a great Astro tutorial! But the Dinosaurs bit won't work because Astro now requires getStaticPaths() to generate all the possible paths for dynamic routes.

[dinosaur].astro needs the following code:

---
import data from "../../data/dinosaurs.json";
const { dinosaur } = Astro.params;
const dinosaurObj = data.find((item) => item.name.toLowerCase() === dinosaur);
if (!dinosaurObj) return Astro.redirect("/404");
const { name, description } = dinosaurObj;

export async function getStaticPaths() {
  return data.map((dinosaur) => ({
    params: { dinosaur: dinosaur.name.toLowerCase() },
    props: { dinosaur },
  }));
}
---

<h1>{name}</h1>

<p>
  {description}
</p>

@lambtron please fix?

janzheng avatar Feb 21 '25 01:02 janzheng

It would also be best to make the create script for Deno actually utilize a deno.jsonc file, perhaps with at least the NPM scripts (Deno tasks) moved there instead of package.json.

mintydev789 avatar May 24 '25 20:05 mintydev789

Also, I believe there is an error in the Deno Astro docs. It says we need to run the command deno init --npm astro@latest, but then the code below has this command at the top: deno -A npm:create-astro@latest, which I believe is the correct command actually. The first command in the paragraph above that code block should be fixed.

mintydev789 avatar May 29 '25 10:05 mintydev789

Oh, no, I think it's actually supposed to be the deno init --npm astro@latest command, as that's closer to the NPM command in the Astro docs. I have opened up a PR for that.

mintydev789 avatar May 29 '25 11:05 mintydev789