Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonluca/vite-typescript-ssr-react
🚀 A Vite Typescript SSR React boilerplate!
https://github.com/jonluca/vite-typescript-ssr-react
express javascript react ssr typescript vite
Last synced: 13 days ago
JSON representation
🚀 A Vite Typescript SSR React boilerplate!
- Host: GitHub
- URL: https://github.com/jonluca/vite-typescript-ssr-react
- Owner: jonluca
- Created: 2021-05-16T18:36:45.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-03T19:43:20.000Z (about 1 year ago)
- Last Synced: 2024-10-18T11:57:42.583Z (25 days ago)
- Topics: express, javascript, react, ssr, typescript, vite
- Language: TypeScript
- Homepage: https://blog.jonlu.ca/posts/vite
- Size: 3.08 MB
- Stars: 342
- Watchers: 6
- Forks: 49
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - jonluca/vite-typescript-ssr-react - 🚀 A Vite Typescript SSR React boilerplate! (TypeScript)
README
# Vite Typescript React 18 SSR
[](https://github.com/jonluca/vite-typescript-ssr-react/actions/workflows/nodejs.yml)
A _blazingly_ modern web development stack. This template repo tries to achieve the minimum viable example for each of the following:
- [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/)
## Development
```
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
```
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
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.