Juno: React Example

npm create juno@latest -- --template react-ts-example

🧑‍🚀 Seasoned dev? Delete this file. Have fun!

An example developed for Juno using React.

🧭 Getting Started

To start experimenting with Juno locally, follow these steps:

1. Start the local development emulator

This will spin up the Juno backend locally:

juno emulator start

2. Create a Satellite

Your project needs a Satellite. Create one to connect your app for development.

👉 Open the Juno Console

3. Configure your project

Set the Satellite ID in your juno.config.ts file:

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

export default defineConfig({
  satellite: {
    ids: {
      development: "<DEV_SATELLITE_ID>",
    },
    source: "dist",
    predeploy: ["npm run build"],
  },
});

4. Start the frontend dev server

In another terminal, start your app's dev server:

npm run dev

5. Create a Datastore collection

This template is a note-taking app, so it needs a notes collection. Create it in the Datastore.

👉 Go to Datastore

6. Create a Storage collection

Likewise, it needs a collection named images to save assets. Create it in the Storage.

👉 Go to Storage

You only need to do this once. After that, you're ready to build 🚀

🛰️ Production

Ready to go live?

Just like for local development, you'll need to create a Satellite — but this time on the mainnet Console. Then, update your juno.config.ts with the new Satellite ID:

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

export default defineConfig({
  satellite: {
    ids: {
      development: "<DEV_SATELLITE_ID>",
      production: "<PROD_SATELLITE_ID>",
    },
    source: "dist",
    predeploy: ["npm run build"],
  },
});

Check out the full guides in the docs.

✨ Links & Resources

• Looking to get started with Juno? Check out the documentation.
• Have a look at React for question regarding the templates.
• Got questions, comments or feedback? Join our discord or OpenChat.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts frontend dev server at localhost:5173
juno emulator start	Quickstart the local development emulator
npm run build	Build your production site to ./dist/
juno hosting deploy	Deploy your project to a Satellite

🚀 Launch

Explore this guide to launch your Satellite into orbit via Juno's administration console.