Skip to content

Commit

Permalink
Add demo + fix bundler
Browse files Browse the repository at this point in the history
  • Loading branch information
wkozyra95 committed Feb 17, 2025
1 parent 2ff713b commit 84c3e55
Show file tree
Hide file tree
Showing 77 changed files with 8,494 additions and 481 deletions.
8 changes: 4 additions & 4 deletions .github/workflows/demos_check.yml
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ jobs:
run: pnpm install --frozen-lockfile

- name: Lint code
working-directory: ./demos
run: pnpm run lint
working-directory: ./demos/vite-demo
run: pnpm run build && pnpm run lint

- name: Typecheck code
working-directory: ./demos
run: pnpm run typecheck
working-directory: ./demos/vite-react-router-demo
run: pnpm run build && pnpm run typecheck
28 changes: 23 additions & 5 deletions demos/vite-demo/.gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,24 @@
.DS_Store
/node_modules/
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# React Router
/.react-router/
/build/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
130 changes: 40 additions & 90 deletions demos/vite-demo/README.md
Original file line number Diff line number Diff line change
@@ -1,100 +1,50 @@
# Welcome to React Router!
# React + TypeScript + Vite

A modern, production-ready template for building full-stack React applications using React Router.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
Currently, two official plugins are available:

## Features
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

- 🚀 Server-side rendering
- ⚡️ Hot Module Replacement (HMR)
- 📦 Asset bundling and optimization
- 🔄 Data loading and mutations
- 🔒 TypeScript by default
- 🎉 TailwindCSS for styling
- 📖 [React Router docs](https://reactrouter.com/)
## Expanding the ESLint configuration

## Getting Started
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

### Installation
- Configure the top-level `parserOptions` property like this:

Install the dependencies:

```bash
npm install
```

### Development

Start the development server with HMR:

```bash
npm run dev
```

Your application will be available at `http://localhost:5173`.

## Building for Production

Create a production build:

```bash
npm run build
```

## Deployment

### Docker Deployment

This template includes three Dockerfiles optimized for different package managers:

- `Dockerfile` - for npm
- `Dockerfile.pnpm` - for pnpm
- `Dockerfile.bun` - for bun

To build and run using Docker:

```bash
# For npm
docker build -t my-app .

# For pnpm
docker build -f Dockerfile.pnpm -t my-app .

# For bun
docker build -f Dockerfile.bun -t my-app .

# Run the container
docker run -p 3000:3000 my-app
```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```

The containerized application can be deployed to any platform that supports Docker, including:

- AWS ECS
- Google Cloud Run
- Azure Container Apps
- Digital Ocean App Platform
- Fly.io
- Railway

### DIY Deployment

If you're familiar with deploying Node applications, the built-in app server is production-ready.

Make sure to deploy the output of `npm run build`

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
```
├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── build/
│ ├── client/ # Static assets
│ └── server/ # Server-side code
```

## Styling

This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.

---

Built with ❤️ using React Router.
3 changes: 0 additions & 3 deletions demos/vite-demo/app/routes.ts

This file was deleted.

13 changes: 0 additions & 13 deletions demos/vite-demo/app/routes/home.tsx

This file was deleted.

23 changes: 0 additions & 23 deletions demos/vite-demo/app/welcome/logo-dark.svg

This file was deleted.

23 changes: 0 additions & 23 deletions demos/vite-demo/app/welcome/logo-light.svg

This file was deleted.

Loading

0 comments on commit 84c3e55

Please sign in to comment.