Skip to main content

Use Juno with Astro

Easily set up and deploy your Astro project with Juno.

What would you like to do?

Options

Choose Build if you want to build a full featured rich application.

Choose Hosting if you just want to deploy a website.

Build​

This guide provides quickstart instructions for integrating Juno and building a feature-rich application. It also includes guidance on developing in a production environment or locally.

1. Choose Your Integration Path​

You can either start a new project or add Juno to an existing app.

Path A: Start a new project with a template​

Create a new project using the Juno quickstart CLI:

npm create juno@latest -- --template astro-starter

Path B: Integrate Juno into an existing Astro app​

Navigate to your existing app directory and install Juno SDK:

cd your-existing-app
npm i @junobuild/core

2. Configure Datastore​

Production Path​

To use production, set up a satellite and new collection:

  • Create a new satellite in the Juno's console.
  • After your project is ready, create a collection in your datastore, which we'll call demo, using the console.

Local Development Path​

To develop with the local emulator, add a collection named demo within the juno.dev.config.mjs file.

import { defineDevConfig } from "@junobuild/config";

/** @type {import('@junobuild/config').JunoDevConfig} */
export default defineDevConfig(() => ({
  satellite: {
    collections: {
      db: [
        {
          collection: "demo",
          read: "managed",
          write: "managed",
          memory: "stable",
          mutablePermissions: true
        }
      ]
    }
  }
}));
  • Once set, run the local emulator:
juno dev start
  • If the Juno admin CLI (required for deployment, configuration, or to run the emulator) is not installed yet, run:
npm i -g @junobuild/cli

3. Insert data from your app​

In index.astro, initialize the library with the satellite ID you have created for production, or use jx5yt-yyaaa-aaaal-abzbq-cai if you are developing locally with the emulator.

Add an insert function to persist a document.

index.astro
<!doctype html>
<html lang="en">
  <body>
    <main>
      <button id="insert">Insert a document</button>
      <p>Document persisted key: <output id="result"></output></p>

      <script>
        import { initSatellite, setDoc } from "@junobuild/core";

        // Initialize Juno's satellite
        document.addEventListener(
          "DOMContentLoaded",
          async () => {
            await initSatellite();
          },
          { once: true }
        );

        // Insert a document in Juno's datastore
        const insert = async () => {
          const doc = await setDoc({
            collection: "demo",
            doc: {
              key: `my-key-${new Date().getTime()}`,
              data: {
                hello: "world"
              }
            }
          });

          const result = document.querySelector("#result");
          if (result !== null) {
            result.textContent = doc.key;
          }
        };

        document
          .querySelector("#insert")
          ?.addEventListener("click", insert, { passive: true });
      </script>
    </main>
  </body>
</html>

5. Start the app​

Start the app, go to http://localhost:4321/ in a browser, click "Insert a document", and you should see the data successfully persisted in your satellite on the blockchain.

What's Next: Going Live

If you used the local development path, make sure to configure your collections in the Juno console for production. Once you're ready to deploy your app for others to access, continue to the Deployment guide.

Hosting​

If you already have an Astro app, you're all set — proceed to the Deployment section to upload your project to production.

Otherwise, you can bootstrap a new website using the Juno template by running the following command:

npm create juno@latest -- --template astro-starter

Once you’re set up, continue to the Deployment section below.

Deployment​

Use this guide to deploy your project to production — directly to a smart contract on mainnet.

1. Set up a satellite​

If you haven't created a satellite yet, go ahead and create a new one in the Juno's console.

2. Deploy​

Once your satellite is up and running, you can proceed with uploading your app to your smart contract.

You can either automate your deployment with GitHub Actions (recommended) or deploy manually from your device. Choose your method: