BASH
Automate Frontend Build and Deployment to Web Server
Streamline your web development workflow by automating frontend project builds and secure deployment of static assets to your web server using a custom Bash script.
#!/bin/bash
# --- Configuration ---
PROJECT_ROOT="/path/to/your/frontend/project"
BUILD_COMMAND="npm run build"
DEPLOY_DIR="/var/www/html/your-app-name"
# --- Script Logic ---
echo "Navigating to project directory: $PROJECT_ROOT"
cd "$PROJECT_ROOT" || { echo "Error: Project directory not found."; exit 1; }
echo "Running build command: $BUILD_COMMAND"
$BUILD_COMMAND || { echo "Error: Build failed."; exit 1; }
BUILD_OUTPUT_DIR="./dist" # Common for Vue, React
if [ ! -d "$BUILD_OUTPUT_DIR" ]; then
echo "Error: Build output directory '$BUILD_OUTPUT_DIR' not found after build. Please check your build command."
exit 1
fi
echo "Cleaning existing deployment directory: $DEPLOY_DIR"
sudo rm -rf "$DEPLOY_DIR/*"
sudo mkdir -p "$DEPLOY_DIR"
echo "Copying build artifacts to deployment directory: $DEPLOY_DIR"
sudo cp -r "$BUILD_OUTPUT_DIR"/* "$DEPLOY_DIR/" || { echo "Error: Failed to copy files."; exit 1; }
echo "Deployment successful!"
How it works: This script automates the full cycle of building a frontend application and deploying its static assets. It navigates to the project root, executes the defined build command (e.g., for React, Vue, or Angular), then securely cleans the target web server directory, and finally copies the fresh build artifacts. It's ideal for local development deployment or as part of a continuous integration pipeline.