Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Lomray-Software/vite-template
Vite SSR BOOST template
https://github.com/Lomray-Software/vite-template
express react react-router ssr vite vite-ssr-boost
Last synced: about 2 months ago
JSON representation
Vite SSR BOOST template
- Host: GitHub
- URL: https://github.com/Lomray-Software/vite-template
- Owner: Lomray-Software
- Created: 2023-07-04T17:40:35.000Z (about 1 year ago)
- Default Branch: prod
- Last Pushed: 2024-05-30T18:26:21.000Z (4 months ago)
- Last Synced: 2024-06-19T03:04:22.347Z (3 months ago)
- Topics: express, react, react-router, ssr, vite, vite-ssr-boost
- Language: TypeScript
- Homepage: https://vite-template.lomray.com
- Size: 1.41 MB
- Stars: 23
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-vite - vite-react-ssr-boost-template - Template for creating `React 18` SSR/SPA apps with `TypeScript`, `Mobx`, `React Router`, `Head Manager`, Suspense, Streaming. Also included CI/CD, `ESLint`, `Prettier`, `Stylelint`, `Husky`, `Semantic Release`. (Get Started / Templates)
- awesome-vite - vite-react-ssr-boost-template - Template for creating `React 18` SSR/SPA apps with `TypeScript`, `Mobx`, `React Router`, `Head Manager`, Suspense, Streaming. Also included CI/CD, `ESLint`, `Prettier`, `Stylelint`, `Husky`, `Semantic Release`. (Get Started / Templates)
README
# Vite template
## Demo links
- Streaming supported
- [SSR Docker (Streaming supported)](https://vite-template.lomray.com/)
- Streaming **NOT** supported
- [SSR Amplify (Streaming not supported)](https://prod.d947n8vxd7uac.amplifyapp.com/)
- [SSR Vercel (Streaming not supported)](https://vite-template-three.vercel.app/)
- [SPA Amplify](https://prod.d2fyemmi74bwx3.amplifyapp.com/)
## Explore
- [prod](https://github.com/Lomray-Software/vite-template/tree/prod) current branch with Mobx + Store Manager, Head Manager (meta), Route Manager
- [feature/localization](https://github.com/Lomray-Software/vite-template/tree/feature/localization) branch with example of localization
## Used libraries
- [VITE SSR BOOST](https://github.com/Lomray-Software/vite-ssr-boost)
- [CONSISTENT SUSPENSE](https://github.com/Lomray-Software/consistent-suspense)
- [REACT MOBX MANAGER](https://github.com/Lomray-Software/react-mobx-manager)
- [REACT HEAD MANAGER](https://github.com/Lomray-Software/react-head-manager)
- [REACT ROUTE MANAGER](https://github.com/Lomray-Software/react-route-manager)
# Local development
```bash
git clone [email protected]:Lomray-Software/vite-template.git
npm ci
npm run develop
```
## Structure
- `constants/index` - configure application constants
- `common/services/route-manager` - configure site routes
## Bundle analyze
```bash
vite-bundle-visualizer
```
## Git workflow
__NOTE: see .github for understand CI/CD__
1. Create feature, bugfix, etc.
2. Create Pull Request & test
3. Squash & merge into `prod`
## Some cases to pay attention to.
- Right solution for wrap `` into ``. If you would like to wrap your lazy routes only once:
```typescript jsx
import { Outlet, useLocation } from 'react-router-dom';
import type { FCRoute } from '@lomray/vite-ssr-boost/interfaces/fc-route';
import { Suspense } from '@lomray/consistent-suspense';
/**
* NOTE: without key it's doesn't work
* @see https://github.com/remix-run/react-router/issues/10568
* @constructor
*/
const MyLayout: FCRoute = () => {
const { key } = useLocation();
return (
)
}
```
- In some cases nested Suspense should be memorized for preventing "This Suspense boundary received an update before it finished hydrating."
```typescript jsx
/**
* Parent component can receive update what will entail rerender.
* We should avoid rerenders for children suspense.
* @constructor
*/
const Parent: FC = () => {
/**
* Memorize Suspense to avoid errors
*/
const children = useMemo(
() => (
}>
),
[],
);
return (
{children}
);
}
```
## Docker build
[See github workflow](.github/workflows/release.yml) or
```bash
npm run build
ssr-boost build-docker --image-name test-image
```
## AWS Amplify build (amplify.yml) - SPA
```yaml
version: 1
frontend:
phases:
preBuild:
commands:
- nvm use 18.19.0
- npm ci
build:
commands:
- npm run build -- --only-client
artifacts:
baseDirectory: build/client
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
## AWS Amplify build (amplify.yml) - SSR
```yaml
version: 1
frontend:
phases:
preBuild:
commands:
- nvm use 18.19.0
- npm pkg delete scripts.prepare
- npm ci
build:
commands:
- npm run build -- --eject
- npm run build:amplify
artifacts:
baseDirectory: .amplify-hosting
files:
- '**/*'
cache:
paths:
- node_modules/**/*
```
## Vercel build (vercel.json) - SSR
```json
{
"buildCommand": "npm pkg delete scripts.prepare && npm run build -- --serverless && npm run build:vercel",
"installCommand": "npm ci",
"outputDirectory": ".vercel/output"
}
```