BASH
Automating Web Project Initialization
Streamline web development setup by creating a bash script to automatically generate common project directories and boilerplate files like index.html.
#!/bin/bash
PROJECT_NAME="my-new-web-project"
# Check if project directory already exists
if [ -d "$PROJECT_NAME" ]; then
echo "Error: Directory '$PROJECT_NAME' already exists. Aborting."
exit 1
fi
# Create main project directory
mkdir "$PROJECT_NAME"
cd "$PROJECT_NAME"
# Create standard project subdirectories
mkdir -p src build dist public config scripts assets/images assets/css assets/js
# Create a basic index.html file
echo "<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>$PROJECT_NAME</title>
<link rel=\"stylesheet\" href=\"/assets/css/style.css\">
</head>
<body>
<h1>Welcome to $PROJECT_NAME!</h1>
<script src=\"/assets/js/main.js\"></script>
</body>
</html>" > public/index.html
# Create a basic CSS file
echo "/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}" > assets/css/style.css
# Create a basic JavaScript file
echo "// main.js
console.log('Project $PROJECT_NAME loaded!');" > assets/js/main.js
# Initialize a README.md
echo "# $PROJECT_NAME
This is a new web project.
" > README.md
echo "Project '$PROJECT_NAME' initialized successfully in $(pwd)"
ls -R
How it works: This bash script automates the initial setup for a new web project. It first checks if a directory with the specified project name already exists to prevent overwriting. If not, it creates the main project directory and a set of common subdirectories (e.g., `src`, `public`, `assets`). Finally, it generates basic boilerplate files like `index.html`, `style.css`, `main.js`, and `README.md` to provide a ready-to-start structure for web developers, saving time and ensuring consistent project layouts.