hemengke1997 / vite-react-ssr-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

28.0 4.0 4.0 3.65 MB

ssr boilerplate based on vite & vite-plugin-ssr & react18! ✌️

Home Page: https://vite-react-ssr-boilerplate-hemengke1997.vercel.app/

License: MIT License

JavaScript 2.80% TypeScript 92.55% CSS 3.55% Dockerfile 1.11%

vite react-ssr ssr vite-plugin-ssr

vite-react-ssr-boilerplate's Introduction

vite + ssr

Intro

一个基于 vite + react + vite-plugin-ssr 的 SSR 项目模板

Example

online vercel

Features

首屏 SSR
路由动画
国际化
React18
antd5
动态暗黑主题
rtl/ltr
tailwindcss
vercel 部署
docker 部署
vite 驱动

screenshot

Branches

master

自适应布局 + 客户端路由，纯 tailwindcss

mobilepc

mobile/pc 区分布局，使用 pxtorem

ssg

ssg 渲染

development

pnpm install

pnpm run dev

build

test

pnpm run build:test

prod

pnpm run build

release

本地打包再部署的话可以执行(Docker 部署不需要)

pnpm run release

deploy

Docker

test

container / image 名称可以自定义

# build
docker build --build-arg node_env=test -t web:1.0 .
# run
docker run -d -p 9527:9527 --name ssr-web web:1.0

production

# build
docker build --build-arg node_env=production -t web:1.0 .
# run
docker run -d -p 9527:9527 --name ssr-web web:1.0

传统部署

传统部署的话需要 pnpm build:server 打包 pm2 需要的脚本

test

pnpm run pm2:test

production

pnpm run pm2:prod

项目结构树

vite-react-ssr-boilerplate
├─ @types                                                 全局类型
├─ config                                                 关于项目的build/node相关配置
├─ public                                                 公共目录（build会直接copy）
├─ publicTypescript                                       typescript公共目录（build会编译后copy）
├─ renderer                                               vps渲染相关
├─ scripts                                                node脚本
├─ server                                                 node服务
├─ shared                                                 client & server 共享功能目录
├─ src                                                    业务源码
├─ postcss.config.cjs                                     postcss配置
├─ tailwind.config.cjs                                    tailwindcss配置

commitlint

@commitlint/cli

{
  "commit-msg": "pnpm exec commitlint --edit $1"
}

vue commitlint

{
  "commit-msg": "pnpm exec tsx scripts/verifyCommit.ts $1"
}

vite-react-ssr-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

a233894432 towelong morrxy gmorning-wp

vite-react-ssr-boilerplate's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

fix(deps): update all non-major dependencies (@ant-design/cssinjs, @commitlint/cli, @types/express, @types/react, @vercel/node, @vitejs/plugin-legacy, @vitejs/plugin-react, antd, axios, esbuild, eslint, eslint-define-config, framer-motion, i18next, i18next-http-middleware, postcss, prettier, react-i18next, rollup, tsx, vite, vite-plugin-public-typescript, vite-plugin-ssr, zustand)
chore(deps): update dependency @types/fs-extra to v11

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

chore(deps): update node.js to v19

Detected dependencies

dockerfile

Dockerfile

node 18-alpine3.16

node 18-alpine3.16

node 18-alpine3.16

github-actions

.github/workflows/vercel-deploy.yaml

actions/checkout v3

.github/workflows/vercel-preview.yaml

actions/checkout v3

npm

package.json

@ant-design/cssinjs ^1.3.2

@minko-fe/style-object-to-string ^0.0.1

ahooks ^3.7.4

antd 5.1.2

axios 1.2.2

change-case ^4.1.2

classnames ^2.3.2

dayjs ^1.11.7

framer-motion ^8.1.3

i18next ^22.4.7

i18next-browser-languagedetector ^7.0.1

i18next-http-middleware ^3.2.1

lodash-es ^4.17.21

normalize-path ^3.0.0

normalize-url ^8.0.0

query-string ^8.1.0

react 18.2.0

react-dom 18.2.0

react-helmet ^6.1.0

react-i18next ^12.1.1

react-use ^17.4.0

vite ^4.0.3

vite-plugin-ssr ^0.4.69

zustand ^4.2.0

@commitlint/cli ^17.3.0

@minko-fe/commitlint-config ^1.2.4

@minko-fe/eslint-config ^1.2.4

@minko-fe/postcss-pxtorem ^1.1.0

@minko-fe/postcss-pxtoviewport ^1.1.0

@minko-fe/prettier-config ^1.2.4

@minko-fe/tsconfig ^1.2.4

@types/compression ^1.7.2

@types/cross-spawn ^6.0.2

@types/express ^4.17.15

@types/fs-extra ^9.0.13

@types/headroom.js ^0.12.2

@types/inquirer ^9.0.3

@types/lodash-es ^4.17.6

@types/minimist ^1.2.2

@types/node ^18.11.18

@types/normalize-path ^3.0.0

@types/react 18.0.26

@types/react-dom 18.0.10

@types/react-helmet ^6.1.6

@types/shelljs ^0.8.11

@vercel/node ^2.8.2

@vitejs/plugin-legacy 3.0.1

@vitejs/plugin-react 3.0.0

autoprefixer ^10.4.13

browserslist ^4.21.4

compression ^1.7.4

cookie-parser ^1.4.6

cross-env ^7.0.3

esbuild ^0.16.13

eslint ^8.31.0

eslint-define-config ^1.13.0

execa ^6.1.0

express ^4.18.2

fast-glob ^3.2.12

fs-extra ^11.1.0

get-tsconfig ^4.3.0

http-proxy-middleware ^2.0.6

lint-staged ^13.1.0

minimist ^1.2.7

picocolors ^1.0.0

pm2 5.2.2

postcss ^8.4.20

prettier ^2.8.1

rollup 3.9.1

rollup-plugin-visualizer ^5.9.0

simple-git-hooks ^2.8.1

sirv ^2.0.2

tailwindcss ^3.2.4

terser 5.16.1

tsx ^3.12.1

typescript ^4.9.4

vite-plugin-i18next-loader ^2.0.2

vite-plugin-public-typescript ^1.0.4

vite-plugin-time-reporter ^2.1.0

Check this box to trigger a request for Renovate to run again on this repository

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.