Skip to main content

React TypeScript Example

This project is a note-taking app template built with React, TypeScript, and Tailwind CSS, designed to demonstrate integration with Juno for app development. It showcases authentication, data storage, and file storage using Juno's Satellite container.

You can scaffold it using the following command, or browse the source code:

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

Source: github.com/junobuild/create-juno/templates/react-ts-example


Folder Structure

react-ts-example/
├── public/ # Static assets
├── src/
│ ├── components/ # React UI components (Auth, Table, Modal, Banner, etc.)
│ ├── types/ # TypeScript types (e.g., note.ts)
│ ├── App.tsx # Main app component
│ ├── main.tsx # React entry point
│ └── index.css # Tailwind CSS styles
├── juno.config.ts # Juno Satellite configuration
├── package.json # Project dependencies and scripts
├── vite.config.ts # Vite build configuration
├── README.md # User-facing documentation
└── ... # Other config and build files

Key Features

  • Juno Integration: Uses Juno's Satellite for authentication, Datastore, and Storage.
  • Authentication: Login/logout flow.
  • Notes Collection: Users can create, view, and delete notes (text, with optional file URL).
  • Images Collection: Supports file storage for images.
  • Responsive UI: Built with Tailwind CSS for modern styling.
  • Banner: Warns if the Satellite is not configured for local development.

Main Components

  • App.tsx: Initializes Juno Satellite, renders the main layout, and wraps content in authentication.
  • Banner.tsx: Shows a warning if the Satellite ID is missing in local dev.
  • Auth.tsx: Provides authentication context and login/logout UI.
  • Table.tsx: Displays the list of notes from the Datastore.
  • Modal.tsx: Handles note creation and editing.
  • Delete.tsx: Handles note deletion.
  • Footer.tsx, Background.tsx, Button.tsx, etc.: UI and utility components.

Data Types

  • NoteData (src/types/note.ts):
export interface NoteData {
text: string;
url?: string;
}
export type Note = Doc<NoteData>;

How to Run

  1. Install dependencies:
npm install
  1. Start Juno local emulator:
important

Requires the Juno CLI to be available npm i -g @junobuild/cli

juno dev start
  1. Create a Satellite for local dev:
  1. Create required collections:
  1. Start the frontend dev server (in a separate terminal):
npm run start

Juno-Specific Configuration

  • juno.config.ts: Defines Satellite IDs for development/production, build source, and predeploy steps.

Production Deployment

  • Create a Satellite on the Juno Console for mainnet.
  • Update juno.config.ts with the production Satellite ID.
  • Build and deploy:
npm run build
juno deploy

Notes

  • The app is intended as a starting point for Juno-based projects.
  • All logic is in JavaScript and React function components.
  • The app is fully client-side (Server Side Rendering is not supported yet) and interacts with Juno via the Satellite container.

Juno SDK Used

The following functions from @junobuild/core are used in this example:

FunctionPurpose/DescriptionWhere Used (File/Component)Juno Docs/Source Reference
initSatelliteInitialize Juno Satellite containersrc/App.tsxInitialization
authSubscribeSubscribe to auth state changessrc/components/Auth.tsxSubscription
signInSign in usersrc/components/Login.tsxSign-in
signOutSign out usersrc/components/Logout.tsxSign-out
listDocsList documents in a collectionsrc/components/Table.tsxList documents
setDocCreate or update a documentsrc/components/Modal.tsxAdd a document
deleteDocDelete a documentsrc/components/Delete.tsxDelete a document
uploadFileUpload a file to storagesrc/components/Modal.tsxUpload asset
deleteAssetDelete a file from storagesrc/components/Delete.tsxDelete asset