···11+# React + TypeScript + Vite
22+33+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
44+55+Currently, two official plugins are available:
66+77+- [@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
88+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
99+1010+## Expanding the ESLint configuration
1111+1212+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
1313+1414+- Configure the top-level `parserOptions` property like this:
1515+1616+```js
1717+export default tseslint.config({
1818+ languageOptions: {
1919+ // other options...
2020+ parserOptions: {
2121+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
2222+ tsconfigRootDir: import.meta.dirname,
2323+ },
2424+ },
2525+})
2626+```
2727+2828+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
2929+- Optionally add `...tseslint.configs.stylisticTypeChecked`
3030+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
3131+3232+```js
3333+// eslint.config.js
3434+import react from 'eslint-plugin-react'
3535+3636+export default tseslint.config({
3737+ // Set the react version
3838+ settings: { react: { version: '18.3' } },
3939+ plugins: {
4040+ // Add the react plugin
4141+ react,
4242+ },
4343+ rules: {
4444+ // other rules...
4545+ // Enable its recommended rules
4646+ ...react.configs.recommended.rules,
4747+ ...react.configs['jsx-runtime'].rules,
4848+ },
4949+})
5050+```
···11-# vite-starter
22-33-Getting started with pnpm/npm/yarn create:
44-55-```
66-# npm
77-npm create @vlcn.io@latest your-app-name
88-# pnpm
99-pnpm create @vlcn.io your-app-name
1010-# yarn
1111-yarn create @vlcn.io your-app-name
1212-```
1313-1414-Or, just cloning directly:
1515-1616-```
1717-git clone git@github.com:vlcn-io/vite-starter.git
1818-npm install
1919-npm dev
2020-```
2121-2222-What you get:
2323-- A client ([App.tsx](https://github.com/vlcn-io/vite-starter/blob/main/src/App.tsx)) that runs a SQLite DB
2424-- A server ([server.js](https://github.com/vlcn-io/vite-starter/blob/main/server.js)) that the client (or many clients) can sync to when online
2525-- A database schema file ([schemas/main.mjs](https://github.com/vlcn-io/vite-starter/blob/main/src/schemas/main.mjs) that is automatically migrated to (auto migration is still in beta! You may find yourself needing to wipe the DB (clear indexeddb or change dbid) when using auto-migrate) on server and client restart.
2626-2727-2828-Demo Video: [](https://www.youtube.com/watch?v=QJBQLYmXReI)
2929-3030-Deployed Scaffolding: https://vite-starter2.fly.dev/ Try it out! Collaborate between all your devices.
-25
mast-react/etc/litefs.yml
···11-# This directory is where your application will access the database.
22-fuse:
33- dir: "/app/dbs"
44-55-# This directory is where LiteFS will store internal data.
66-# You must place this directory on a persistent volume.
77-data:
88- dir: "/var/lib/litefs"
99-1010-exec:
1111- - cmd: "pnpm run start"
1212-1313-# The lease section specifies how the cluster will be managed. We're using the
1414-# "consul" lease type so that our application can dynamically change the primary.
1515-#
1616-# These environment variables will be available in your Fly.io application.
1717-lease:
1818- type: "consul"
1919- advertise-url: "http://${HOSTNAME}.vm.${FLY_APP_NAME}.internal:20202"
2020- candidate: ${FLY_REGION == PRIMARY_REGION}
2121- promote: true
2222-2323- consul:
2424- url: "${FLY_CONSUL_URL}"
2525- key: "litefs/${FLY_APP_NAME}"
-45
mast-react/fly.toml
···11-# fly.toml app configuration file generated for mast-react on 2023-06-01T10:35:47-04:00
22-#
33-# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
44-#
55-66-app = "vite-starter2"
77-primary_region = "iad"
88-kill_signal = "SIGINT"
99-kill_timeout = "5s"
1010-1111-[experimental]
1212- auto_rollback = true
1313-1414-[env]
1515- PORT = "8080"
1616- PRIMARY_REGION = "iad"
1717-1818-[[mounts]]
1919- source = "dbs_machines"
2020- destination = "/app/dbs"
2121- processes = ["app"]
2222-2323-[[services]]
2424- protocol = "tcp"
2525- internal_port = 8080
2626- processes = ["app"]
2727-2828- [[services.ports]]
2929- port = 80
3030- handlers = ["http"]
3131- force_https = true
3232-3333- [[services.ports]]
3434- port = 443
3535- handlers = ["tls", "http"]
3636- [services.concurrency]
3737- type = "connections"
3838- hard_limit = 250
3939- soft_limit = 200
4040-4141- [[services.tcp_checks]]
4242- interval = "15s"
4343- timeout = "2s"
4444- grace_period = "1s"
4545- restart_limit = 0