Use Juno with Astro
Explore how to create a Juno project developed with Astro.
Table of contents
Quickstart
Learn how to create a satellite, set up a collection, and save data from a Astro app.
1. 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.
2. Create an Astro app
Create a Astro app using the npm create
command:
npm create astro@latest myjunoapp
3. Install the Juno SDK core library
Use @junobuild/core
client library which provides a convenient interface for working with Juno from a Astro app.
Navigate to the Astro app and install @junobuild/core
.
cd myjunoapp && npm i @junobuild/core
4. Insert data from your app
In index.astro
, initialize the library with your public satellite ID.
Add an insert
function to persist a document.
<!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 { initJuno, setDoc } from "@junobuild/core";
// Initialize Juno
// TODO: Replace 'satelliteId' with your actual satellite ID
document.addEventListener(
"DOMContentLoaded",
async () => {
await initJuno({
satelliteId: "aaaaa-bbbbb-ccccc-ddddd-cai",
});
},
{ 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.
Hosting
If you're looking to deploy your existing app or website developed with Astro and Juno, this guide is for you.
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. Install Juno CLI and log in
Install the Juno command line interface by executing the following command in your terminal:
npm i -g @junobuild/cli
After the CLI is ready, log in to your satellite from your terminal to authenticate your device.
juno login
3. Deploy
Build your website:
npm run build
Deploy your project by running the following command from your project’s root folder:
juno deploy
When prompted to provide the name or path of the folder containing your built dapp files, answer dist
.
4. Open
Open your browser and you should see your deployed app or website.
juno open