BASH
Create Basic Web Project Directory Structure
Quickly bootstrap new web projects by generating a standard directory and file boilerplate structure using a simple Bash script.
#!/bin/bash
PROJECT_NAME="my_new_web_project"
if [ -d "$PROJECT_NAME" ]; then
echo "Error: Directory '$PROJECT_NAME' already exists. Aborting."
exit 1
fi
echo "Creating boilerplate for '$PROJECT_NAME'..."
mkdir -p "$PROJECT_NAME"/{public,src/{components,pages,styles,utils},config,scripts,tests}
cd "$PROJECT_NAME"
touch public/index.html
touch src/App.js
touch src/index.js
touch src/styles/main.css
touch .env.example
touch README.md
echo "<!-- public/index.html -->" > public/index.html
echo "<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>My Web App</title>
<link rel=\"stylesheet\" href=\"styles/main.css\">
</head>
<body>
<div id=\"root\"></div>
<script src=\"index.js\"></script>
</body>
</html>" >> public/index.html
echo "// src/App.js" > src/App.js
echo "import React from 'react';
function App() {
return (
<div>
<h1>Hello from My Web App!</h1>
</div>
);
}
export default App;" >> src/App.js
echo "Project structure created in '$PROJECT_NAME'."
ls -R
How it works: This script automates the creation of a common directory and file structure for a new web project (e.g., a React or general frontend project). It uses `mkdir -p` to create nested directories in a single command and `touch` to create empty files. It also adds some basic content to `index.html` and `App.js` for quick setup. This helps developers jumpstart new projects with a consistent layout.