Skip to content

Instantly share code, notes, and snippets.

@carloswm85
Last active May 25, 2024 14:30
Show Gist options
  • Save carloswm85/1bac47ae210505e35aed72b6d0d308e5 to your computer and use it in GitHub Desktop.
Save carloswm85/1bac47ae210505e35aed72b6d0d308e5 to your computer and use it in GitHub Desktop.
#!/bin/bash
# I wrote a shell script that takes a project name and then configures an Angular project with a prefix and all my preferences,
# which include eslint, prettier, and the Airbnb styles guide for Angular using pnpm (instead of npm).
#
# Download it to the parent directory where you want to create a new project ( I have them all in a directory called wdd430)
# and then make it executable with this command.
#
# chmod +x create-angular-project.sh
#
# and run it using bash ./create-angular-project.sh TheNameOfYouNewProject [OptionalPrefix]
# Check if project name is supplied
if [ -z "$1" ]
then
echo "Error: No project name provided."
exit 1
fi
# Check if project directory already exists
if [ -d "$1" ]
then
echo "Error: Directory $1 already exists."
exit 1
fi
# Create a new Angular project
PREFIX_OPTION=""
if [ -n "$2" ]
then
PREFIX_OPTION="--prefix=$2"
fi
ng new $1 $PREFIX_OPTION --no-strict --standalone false --routing false --package-manager=pnpm || { echo "Error: Failed to create Angular project."; exit 1; }
# Navigate into the project directory
cd $1 || { echo "Error: Failed to navigate to project directory."; exit 1; }
# Install the necessary packages
pnpm add -D eslint@8.56.0 prettier eslint-config-airbnb-typescript eslint-plugin-prettier eslint-config-prettier eslint-plugin-import@^2.25.2 @angular-eslint/eslint-plugin@^17.3.0 @angular-eslint/eslint-plugin-template@^17.3.0 @angular-eslint/template-parser@^17.3.0 @typescript-eslint/parser || { echo "Error: Failed to install ESLint, Prettier, Airbnb config, Angular ESLint plugins, and TypeScript ESLint parser."; exit 1; }
# Install @typescript-eslint/parser separately
pnpm add -D @typescript-eslint/parser || { echo "Error: Failed to install @typescript-eslint/parser."; exit 1; }
# Create .eslintrc.json
echo '{
"extends": ["plugin:@angular-eslint/recommended", "plugin:prettier/recommended"],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"prettier/prettier": ["error"]
}
}' > .eslintrc.json
# Create .prettierrc
echo '{
"singleQuote": true,
"trailingComma": "es5"
}' > .prettierrc
# Create a .npmrc file to enforce the use of pnpm
echo 'engine-strict=true' > .npmrc || { echo "Error: Failed to create .npmrc."; exit 1; }
# Add pnpm to the "engines" field of package.json using PowerShell
powershell -Command "(Get-Content package.json) -replace '\"dependencies\"', '\"engines\": { \"pnpm\": \"^8.15.6\" }, \"dependencies\"' | Set-Content package.json" || { echo "Error: Failed to update package.json."; exit 1; }
# Install Bootstrap 3 and jQuery
pnpm install bootstrap@3 jquery || { echo "Error: Failed to install Bootstrap 3 and jQuery."; exit 1; }
# Add lint script to package.json
jq '.scripts.lint = "eslint --fix \"./src/**/*.ts\""' package.json > temp.json && mv temp.json package.json || { echo "Error: Failed to add lint script."; exit 1; }
# Modify angular.json to include styles and scripts
jq '.projects["'$1'"].architect.build.options |= .+ {"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css"], "scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"]}' angular.json > temp.json && mv temp.json angular.json || { echo "Error: Failed to modify angular.json."; exit 1; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment