https://github.com/adamelliotfields/react-template

React template with Bun, Vite, Biome, and more ⚛️
https://github.com/adamelliotfields/react-template

react template

Last synced: 8 days ago
JSON representation

React template with Bun, Vite, Biome, and more ⚛️

• Host: GitHub
• URL: https://github.com/adamelliotfields/react-template
• Owner: adamelliotfields
• License: mit
• Created: 2024-03-07T22:50:21.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-03-30T21:08:16.000Z (10 months ago)
• Last Synced: 2024-03-31T21:39:29.312Z (10 months ago)
• Topics: react, template
• Language: TypeScript
• Homepage: https://aef.me/react-template
• Size: 341 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

• awesome - adamelliotfields/react-template - React template with Bun, Vite, Biome, and more ⚛️ (TypeScript)

README

        
# react-template

[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/adamelliotfields/react-template?devcontainer_path=.devcontainer/devcontainer.json&machine=basicLinux32gb)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://pr.new/adamelliotfields/react-template)

My personal template for React apps. Built for speed ⚡

## Features

- [**Bun**](https://github.com/oven-sh/bun) for dependencies and tests.

- [**Vite**](https://github.com/vitejs/vite) for builds.

- [**Tailwind**](https://github.com/tailwindlabs/tailwindcss) with [shadcn-ui](https://github.com/shadcn-ui/ui).

- [**Framer**](https://github.com/framer/motion) Motion for [Magic UI](https://github.com/magicuidesign/magicui) animations.

- [**SWC**](https://github.com/vitejs/vite-plugin-react-swc) for hot reloading.

- [**Biome**](https://github.com/biomejs/biome) for linting and formatting.

- [**Demo**](https://aef.me/react-template) 🚀

## Usage

```sh

# bun

export PATH="${HOME}/.bun/bin:${PATH}"

curl -fsSL https://bun.sh/install | bash

# clone

bunx degit adamelliotfields/react-template my-app

cd my-app

# install

bun i

# start

bun start

```

## Configuration

Use [`.env`](./.env) for settings like title and description; use `.env.local` for secrets (Git ignored).

Set `VITE_HOMEPAGE` to the production URL of your app.

### GitHub Pages SPA

I'm using the [spa-github-pages](https://github.com/rafgraph/spa-github-pages) technique to support client-side routing.

In [`404.html`](./public/404.html), `PATH_SEGMENTS` is set to `1` to keep the base path. This means if your app is hosted at `you.github.io/your-app`, the base path will be `/your-app`, which is what you want.

If this is your root `github.io` page or you're using a custom domain, set `PATH_SEGMENTS` to `0`.

For the actual routing, I use [wouter](https://github.com/molefrog/wouter).

## Deployment

Build runs on all PRs; deploy runs on pushes or merges to `main`. See [`build.yml`](./.github/workflows/build.yml).

## Dark Mode

A [minified](https://try.terser.org) [`theme.js`](./public/theme.js) is already in [`index.html`](./index.html).

In your app, use `ThemeProvider` and `useTheme` from [`Theme.tsx`](./src/components/Theme.tsx) (see [`Header.tsx`](./src/components/Header.tsx) for usage).

## Open Graph

To generate [`og.png`](./public/og.png), use Vercel's [OG Playground](https://og-playground.vercel.app):

  1. Set **Size** to `1.9:1`

  2. Set **Emoji Provider** to `Noto`

  3. Paste this template:

```html



  


    


      ⚛️

      React Template

    

    
A starter kit with Vite, TypeScript, Tailwind, and more.

  



```