https://github.com/wwwakcan/v-build
This is a compact yet powerful build and deployment script for React applications. It combines version tracking, building, and server deployment functionalities in a single tool.
https://github.com/wwwakcan/v-build
cicd cicd-master javascript nodejs react reactjs terminal
Last synced: about 1 month ago
JSON representation
This is a compact yet powerful build and deployment script for React applications. It combines version tracking, building, and server deployment functionalities in a single tool.
- Host: GitHub
- URL: https://github.com/wwwakcan/v-build
- Owner: wwwakcan
- License: apache-2.0
- Created: 2025-04-13T17:05:45.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-04-13T17:24:28.000Z (about 1 month ago)
- Last Synced: 2025-04-14T17:14:08.433Z (about 1 month ago)
- Topics: cicd, cicd-master, javascript, nodejs, react, reactjs, terminal
- Language: JavaScript
- Homepage:
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ReactJS Build & Deploy Tiny Code
This is a compact yet powerful build and deployment script for React applications. It combines version tracking, building, and server deployment functionalities in a single tool.
## Features
- **Automatic Versioning**: Generates version numbers based on date and time
- **Version Tracking**: Creates a `version.json` file with build information and release notes
- **Secure Deployment**: Stores encrypted server credentials for quick deployment
- **Interactive CLI**: User-friendly command-line interface with visual progress indicators
- **SFTP Integration**: Automated deployment to remote servers via SFTP
- **Connection Memory**: Saves and loads server connection profiles for future use
## Usage
```bash
node vbuild.js
```
The script will guide you through the build and deployment process with interactive prompts:
1. Choose whether to deploy after building
2. Select a saved server connection or create a new one
3. Enter release notes for the version
4. Watch as the build is created and deployed to your server
## Requirements
- Node.js
- npm
- ssh2-sftp-client package
## Installation
```bash
npm install ssh2-sftp-client --save-dev
```
Add the script to your package.json file:
```json
"scripts": {
"vbuild": "node vbuild.js",
// your other scripts...
}
```
Now you can run the tool using:
```bash
npm run vbuild
# or with yarn
yarn vbuild
```
This lightweight tool eliminates the need for complex CI/CD configurations for small to medium React projects, allowing developers to quickly build and deploy their applications with a single command.
# React Version Checker
A lightweight, customizable React component for notifying users when a new version of your application is available.
## Features
- ✨ **No dependencies** - Pure React component
- 🌍 **Multilingual support** - English, Turkish, Chinese, French and German included
- 🎨 **Customizable UI** - Modal or Card display options
- 🛠️ **Easily extendable** - Custom content and styles
- 🔄 **Automatic updates** - Checks for updates on load and periodically
- 🧩 **Modular design** - Single file with modular structure
## Installation
Simply copy the `VersionChecker.js` file into your project.
## Basic Usage
```jsx
import React from 'react';
import VersionChecker from './VersionChecker';
function App() {
return (
My Application
{/* Basic usage */}
{/* Your app content */}
);
}
```
## How It Works
1. The component checks for a `version.json` file in your public directory
2. It compares the current version (stored in localStorage) with the latest version
3. If a new version is detected, it shows a notification to the user
4. When the user clicks "Update", it clears the cache and reloads the page
### Required version.json format
Create a `version.json` file in your public directory with this structure:
```json
{
"version": "1.2.3",
"buildTime": "2023-04-15T12:00:00Z",
"description": "New features and bug fixes"
}
```
## Configuration Options
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | string | `'modal'` | Display type: `'modal'` or `'card'` |
| `lang` | string | `'en'` | Language code: `'en'`, `'tr'`, `'zh'`, `'fr'`, `'de'` |
| `customStyles` | object | `{}` | Override default styles |
| `CustomModalContent` | component | `null` | Custom content for modal |
| `CustomCardContent` | component | `null` | Custom content for card |
| `CustomModal` | component | `null` | Completely custom modal component |
| `CustomCard` | component | `null` | Completely custom card component |
## Examples
### Different display types
```jsx
// Modal display (default)
// Card display
```
### Language options
```jsx
// English (default)
// Turkish
// Chinese
// French
// German
```
### Custom styling
```jsx
```
### Custom content
```jsx
(
🚀 Time to upgrade!
Your version: {currentVersion}
New version: {latestVersion}
{latestDescription}
)}
/>
```
### Fully custom component
```jsx
(
Update Available!
Current: {currentVersion}
New: {latestVersion}
Later
Update Now
)}
/>
```
## Behavior
- **Modal type**: Stays open until user clicks update or close button
- **Card type**: Can be closed by clicking outside the card or the close button
- **Version footer**: Always shows the current version at the bottom
## License
MIT