#How to build static website with only Deno, without package.json?

8 messages · Page 1 of 1 (latest)

unkempt locustBOT
#

Hi @radiant temple. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To build a static Astro website with Deno without using package.json, you can use Deno Deploy. Here's how to do it:

Building and Deploying an Astro Static Site with Deno

You can deploy a static Astro site using Deno in two main ways:

Option 1: Using Deno Deploy CLI

  1. Install the Deno Deploy CLI:

    deno install -gArf jsr:@deno/deployctl
    
  2. Build your Astro site (you'll need to do this on a machine with npm initially to generate the static files)

  3. Once you have the built files, you can serve them using Deno's file server:

    cd dist && deployctl deploy jsr:@std/http/file-server
    

Option 2: Running on Your Own Deno Server

If you want to run the site on your own server with just Deno:

  1. Copy your built Astro project (the dist directory) onto your server

  2. Start the application with the following command:

    deno run -A jsr:@std/http/file-server dist
    

This command uses Deno's standard HTTP file server to serve your static files without needing package.json or npm.

Using GitHub Actions for Deployment

For a more automated approach, you can use GitHub Actions to build and deploy your site to Deno Deploy:

#
  1. Create a .github/workflows/deploy.yml file with the following content:
    name: Deploy
    on: [push]
    jobs:
      deploy:
        name: Deploy
        runs-on: ubuntu-latest
        permissions:
          id-token: write
          contents: read
        steps:
          - name: Clone repository
            uses: actions/checkout@v4
          - name: Install dependencies
            run: npm ci
          - name: Build Astro
            run: npm run build
          - name: Upload to Deno Deploy
            uses: denoland/deployctl@v1
            with:
              project: my-deno-project # replace with your project name
              entrypoint: jsr:@std/http/file-server
              root: dist
    

Note that this approach still requires npm for the build step, but the deployment and serving are handled by Deno.

Learn more about Deno deployment

If you're looking to completely eliminate npm/package.json from your workflow, you would need to manually build the Astro site or use a different static site generator that's compatible with Deno's ecosystem.

I hope this helps! Let me know if you need more specific information about any part of this process.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@radiant temple Kapa.ai is still learning and improving, please let me know how I did by reacting below.

radiant temple
#

@unkempt locust Im asking because in one project im getting error:
[ERR_UNSUPPORTED_ESM_URL_SCHEME] Only file and data URLs are supported by the default ESM loader. Received protocol 'astro'

unkempt locustBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I understand you're encountering an error related to ESM URL schemes in your Astro project. This error occurs when Node.js is trying to import from a URL with the astro: protocol, which it doesn't recognize by default.

This error typically happens when you're trying to use Astro-specific imports like astro:assets or other built-in Astro modules in an environment that doesn't properly process these imports.

Common causes and solutions:

1. Using astro: imports outside of Astro components

When you use imports like import { Image } from "astro:assets", these are special imports that are processed by Astro's build system. If you're trying to use these in a regular JavaScript file that's not being processed by Astro, you'll get this error.

// This works in .astro files
import { Image } from "astro:assets";

2. JS dependencies in config file not being processed by Vite

In Astro 5, there was a breaking change where JS dependencies in the config file are no longer processed by Vite:

In Astro 4.x, locally-linked JS dependencies were able to use Vite features like import.meta.glob when imported by the Astro config file. Astro 5 updates the Astro config loading flow to ignore processing locally-linked JS dependencies with Vite.

JS dependencies in config file are no longer processed by Vite

3. Running Astro with Deno without proper adapter

If you're trying to run Astro with Deno, you need to make sure you're using the Deno adapter:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import deno from '@deno/astro-adapter';

export default defineConfig({
  output: 'server',
  adapter: deno(),
});

4. Document/Window not defined errors

#

If you're also seeing errors about document or window not being defined, this is because Astro components run on the server. You need to move browser-specific code to client-side scripts:

---
// Server-side code here
---

<html>
  <!-- Your page here -->
  <script>
    // Client-side code with document/window access here
  </script>
</html>

Common error messages - document is not defined

Since you mentioned you're trying to use Deno without package.json, make sure you're properly setting up the Deno environment for Astro. The error suggests that your environment isn't correctly processing the Astro-specific import protocols.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: