Skip to content

Commit 6274603

Browse files
rsonghusterrsonghuster
authored
Merge pull request #217 from devsapp/add-vite-react
add vite react template
2 parents 782041f + 44d2667 commit 6274603

26 files changed

+861
-0
lines changed

‎web-framework/nodejs/vite-react/hook/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
async function preInit(inputObj) {
2+
3+
}
4+
5+
async function postInit(inputObj) {
6+
7+
}
8+
9+
module.exports = {
10+
postInit,
11+
preInit
12+
}

‎web-framework/nodejs/vite-react/publish.yaml

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
Edition: 3.0.0
2+
Type: Project
3+
Name: start-vite-react-cap
4+
Version: 0.0.3
5+
Provider:
6+
- 阿里云 # 取值内容参考：https://api.devsapp.cn/v3/common/args.html
7+
Description: 基于 React 的可扩展企业级前端应用框架快速创建并部署到云原生应用开发平台 CAP 。
8+
HomePage: https://github.com/devsapp/start-web-framework/tree/dipper/web-framework/nodejs/vite-react
9+
Tags: #标签详情
10+
- Web 应用
11+
- Serverless Devs
12+
Category: Web 应用 # 取值内容参考：https://api.devsapp.cn/v3/common/args.html
13+
Service: # 使用的服务
14+
函数计算: # 取值内容参考：https://api.devsapp.cn/v3/common/args.html
15+
Authorities: #权限描述
16+
- AliyunFCFullAccess # 所需要的权限，例如AliyunFCFullAccess
17+
日志服务:
18+
Authorities:
19+
- AliyunFCServerlessDevsRolePolicy
20+
Organization: 阿里云函数计算（FC） # 所属组织
21+
Effective: Public # 是否公开，取值：Public，Private，Organization
22+
Parameters:
23+
type: object
24+
additionalProperties: false # 不允许增加其他属性
25+
required: # 必填项
26+
- region
27+
- functionName
28+
properties:
29+
region:
30+
title: 地域
31+
type: string
32+
default: cn-hangzhou
33+
description: 创建应用所在的地区
34+
enum:
35+
- cn-beijing
36+
- cn-hangzhou
37+
- cn-shanghai
38+
- cn-qingdao
39+
- cn-zhangjiakou
40+
- cn-huhehaote
41+
- cn-shenzhen
42+
- cn-chengdu
43+
- cn-hongkong
44+
- ap-southeast-1
45+
- ap-southeast-2
46+
- ap-southeast-3
47+
- ap-southeast-5
48+
- ap-northeast-1
49+
- eu-central-1
50+
- eu-west-1
51+
- us-west-1
52+
- us-east-1
53+
- ap-south-1
54+
functionName:
55+
title: 函数名
56+
type: string
57+
default: vite-react-${default-suffix}
58+
description: 函数名称，只能包含字母、数字、下划线和中划线。不能以数字、中划线开头。长度在 1-64 之间
59+

‎web-framework/nodejs/vite-react/readme.md

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
2+
> 注：当前项目为 Serverless Devs 应用，由于应用中会存在需要初始化才可运行的变量（例如应用部署地区、函数名等等），所以**不推荐**直接 Clone 本仓库到本地进行部署或直接复制 s.yaml 使用，**强烈推荐**通过 `s init ${模版名称}` 的方法或应用中心进行初始化，详情可参考[部署 & 体验](#部署--体验) 。
3+
4+
# start-vite-react-cap 帮助文档
5+
6+
<description>
7+
8+
基于 React 的可扩展企业级前端应用框架快速创建并部署到云原生应用开发平台 CAP 。
9+
10+
</description>
11+
12+
13+
## 资源准备
14+
15+
使用该项目，您需要有开通以下服务并拥有对应权限：
16+
17+
<service>
18+
19+
20+
21+
| 服务/业务 | 权限 | 相关文档 |
22+
| --- | --- | --- |
23+
| 函数计算 | AliyunFCFullAccess | [帮助文档](https://help.aliyun.com/product/2508973.html) [计费文档](https://help.aliyun.com/document_detail/2512928.html) |
24+
| 日志服务 | AliyunFCServerlessDevsRolePolicy | [帮助文档](https://help.aliyun.com/zh/sls) [计费文档](https://help.aliyun.com/zh/sls/product-overview/billing) |
25+
26+
</service>
27+
28+
<remark>
29+
30+
31+
32+
</remark>
33+
34+
<disclaimers>
35+
36+
37+
38+
</disclaimers>
39+
40+
## 部署 & 体验
41+
42+
<appcenter>
43+
44+
- :fire: 通过 [云原生应用开发平台 CAP](https://cap.console.aliyun.com/template-detail?template=start-vite-react-cap) ，[![Deploy with Severless Devs](https://img.alicdn.com/imgextra/i1/O1CN01w5RFbX1v45s8TIXPz_!!6000000006118-55-tps-95-28.svg)](https://cap.console.aliyun.com/template-detail?template=start-vite-react-cap) 该应用。
45+
46+
</appcenter>
47+
<deploy>
48+
49+
50+
</deploy>
51+
52+
## 案例介绍
53+
54+
<appdetail id="flushContent">
55+
56+
### Vite + React 开发优势
57+
58+
Vite + React 提供了一种更快速、更轻量、更简单的开发方式，相比于传统的 React 开发方式（如 Create React App 或 Webpack），具有以下优势：
59+
60+
#### 1. 更快的开发体验
61+
- **冷启动快**：Vite 的冷启动速度比 Webpack 快得多，尤其是在大型项目中。
62+
- **热更新快**：Vite 的热模块替换（HMR）速度更快，修改代码后几乎可以立即看到更新。
63+
64+
#### 2. 更轻量的依赖
65+
- Vite 的依赖更少，构建工具本身更轻量。
66+
- 相比之下，Create React App 依赖于 Webpack 和 Babel，配置复杂且依赖较多。
67+
68+
#### 3. 更简单的配置
69+
- Vite 的配置非常简单，开箱即用。
70+
- 相比之下，Webpack 的配置复杂，尤其是在需要自定义构建流程时。
71+
72+
#### 4. 更好的开发体验
73+
- Vite 提供了更友好的错误提示和调试信息。
74+
- 开发服务器支持按需编译，减少了初始加载时间。
75+
76+
#### 5. 更高效的生产构建
77+
- Vite 使用 Rollup 进行生产构建，生成的代码更小、更高效。
78+
- 相比之下，Webpack 的生产构建速度较慢，生成的代码体积较大。
79+
80+
#### 6. 更好的 TypeScript 支持
81+
- Vite 内置了对 TypeScript 的支持，无需额外配置。
82+
- 相比之下，Create React App 需要手动配置 TypeScript。
83+
84+
#### 7. 更灵活的插件系统
85+
86+
- Vite 的插件系统非常灵活，允许开发者轻松扩展功能。
87+
- 相比之下，Webpack 的插件系统复杂且配置繁琐。
88+
89+
</appdetail>
90+
91+
## 项目接入点
92+
93+
<accessPoint id="flushContent">
94+
</accessPoint>
95+
96+
## 架构图
97+
98+
<framework id="flushContent">
99+
</framework>
100+
101+
## 使用流程
102+
103+
<usedetail id="flushContent">
104+
105+
本项目案例是 vite + React 部署到云原生应用开发平台 CAP，部署完成之后，您可以看到系统返回给您的案例地址。
106+
![](https://img.alicdn.com/imgextra/i3/O1CN01AKcN1x1pyXHCoRmX6_!!6000000005429-0-tps-1333-138.jpg)
107+
此时，打开案例地址，就可以进入 React 默认的首页。
108+
![](https://img.alicdn.com/imgextra/i3/O1CN01vBEJ7d1R0wyDXtMvc_!!6000000002050-0-tps-1881-946.jpg)
109+
110+
</usedetail>
111+
112+
## 二次开发指南
113+
114+
<development id="flushContent">
115+
</development>
116+
117+
## 注意事项
118+
119+
<matters id="flushContent">
120+
</matters>
121+
122+
## 常见问题
123+
124+
<question id="flushContent">
125+
</question>

‎web-framework/nodejs/vite-react/src/build.yaml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
start_vite_react:
2+
default:
3+
languages:
4+
- nodejs20
5+
steps:
6+
- run: npm install && npm run build
7+
path: ./code
8+
- run: cp nginx.conf ./dist/nginx.conf
9+
path: ./code

‎web-framework/nodejs/vite-react/src/code/.eslintrc.cjs

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

‎web-framework/nodejs/vite-react/src/code/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎web-framework/nodejs/vite-react/src/code/Caddyfile

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# global options
2+
{
3+
admin off # theres no need for the admin api in railway's environment
4+
persist_config off # storage isn't persistent anyway
5+
auto_https off # railway handles https for us, this would cause issues if left enabled
6+
# runtime logs
7+
log {
8+
format json # set runtime log format to json mode
9+
}
10+
# server options
11+
servers {
12+
trusted_proxies static private_ranges 100.0.0.0/8 # trust railway's proxy
13+
}
14+
}
15+
16+
# site block, listens on the $PORT environment variable, automatically assigned by railway
17+
:{$PORT:3000} {
18+
# access logs
19+
log {
20+
format json # set access log format to json mode
21+
}
22+
23+
# health check for railway
24+
rewrite /health /*
25+
26+
# serve from the 'dist' folder (Vite builds into the 'dist' folder)
27+
root * dist
28+
29+
# enable gzipping responses
30+
encode gzip
31+
32+
# serve files from 'dist'
33+
file_server
34+
35+
# if path doesn't exist, redirect it to 'index.html' for client side routing
36+
try_files {path} /index.html
37+
}

‎web-framework/nodejs/vite-react/src/code/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎web-framework/nodejs/vite-react/src/code/nginx.conf

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# /opt/bin/nginx -c /code/nginx.conf -g 'daemon off;'
2+
3+
events { worker_connections 1024; }
4+
http {
5+
server {
6+
error_log /dev/stderr;
7+
access_log /dev/stdout;
8+
9+
gzip on;
10+
gzip_min_length 1k;
11+
gzip_comp_level 2;
12+
gzip_types text/html text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png image/svg+xml;
13+
gzip_vary on;
14+
gzip_disable "MSIE [1-6]\.";
15+
include /opt/nginx/conf/mime.types;
16+
add_header Access-Control-Allow-Origin *;
17+
18+
listen 9000;
19+
20+
location / {
21+
root /code;
22+
index index.html;
23+
add_header Cache-Control "max-age=0";
24+
try_files $uri $uri/ /index.html =404;
25+
}
26+
27+
location ~ ^/.(images|javascript|js|css|flash|media|static)/ {
28+
root /code;
29+
}
30+
31+
}
32+
}

‎web-framework/nodejs/vite-react/src/code/nixpacks.toml

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# https://nixpacks.com/docs/configuration/file
2+
3+
# set up some variables to minimize annoyance
4+
[variables]
5+
NPM_CONFIG_UPDATE_NOTIFIER = 'false' # the update notification is relatively useless in a production environment
6+
NPM_CONFIG_FUND = 'false' # the fund notification is also pretty useless in a production environment
7+
8+
# download caddy from nix
9+
[phases.caddy]
10+
dependsOn = ['setup'] # make sure this phase runs after the default 'setup' phase
11+
nixpkgsArchive = 'ba913eda2df8eb72147259189d55932012df6301' # Caddy v2.8.4 - https://github.com/NixOS/nixpkgs/commit/ba913eda2df8eb72147259189d55932012df6301
12+
nixPkgs = ['caddy'] # install caddy as a nix package
13+
14+
# format the Caddyfile with fmt
15+
[phases.fmt]
16+
dependsOn = ['caddy'] # make sure this phase runs after the 'caddy' phase so that we know we have caddy downloaded
17+
cmds = ['caddy fmt --overwrite Caddyfile'] # format the Caddyfile to fix any formatting inconsistencies
18+
19+
# start the caddy web server
20+
[start]
21+
cmd = 'exec caddy run --config Caddyfile --adapter caddyfile 2>&1' # start caddy using the Caddyfile config and caddyfile adapter

‎web-framework/nodejs/vite-react/src/code/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "vite-react-template",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "tsc -b && vite build",
8+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"react": "^18.3.1",
13+
"react-dom": "^18.3.1"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.3.3",
17+
"@types/react-dom": "^18.3.0",
18+
"@typescript-eslint/eslint-plugin": "^7.15.0",
19+
"@typescript-eslint/parser": "^7.15.0",
20+
"@vitejs/plugin-react": "^4.3.1",
21+
"eslint": "^8.57.0",
22+
"eslint-plugin-react-hooks": "^4.6.2",
23+
"eslint-plugin-react-refresh": "^0.4.7",
24+
"typescript": "^5.2.2",
25+
"vite": "^5.3.2"
26+
},
27+
"engines": {
28+
"node": "20"
29+
}
30+
}

‎web-framework/nodejs/vite-react/src/code/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)