Logo

dev-resources.site

for different kinds of informations.

๐Ÿ”” version-rocket ๐Ÿš€

Published at
7/4/2022
Categories
npm
workder
version
web
Author
akimyou
Categories
4 categories in total
npm
open
workder
open
version
open
web
open
Author
7 person written this
akimyou
open
๐Ÿ”” version-rocket ๐Ÿš€

๐Ÿ”” version-rocket ๐Ÿš€

English | ็ฎ€ไฝ“ไธญๆ–‡

Notify users when a new version of your site is available and prompt them to refresh the page.
When you finish deploying your app, send a deployment message to Lark Group Chat

About

version-rocket checks the version in the user's current browser against the version file in the remote server.

If a new version is available, a new version update prompt will be displayed to and the user will be given an operation button to refresh the page. Alternatively, version-rocket can notify you by receiving a callback function to support custom user interface.

We use the Web Worker API based on javascript to do the polling loop, will not affect the browser rendering process.

Features

  • Compatible with all modern browsers
  • The version prompt interface supports customization, and the content of the deployment message card can be customized.
  • Available version real-time monitoring
  • Synchronize deployment message to Lark group chat after successful deployment.
  • Npm package support

Screenshots

  • The first picture prompts user to refresh the page.
  • The second picture shows that after the successful deployment of the project, the deployment message will be sent to the group chat to inform the team members.
  • The third picture @All with optional settings based on second picture



Usage

Install

npm install version-rocket -S
Enter fullscreen mode Exit fullscreen mode

Get Started


// 1. Import version-rocket, and invoke pollingCompareVersion method
import { pollingCompareVersion } from 'version-rocket'
import { version } from '../package.json'

/**
 * @param 1: current version
 * @param 2: remote server version.json file path
 * @param 3: time interval of rotation monitoring (in ms), default 5000ms
 * @param 4: custom version tip ui callback(optional)
 */
pollingCompareVersion(version, `${location.origin}/version.json`, 30000, (data) => {
    console.log(data)
})

Enter fullscreen mode Exit fullscreen mode

/**
 * 2.
 * generate-version-file shortcut command to create the version.json file.
 * The parameter is the directory where you want to create version.json.
 * If you don't pass the parameter, it will be created in the dist directory by default.
*/ 

{
  "name": "test",
  "description": "test",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    ...
    "generate:version": "generate-version-file dist public"
    ...
  },
  ...
}

Enter fullscreen mode Exit fullscreen mode

If you want to push the successful deployment message to the group chat where lark Robot is located, please continue.


/**
 * 3.
 * You need to create a send-lark-config.json file first, it store the field for setting the copy for the message card. 
 * Then, you can just execute the send-lark-message shortcut command. By default, the send-lark-config.json file in the current path is selected.
 * If you want to customize the file path and file name, you can set the MESSAGE_PATH parameter to pass it in.
*/

{
  "name": "test",
  "description": "test",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    ...
    "send-lark-message:test": "MESSAGE_PATH=./lark-message-config.json send-lark-message"
    ...
  },
  ...
}


// send-lark-config.json example
{
    // card title
    "title": "TEST FE Deployed Successfully",
    // deploy project name
    "projectName": "TEST",
    // deploy branch name
    "branch": "Staging",
    // project url
    "accessUrl": "https://test.com",
    // remind group chat members: true/false
    "isNotifyAll": true,
    // lark robot webhook url
    "larkWebHook": "https://open.larksuite.com/open-apis/bot/v2/hook/xxxxxxxxxxxx",
    // deploy type
    "deployTools": "Jenkins",
    // the deploy time zone that you want to display, default "Asia/Shanghai"
    "expectConvertToTimezone": "America/New_York"
}

Enter fullscreen mode Exit fullscreen mode

Link

version Article's
30 articles in total
Favicon
What is Actually GitLab?
Favicon
The Ultimate Guide: How to Check Laravel Version
Favicon
Bitbucket vs GitHub: Whatโ€™s the Difference Between Both?
Favicon
Letz Understand NPM Versioning: A Beginner's Guide
Favicon
Crossing the Bridge: Migrating and Working Across Version Control Systems
Favicon
Puroโ€Šโ€”โ€ŠUma forma eficiente de gerenciar as versรตes flutter
Favicon
Version Control Systems and Their Importance
Favicon
Check PyTorch version, CPU and GPU(CUDA) in PyTorch
Favicon
How To Use Versioning On AWS S3 Buckets To Enable Overwrite Protection Of Your Data
Favicon
What is semantic version and why knowing semantic versioning matters!
Favicon
GreptimeDB v0.6 Released - Support Migrating Table's Regions between Datanodes
Favicon
What is Semantic Versioning and why you should use it for your software ?
Favicon
Contaktlab Full Version VST Plug-ins โ€“ Elevate Your Music Production Experience Download.
Favicon
Alpha 1.0.3 Upcoming Changes (wip)
Favicon
Alpha v1.0.2 - Upcoming Changes
Favicon
Difference between tilde(~) and caret(^) in package.json?
Favicon
How to Add a Build Number to the Web Build in Angular
Favicon
Versions Are For Humans
Favicon
How to Install Any Laravel Version
Favicon
Why Your Cloud Assets Need A Time Machine
Favicon
Angular version upgrade v4 to v12 - part1
Favicon
Rust Revolution - `r` the rust version manager
Favicon
VS Code Extension - Git Graph
Favicon
React Versiyon DรผลŸรผrme
Favicon
Flutter Versiyon DรผลŸรผrme
Favicon
What is the differences between GIT and SVN
Favicon
Notify users when a new version of your site is available and prompt them to refresh the page.
Favicon
๐Ÿ”” version-rocket ๐Ÿš€
Favicon
Understanding version control and mastering git - Branches and more...!!
Favicon
Choose your preferred major version on all open-source managed software!

Featured ones: