https://github.com/grawl/vite-react-ts-ssg
https://github.com/grawl/vite-react-ts-ssg
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/grawl/vite-react-ts-ssg
- Owner: Grawl
- Created: 2022-11-29T07:41:05.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-17T00:51:44.000Z (about 2 years ago)
- Last Synced: 2024-05-17T01:50:58.887Z (about 2 years ago)
- Language: JavaScript
- Size: 403 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Template: [Vite](https://vitejs.dev) + [React](https://reactjs.org) + [TypeScript](https://typescriptlang.org) + SSG
[](https://snyk.io/test/github/Grawl/vite-react-ts-ssg?targetFile=package.json)
[](https://codeclimate.com/github/Grawl/vite-react-ts-ssg/maintainability)
[](https://github.com/Grawl/vite-react-ts-ssg/actions/workflows/build.yml)
[](https://nodejs.org)
[](https://classic.yarnpkg.com)
Nothing useless, built from scratch
> **[SSG](https://dev.to/anshuman_bhardwaj/what-the-heck-is-ssg-static-site-generation-explained-with-nextjs-5cja)** – stands for **S**erver **S**ide **G**eneration, or **S**tatic **S**ite **G**enerator – is a technique to generate static HTML + JS + CSS out of `.tsx` / `.ts` / preprocessors sources
# Create a project using this template
```
npx degit Grawl/vite-react-ts-ssg
```
You can add desirable folder name in the end of that command to copy template into it
# `yarn dev` to start developing
You can copy `.env.example` as `.env` and change development server port
# `yarn build` to get static files
You will get `dist/static/` folder with all static assets you can deploy anywhere
# Origin
> This template is [`playground/ssr-react`](https://github.com/vitejs/vite/tree/c45c984ce88b9f36a61761b4df849b7e8dd8e3ce/playground/ssr-react) folder of Vite repository with added some features and prepared to be a template with developer experience and all features you want to make a website
Added:
- [TypeScript](https://typescriptlang.org) support
- [ESLint](http://eslint.org) support with minimal config for code style, plus:
- [simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort) to sort imports during ESLint `--fix`
- [unsed-imports](https://github.com/sweepline/eslint-plugin-unused-imports) to remove unused imports during ESLint `--fix`
- [React Helmet](https://github.com/nfl/react-helmet) to rule document ``
- Styling examples using CSS Modules and global CSS
- Runtime example using `useState` (at home page)
Removed:
- **Tests** because who wants to test static sites
- **SSR mode** because we want SSG here
# TODO
- [ ] Use `ts-node` to run all scripts and rewrite all JS to TS