Skip to content

Commit de0ee67

Browse files
jfgrissomjfgrissom
authored
Add Typescript based React Starter Template (#61)
* feat: add typescript based react starter * chore: remove unnecessary comments
1 parent 2780d51 commit de0ee67

24 files changed

+512
-0
lines changed

‎src/constants/templates.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ export const TEMPLATES: Template[] = [
4040
description: APP_DESCRIPTION_EXAMPLE,
4141
kind: 'app'
4242
},
43+
{
44+
framework: `React`,
45+
key: `react-ts-starter`,
46+
type: 'Starter',
47+
description: APP_DESCRIPTION_STARTER,
48+
kind: 'app'
49+
},
4350
{
4451
framework: `React`,
4552
key: `react-workshop`,

‎templates/react-ts-starter/.eslintrc.cjs

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: {browser: true, es2020: true},
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:react/recommended',
7+
'plugin:react/jsx-runtime',
8+
'plugin:react-hooks/recommended'
9+
],
10+
ignorePatterns: ['dist', '.eslintrc.cjs', 'public/workers'],
11+
parserOptions: {ecmaVersion: 'latest', sourceType: 'module'},
12+
settings: {react: {version: '18.2'}},
13+
plugins: ['react-refresh'],
14+
rules: {
15+
'react/jsx-no-target-blank': 'off',
16+
'react-refresh/only-export-components': ['warn', {allowConstantExport: true}]
17+
}
18+
};

‎templates/react-ts-starter/.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
public/workers
27+
28+
target

‎templates/react-ts-starter/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Juno: React Starter Kit
2+
3+
```sh
4+
npm create juno@latest -- --template react-starter
5+
```
6+
7+
> 🧑‍🚀 **Seasoned dev?** Delete this file. Have fun!
8+
9+
![A screenshot of the starter kit](https://raw.githubusercontent.com/junobuild/create-juno/main/screenshots/screenshot-starter.png)
10+
11+
A starter kit developed for [Juno](https://juno.build) using [React](https://react.dev/).
12+
13+
## ✨ Links & Resources
14+
15+
- Looking to get started with Juno? Check out the [documentation](https://juno.build).
16+
- Have a look at [React](https://react.dev/) for question regarding the templates.
17+
- Got questions, comments or feedback? [Join our discord](https://discord.gg/wHZ57Z2RAG) or [OpenChat](https://oc.app/community/vxgpi-nqaaa-aaaar-ar4lq-cai/?ref=xanzv-uaaaa-aaaaf-aneba-cai).
18+
19+
## 🧞 Commands
20+
21+
All commands are run from the root of the project, from a terminal:
22+
23+
| Command | Action |
24+
| :--------------- | :---------------------------------------------------------- |
25+
| `npm install` | Installs dependencies |
26+
| `npm run dev` | Starts frontend dev server at `localhost:5173` |
27+
| `juno dev start` | Quickstart the local development emulator (requires Docker) |
28+
| `npm run build` | Build your production site to `./dist/` |
29+
| `juno deploy` | Deploy your project to a Satellite |
30+
31+
## 🚀 Launch
32+
33+
Explore this [guide](https://juno.build/docs/add-juno-to-an-app/create-a-satellite) to launch your Satellite into orbit via Juno's [administration console](https://console.juno.build).

‎templates/react-ts-starter/docker-compose.yml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
services:
2+
juno-satellite:
3+
image: junobuild/satellite:latest
4+
ports:
5+
- 5987:5987
6+
volumes:
7+
- juno_satellite:/juno/.juno
8+
- ./juno.dev.config.js:/juno/juno.dev.config.js
9+
- ./target/deploy:/juno/target/deploy/
10+
11+
volumes:
12+
juno_satellite:

‎templates/react-ts-starter/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Juno / React Starter</title>
8+
9+
<!-- Font preloads -->
10+
<link
11+
rel="preload"
12+
href="/fonts/jetbrainsmono-regular.woff2"
13+
as="font"
14+
type="font/woff"
15+
crossorigin />
16+
<link
17+
rel="preload"
18+
href="/fonts/jetbrainsmono-bold.woff2"
19+
as="font"
20+
type="font/woff"
21+
crossorigin />
22+
</head>
23+
<body class="bg-white dark:bg-black">
24+
<div id="root"></div>
25+
<script type="module" src="/src/main.tsx"></script>
26+
</body>
27+
</html>

‎templates/react-ts-starter/juno.dev.config.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {defineDevConfig} from '@junobuild/config';
2+
3+
/** @type {import('@junobuild/config').JunoDevConfig} */
4+
export default defineDevConfig(() => ({
5+
satellite: {
6+
collections: {
7+
datastore: [],
8+
storage: []
9+
}
10+
}
11+
}));

‎templates/react-ts-starter/package.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "react-starter",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10+
"preview": "vite preview",
11+
"format": "prettier --write .",
12+
"postinstall:copy-auth": "node -e \"require('fs').cpSync('node_modules/@junobuild/core/dist/workers/', './public/workers', {recursive: true});\"",
13+
"postinstall": "npm run postinstall:copy-auth"
14+
},
15+
"dependencies": {
16+
"@junobuild/core": "^0.1.0",
17+
"@junobuild/core-standalone": "^0.1.0",
18+
"react": "19.0.0",
19+
"react-dom": "19.0.0"
20+
},
21+
"devDependencies": {
22+
"@junobuild/config": "^0.0.17",
23+
"@junobuild/vite-plugin": "^0.0.19",
24+
"@types/react": "19.0.0",
25+
"@types/react-dom": "19.0.0",
26+
"@vitejs/plugin-react": "^4.3.4",
27+
"autoprefixer": "^10.4.20",
28+
"eslint": "^9.16.0",
29+
"eslint-plugin-react": "^7.37.2",
30+
"eslint-plugin-react-hooks": "^5.1.0",
31+
"eslint-plugin-react-refresh": "^0.4.16",
32+
"postcss": "^8.4.49",
33+
"prettier": "^3.4.2",
34+
"tailwindcss": "^3.4.16",
35+
"vite": "^6.0.3",
36+
"vite-plugin-node-polyfills": "^0.22.0"
37+
},
38+
"overrides": {
39+
"vite-plugin-node-polyfills": {
40+
"vite": "^6.0.0"
41+
}
42+
}
43+
}

‎templates/react-ts-starter/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {}
5+
}
6+
};

‎templates/react-ts-starter/public/fonts/jetbrainsmono-bold.woff2

92.4 KB
Binary file not shown.

‎templates/react-ts-starter/public/fonts/jetbrainsmono-regular.woff2

90 KB
Binary file not shown.

‎templates/react-ts-starter/public/juno_illustration.svg

Lines changed: 1 addition & 0 deletions
Loading

‎templates/react-ts-starter/public/robots.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
User-agent: *
2+
Allow: /

‎templates/react-ts-starter/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎templates/react-ts-starter/src/App.tsx

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { initSatellite } from '@junobuild/core'
2+
import { useEffect } from 'react'
3+
import { Article } from './components/Article'
4+
import { Background } from './components/Background'
5+
import { Footer } from './components/Footer'
6+
import { Hero } from './components/Hero'
7+
8+
function App() {
9+
useEffect(() => {
10+
(async () =>
11+
await initSatellite({
12+
workers: {
13+
auth: true
14+
}
15+
}))()
16+
}, [])
17+
18+
return (
19+
<div className="relative isolate min-h-[100dvh]">
20+
<main className="mx-auto max-w-screen-2xl py-16 px-8 md:px-24 tall:min-h-[calc(100dvh-128px)]">
21+
<h1 className="dark:text-white text-5xl md:text-6xl font-extrabold md:pt-16">
22+
Welcome to Juno
23+
</h1>
24+
25+
<div className="w-full max-w-2xl mt-8 grid grid-cols-2 gap-8">
26+
<Hero
27+
href="https://juno.build/docs/add-juno-to-an-app/create-a-satellite"
28+
ariaLabel="Discover how to create a Satellite and deploy your project to production">
29+
Not yet live? Launch your Satellite
30+
</Hero>
31+
32+
<Article
33+
href="https://juno.build/docs/category/build"
34+
ariaLabel="Open the list of features for building apps on Juno's website"
35+
title="Documentation">
36+
Learn how Juno works and explore the official docs.
37+
</Article>
38+
39+
<Article
40+
href="https://juno.build/docs/miscellaneous/local-development"
41+
ariaLabel="Open Juno's documentation for guidance on setting up local development"
42+
title="Local Development">
43+
Set up your environment and start building locally.
44+
</Article>
45+
46+
<Article
47+
href="https://juno.build/docs/miscellaneous/github_actions"
48+
ariaLabel="Open the guide to setting up GitHub Actions for Juno"
49+
title="Continuous Integration">
50+
Automate your deployment with GitHub Actions.
51+
</Article>
52+
53+
<Article
54+
href="https://discord.gg/wHZ57Z2RAG"
55+
ariaLabel="Join Juno's Discord channel for questions or to share the fun"
56+
title="Community">
57+
Come say hi to our amazing Discord community. ❤️
58+
</Article>
59+
</div>
60+
</main>
61+
62+
<Footer />
63+
64+
<Background />
65+
</div>
66+
)
67+
}
68+
69+
export default App

‎templates/react-ts-starter/src/components/Article.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { FC, PropsWithChildren } from 'react'
2+
3+
interface ArticleProps extends PropsWithChildren {
4+
href: string,
5+
ariaLabel: string,
6+
title: string
7+
}
8+
9+
export const Article: FC<ArticleProps> = (props) => {
10+
const { href, ariaLabel, children, title } = props
11+
return (
12+
<a
13+
href={href}
14+
rel="noreferrer noopener"
15+
target="_blank"
16+
aria-label={ariaLabel}
17+
className="group flex flex-col py-3 px-4 border-black dark:border-lavender-blue-500 dark:hover:border-white border-[3px] rounded bg-white dark:bg-black dark:text-white transition-all shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_#7888FF] dark:hover:shadow-[8px_8px_0px_#fff] hover:bg-lavender-blue-200 dark:hover:bg-black active:bg-lavender-blue-400 dark:active:bg-black active:shadow-none active:translate-x-[8px] active:translate-y-[8px]">
18+
<h4 className="sm:text-lg break-words font-extrabold mb-1 dark:text-lavender-blue-500 group-hover:dark:text-white">
19+
{title}
20+
</h4>
21+
22+
<p className="mb-2">{children}</p>
23+
</a>
24+
)
25+
}

‎templates/react-ts-starter/src/components/Background.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { FC } from 'react'
2+
3+
export const Background: FC = () => {
4+
return (
5+
<div className="hidden sm:block fixed top-[400px] tall:top-2/4 right-0 -z-10 translate-x-2/4 lg:translate-x-1/3 -translate-y-2/4 min-h-[800px] h-[100dvh] aspect-square">
6+
<img
7+
src="./juno_illustration.svg"
8+
role="presentation"
9+
loading="lazy"
10+
alt="An astronaut floating in space around planet Juno orbited by satellites, stars in the background."
11+
/>
12+
</div>
13+
)
14+
}

0 commit comments

Comments
 (0)