Running dev environment for https://github.com/denoland/deno-astro-template Breaks when adding this plugin

[Mac-Mann]

As mentioned above, I am trying to run Qwik with deno and encountering some issues.

Mac-Mann@Mac-Mann-MacBook-Pro deno-astro-template % npm run dev

deno-astro-template@1.0.0 dev
deno run -A --unstable npm:astro dev

⚠️ The --unstable flag is deprecated and will be removed in Deno 2.0. Use granular --unstable-* flags instead.
Learn more at: https://docs.deno.com/runtime/manual/tools/unstable_flags
Cannot read properties of undefined (reading 'env')
Stack trace:
at Object.astro:config:setup (/Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/@QwikDev+astro@0.5.10/node_modules/@qwikdev/astro/src/index.ts, :68:17)
at runHookConfigSetup (file:///Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/astro@4.5.9/node_modules/astro/dist/integrations/index.js:148:60)
at async createContainerWithAutomaticRestart (file:///Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/astro@4.5.9/node_modules/astro/dist/core/dev/restart.js:77:28)
at async dev (file:///Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/astro@4.5.9/node_modules/astro/dist/cli/dev/index.js:26:10)
at async cli (file:///Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/astro@4.5.9/node_modules/astro/dist/cli/index.js:169:5)

I can still build a prod version of the template, but the dev environment complains because of the qwik plugin relying on Node heavily in its node_modules. I already have tried as well adding deno parameters to my command like --allow-env but to no avail. I am running Astro 4.5.9 and my deno adapter is updated to support Astro version 4.

[thejackshelton]

Hey @Mac-Mann! I can't say that I know much about deno 😅 . If I recall, does it aim for node compatibility?

We use node mainly at build time, and so it can still be deployed wherever. A piece of code that could possibly be the issue is https://github.com/QwikDev/astro/blob/main/libs/qwikdev-astro/src/index.ts#L209

If you could create a minimal reproduction of the issue. Also, if you'd like to take a stab at the fix, I've written a contributing guide. Let me know if anything isn't clear!

[thejackshelton]

It could be process.env

[Mac-Mann]

Hey @thejackshelton Thanks for reaching out!

I am happy to take a crack at fixing this issue as well as providing a minimal reproduction here.

One thing I will mention, it seems that your contribution doc is a bit outdated. Following the clear instructions, when getting to the early step of running pnpm dev the codebase complains because currently Command "dev" is not found/defined in the package.json.

I can still make progress despite this, but I wanted to mention this since it seems like a minor mistake that might have been overlooked. It seems that this is also the case for commands like build and preview

[thejackshelton]

One thing I will mention, it seems that your contribution doc is a bit outdated. Following the clear instructions, when getting to the early step of running pnpm dev the codebase complains because currently Command "dev" is not found/defined in the package.json.

Ah this is when you're in the Astro-Demo package 😅 . I guess you should be able to do this from the main repo.

We currently use pnpm workspaces, not sure if there is an easy way to do that, but maybe we can setup turborepo or something.

[thejackshelton]

I am happy to take a crack at fixing this issue as well as providing a minimal reproduction here.

You rock 😄

[siguici]

It could be process.env

Indeed, Deno does not support proccess.env.

In addition to this, Deno does not yet support Qwik, particularly the optimizer with Vite. I tried to run the basic Qwik starter under Deno but it failed.

When Deno supports Qwik, I will try to adapt this project to be supported on Deno.

[thejackshelton]

It could be process.env

Indeed, Deno does not support proccess.env.

In addition to this, Deno does not yet support Qwik, particularly the optimizer with Vite. I tried to run the basic Qwik starter under Deno but it failed.

When Deno supports Qwik, I will try to adapt this project to be supported on Deno.

Are you sure? I see a deno middleware here:
https://qwik.dev/docs/deployments/deno/#deno-middleware

Qwik is also one of the few frameworks mentioned in Deno's own survey
https://deno.com/blog/2024-survey-results-and-roadmap

This project seems to use deno and Qwik
https://qwik-sonner.deno.dev/

[siguici]

Are you sure? I see a deno middleware here: https://qwik.dev/docs/deployments/deno/#deno-middleware

Qwik is also one of the few frameworks mentioned in Deno's own survey https://deno.com/blog/2024-survey-results-and-roadmap

This project seems to use deno and Qwik https://qwik-sonner.deno.dev/

Yes. I know that it is possible to host Qwik projects under Deno. I even deployed the startup template that I named Busy. To do this, you must first build the project under Node or Bun to then be able to deploy it under Deno Deploy while Deno itself is a runtime. He should therefore be able to build Qwik without having to go through another runtime.

However, I will try to adapt @QwikDev/astro so that it is supported under Deno after the build (if necessary) then make a pull-request.

[thejackshelton]

Are you sure? I see a deno middleware here: https://qwik.dev/docs/deployments/deno/#deno-middleware
Qwik is also one of the few frameworks mentioned in Deno's own survey https://deno.com/blog/2024-survey-results-and-roadmap
This project seems to use deno and Qwik https://qwik-sonner.deno.dev/

Yes. I know that it is possible to host Qwik projects under Deno. I even deployed the startup template that I named Busy. To do this, you must first build the project under Node or Bun to then be able to deploy it under Deno Deploy while Deno itself is a runtime. He should therefore be able to build Qwik without having to go through another runtime.

However, I will try to adapt @QwikDev/astro so that it is supported under Deno after the build (if necessary) then make a pull-request.

Awesome! Let me know if you get stuck 👍

[siguici]

Awesome! Let me know if you get stuck 👍

I adapted the demo application (using Node) to Deno (#77) and it works perfectly.

I'll see what happens with Deno's Astro template.

[siguici]

I'll see what happens with Deno's Astro template.

Hey @Mac-Mann!
I just found the source of the issue:

In the package.json of this template, deno run is used for development scripts whereas @QwikDev/astro uses Node (with process.env) as mentioned by @thejackshelton.
Additionally, I noticed that you're using npm run dev (which implies Node) whereas if you want to work exclusively under Deno, you should use deno task dev.

To address the issue, you can run your scripts correctly under Node by replacing deno run -A --unstable npm:astro dev with astro dev in the package.json and it will work. You can then build and deploy your project under Deno.

Regarding adapting the project so that all scripts are supported by Deno, I will strive to propose a solution that is as minimal as possible to complement my pull request.

[thejackshelton]

Think it is good to close this issue?

I understand that the deno adapter is using a previous version of Astro, and there are issues there. It seems we can't use the new one either, but not sure that's exactly an issue on the end of the Qwik integration.

[Mac-Mann]

Hey @thejackshelton thanks for checking in here!

I actually have been reviewing the new deno demo that @siguici merged and I agree with your thoughts. Things are working, but not as great as I would hope. Using npm / astro instead of the deno runtime to run all various commands/operations feels very wonky. The workflow is a mess.

Also the 5.0.1 npm package used for @astrojs/deno has a peer dependencies issue since we aren't able to run "@astrojs/deno": "github:denoland/deno-astro-adapter",

 WARN  Issues with peer dependencies found
apps/deno-demo
└─┬ @astrojs/deno 5.0.1
  └── ✕ unmet peer astro@^3.1.4: found 4.5.2

When attempting to build/preview with npm or astro for running the package.json scripts, there's also errors completely unrelated to this project caused by other plugins like so:

astro build (works ✅ )
astro preview
13:14:12 [WARN] The currently selected adapter `@astrojs/deno` is not compatible with the image service "Sharp".
  Stack trace:
    at preview (file:///usr/local/lib/node_modules/astro/dist/core/preview/index.js:42:11)
    at async runCommand (file:///usr/local/lib/node_modules/astro/dist/cli/index.js:146:22)

Then you have to run npm run preview (running npm run build and deno task build will fail so have to use astro build 🙃)

I went ahead and closed this issue, since this is more wider reaching than just qwik not playing nice with Deno.
I think using an adapter like cloudflare workers makes much more sense for the time being given all of the issues Deno introduces.

[thejackshelton]

Hey @thejackshelton thanks for checking in here!

I actually have been reviewing the new deno demo that @siguici merged and I agree with your thoughts. Things are working, but not as great as I would hope. Using npm / astro instead of the deno runtime to run all various commands/operations feels very wonky. The workflow is a mess.

Also the 5.0.1 npm package used for @astrojs/deno has a peer dependencies issue since we aren't able to run "@astrojs/deno": "github:denoland/deno-astro-adapter",

 WARN  Issues with peer dependencies found
apps/deno-demo
└─┬ @astrojs/deno 5.0.1
  └── ✕ unmet peer astro@^3.1.4: found 4.5.2

When attempting to build/preview with npm or astro for running the package.json scripts, there's also errors completely unrelated to this project caused by other plugins like so:

astro build (works ✅ )
astro preview
13:14:12 [WARN] The currently selected adapter `@astrojs/deno` is not compatible with the image service "Sharp".
  Stack trace:
    at preview (file:///usr/local/lib/node_modules/astro/dist/core/preview/index.js:42:11)
    at async runCommand (file:///usr/local/lib/node_modules/astro/dist/cli/index.js:146:22)

Then you have to run npm run preview (running npm run build and deno task build will fail so have to use astro build 🙃)

I went ahead and closed this issue, since this is more wider reaching than just qwik not playing nice with Deno. I think using an adapter like cloudflare workers makes much more sense for the time being given all of the issues Deno introduces.

And it just so happens that cloudflare workers work in Qwik with v10 of the adapter 😄

[Mac-Mann]

@thejackshelton Yeah I saw, that is great news! 🙌🏻
I actually am now using the astro-qwik-cloudflare template to get started on my project. Very excited to get to use Qwik with cloudflare for that max performance 💯 🚀

Thanks for all the help here from both you and siguici!

[siguici]

Hi @Mac-Mann,

Thank you for your feedback. I'm not sure if you've already seen it, but Deno explains very clearly on their blog how to use Astro with Deno (which I recommend checking out to see if it fits your use case).

It's important to note that Deno is not a runtime intended for the frontend but rather the backend. Therefore, you need to first build your frontend code and then integrate it into your Deno backend.

Concerning the compatibility issue with Astro versions, as @thejackshelton has already mentioned, it's because the adapter uses an older version, but this doesn't pose a problem in itself.

Regarding the warning related to images, it's because server-side rendering adapters (like Deno) don't support image handling. Thank you for pointing that out; I'll address it in the demo.

In summary, you need to build your Astro application first, and then you can use the Astro Deno integration handler as mentioned in the README.md if you want to customize the server startup.

I hope this clarifies things!

[Mac-Mann]

Thanks @siguici ! Yeah that does clarify things. I appreciate you mentioning that article, I already had skimmed it prior to reaching out here.

I am still new to working with Deno, so I really appreciate the clarifications. I am working on a new side project, so I figured I would use this opportunity to better acquaint myself with some new tech like Qwik and Deno that I personally am a big fan of.

[siguici]

Yes, glad to hear that the explanations are helpful.

It's great to stay up-to-date, especially in our field. I strongly encourage you in this endeavor. I also appreciate new technologies like the ones you mentioned.

I might create templates to facilitate the use of Qwik and Astro, especially on Node, Deno, Bun, and Cloudflare if you're interested. In the meantime, I'll try to address the warnings you mentioned so that you can use the demo application to build your own.

Keep up the great work, and happy coding!

[Mac-Mann]

@siguici I definitely would be interested in helping creating new templates. I actually have been focusing as of late on being more proactive, and am very interested in helping with open source projects and initatives.

I have solely worked only on closed-source projects in my experience, and I am looking to actively change that by helping to contribute to technology I am passionate about and believe are the future (Astro, Deno, Qwik, Svelte, SolIdJS, etc.).

If I can help an any way, even if just being a tester/reviewer, I definitely would be happy to!

[thejackshelton]

@siguici I definitely would be interested in helping creating new templates. I actually have been focusing as of late on being more proactive, and am very interested in helping with open source projects and initatives.

I have solely worked only on closed-source projects in my experience, and I am looking to actively change that by helping to contribute to technology I am passionate about and believe are the future (Astro, Deno, Qwik, Svelte, SolIdJS, etc.).

If I can help an any way, even if just being a tester/reviewer, I definitely would be happy to!

Awesome! We would definitely appreciate the help haha.

#82 (comment)

Outlined some plans for the future in the comment above. Getting us setup on playwright and some initial tests would be pretty amazing.

This is the files Qwik City adds in their CLI, could be a good source of inspiration on what we need to add.
https://github.com/BuilderIO/qwik/tree/main/starters/features/playwright

Looks like @siguici has already added a deno starter kit 💪
https://github.com/QwikDev/astro?tab=readme-ov-file#starter-kits

While we're still on the topic of starter kits, some potential new ones could be:

• A regular Qwik + Astro starter kit (node)
• A bun starter kit
• An eslint + prettier starter kit