Base

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2021": true
+  },
+  "extends": ["plugin:react/recommended", "prettier", "eslint:recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "react-hooks"],
+  "rules": {
+    "no-use-before-define": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  }
+}

.gitignore

@@ -1,24 +1,46 @@
-# Logs
-logs
+lib-cov
+*.seed
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+*.csv
+*.dat
+*.out
+*.pid
+*.gz
+*.swp
+
+pids
+logs
+results
+tmp
+
+# Build
+public/css/main.css
+
+# Coverage reports
+coverage
 
+# API keys and secrets
+.env
+
+# Dependency directory
 node_modules
-dist
-dist-ssr
-*.local
+bower_components
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
+# Editors
 .idea
+*.iml
+
+# OS metadata
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+Thumbs.db
+
+# Ignore built ts files
+dist/**/*
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.nvmrc

@@ -0,0 +1 @@
+v19

.prettierignore

@@ -0,0 +1,5 @@
+dist
+build
+node_modules
+.github
+.yarn

README.md

@@ -1,30 +1,63 @@
-# React + TypeScript + Vite
+# Vite Typescript React 18 SSR
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+[![Node CI](https://github.com/jonluca/vite-typescript-ssr-react/actions/workflows/nodejs.yml/badge.svg)](https://github.com/jonluca/vite-typescript-ssr-react/actions/workflows/nodejs.yml)
 
-Currently, two official plugins are available:
+A _blazingly_ modern web development stack. This template repo tries to achieve the minimum viable example for each of the following:
 
-- [@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
+![video](video.gif)
 
-## Expanding the ESLint configuration
+- [React 18](https://reactjs.org/blog/2022/03/29/react-v18.html)
+- [Typescript 4.9](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/)
+- [Vite with Vite SSR](https://vitejs.dev/guide/ssr.html)
+- [GitHub Actions](https://github.com/features/actions)
+- [Tailwind CSS](https://tailwindui.com/)
+- [Prettier](https://prettier.io/) & [ESLint](https://eslint.org/)
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Development
 
-- Configure the top-level `parserOptions` property like this:
+```
+yarn
+yarn dev:server
+```
+
+That should start the server. It will open to http://localhost:7456.
+
+If you'd like to just develop the UI, you can use
+
+```bash
+yarn
+yarn dev:client
+```
+
+To start the native vite client.
+
+## Building
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
 ```
+yarn build
+yarn serve
+```
+
+yarn build will create the assets in `dist` - a `client` and `server` folder. Serve will run `dist/server.js` with Node, but feel free to change this to use Docker or some other process manager to suit your deployment needs.
+
+## Files
+
+`eslintrc.js` - a barebones eslint configuration for 2021, that extends off of the recommended ESLint config and prettier
+
+`.prettierrc.js` - the prettier config
+
+`index.html` - the vite entrypoint, that includes the entry point for the client
+
+`postcss.config.cjs` - CommonJS module that defines the PostCSS config
+
+`server.ts` - The barebones Express server with logic for SSRing Vite pages
+
+`tailwind.config.cjs` - CommonJS module that defines the Tailwind config
+
+`tsconfig.json` - TypeScript configuration
+
+`vite.config.ts` - Vite configuration
+
+## CI
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+We use GitHub actions to build the app. The badge is at the top of the repo. Currently it just confirms that everything builds properly.