wedding card

E -story

No server, use Tencent Cloud CloudBase's cloud function, static website custody, database, extremely low cost (free viewing free or one penny per day)

Administrators can generate inviting QR codes

Use yourself when you get married, now used to commemorate and record

Online address: https://wedding.hal.wang

The web address is /admin and enters the management page. You can add an invitation and generate the invitation QR code.

The generated QR code content is a URL such as https://wedding.hal.wang/#/?name=%E6%B1%AAP

The homepage已相守... 天is dynamic. If the current date is before marriage, it will be displayed as the countdown of the wedding

If you use it yourself, you need to do it:

1. One -click deployment

2. Add environment variables

   • Admin: administrator password
   • Groom: The name of the groom
   • Bride: bride's name
   • Date: Marriage time, format yyyy-mm-dd HH: mm: ss
   • Addr: Detailed address
   • Phone: Telephone
   • COVER: Cover file name, upload the corresponding file to the cloud storage roots directory
   • Album: Album file name, can be separated by comma, such as 1.jpg , 2.png , ... the corresponding file is uploaded to the cloud storage album directory
   • MUSIC: Background Music File Name, Upload the corresponding file to the cloud storage roots directory
   • Favicon: web icon file name, upload of the corresponding file to the cloud storage root directory
   • MHID: Flower QR code template ID, used to generate a happy invitation QR code

About the straw QR code template ID

Visit https://cli.im/api

Adjust the beautification template, the connection will be automatically generated, where mhid parameter is the template ID

Secondary development

If the existing function cannot be satisfied, you can develop secondary development

API

Create files .env.local under wedding-card-api , the content is as follows

 SCF_NAMESPACE=cloudbase环境id
SECRET_KEY=腾讯云 secret key
SECRET_ID=腾讯云 secret id
ADMIN=管理员密码
COVER=封面文件名，对应文件上传至云存储根目录
ALBUM=相册文件名，可多个，使用逗号分隔，如 1.jpg,2.png,...。对应文件上传至云 album 目录中
MUSIC=背景音乐文件名，对应文件上传至云存储根目录
FAVICON=网页图标文件名，对应文件上传至云存储根目录

Run API

Install the dependencies first, execute it under wedding-card-api

npm install

Use VSCODE to open wedding-card-api , directly F5 to start debugging

Or execute in wedding-card-api directory

npm start

Web

Install the dependencies first, execute it under wedding-card-web

npm install

Then execute the following command running

npm run dev:test

Or use the published interface, you need to modify VITE_GLOB_PROXY_API_URL in wedding-card-web/.env.development file

Then run

npm run dev

release

You can use @cloudbase/cli locally, or you can use github action

CLI release

Create .env.local in the project root directory (note that it is the root directory of the project, not the API or web)

The content is as follows

 ENV_ID=cloudbase环境id
ADMIN=管理员密码
GROOM=新郎姓名
BRIDE=新娘姓名
DATE=结婚时间，格式 yyyy-MM-dd HH:mm:ss
ADDR=详细地址
PHONE=电话
COVER=封面文件名，对应文件上传至云存储根目录
ALBUM=相册文件名，可多个，使用逗号分隔，如 1.jpg,2.png,...。对应文件上传至云 album 目录中
MUSIC=背景音乐文件名，对应文件上传至云存储根目录
FAVICON=网页图标文件名，对应文件上传至云存储根目录
MHID=草料二维码 ID，用于生成喜帖二维码

Run the following command in the project root directory issued

npm run deploy

Github actions

Add secrets in the warehouse, in Settings -> Secrets -> Actions , click New repository secret button

• Tencent_secret_id: Tencent Cloud Secret ID
• Tencent_secret_key: Tencent Cloud Secret Key
• ENV: The content of the .env.local file cli 发布

After the configuration is complete, the Main branch submits the code will automatically publish to Cloudbase

The release progress can be seen in the warehouse Actions