/angular-boilerplate

Straightforward Angular starter

Primary LanguageTypeScriptMIT LicenseMIT

Angular brand

Angular Boilerplate


Live site (Demo)


English | Español


This opinionated Angular starter focuses on the latest Angular features and best practices. It offers essential features for flexibility and scalability, minimizing unnecessary overhead. The codebase is lightweight yet robust, allowing developers to choose their preferred technologies like UI component libraries, state management, server-side rendering, etc. Its flexible boilerplate enables easy customization and adaptation to unique project requirements.

⚗️ Features

✅ Ready-to-use

UI Frameworks

Icons

Add-ons

⚙ Prerequisites

🏹 Start development

Note: You have three options to start a new project based on this template:

  1. Create a new GitHub repository from this template.
  2. Clone this repository to start with a clean git history.
  3. Scaffold a project fork on StackBlitz.

Using the GitHub template

Create a repo from this template on GitHub.


Cloning the repository locally

npx degit juanmesa2097/angular-boilerplate my-app && cd my-app && ./scripts/rename_project.sh my-app

Install dependencies

pnpm install # run `npm install -g pnpm` if you don't have pnpm installed

Run project

pnpm dev

Open in StackBlitz

📝 Checklist

Please review this checklist and modify it as necessary to meet your project requirements.

  • Run the ./scripts/rename_project.sh script to rename the project.
  • Change the title in src/index.html and the favicon in src/favicon.ico to match your project.
  • Decide whether to continue using simple-git-hooks and lint-staged for your project.
  • Clean up the README file to provide clear instructions about your project.
  • Modify the pages in the project to meet your specific requirements.

📦 Deploy to Vercel

Deploy to Vercel

📦 Deploy to Netlify

Deploy to Netlify

🐳 Docker

Create an image of the project.

docker buildx build -t angular-boilerplate:latest .

Run the image of the project.

docker run --rm -p 8080:80 -d angular-boilerplate:latest

🧙‍♂️ Commands

Command Description npm yarn pnpm
dev Starts the development server npm run dev yarn dev pnpm dev
dev:host Starts the development server with a custom host npm run dev yarn dev pnpm dev
build Builds the production code npm run build yarn build pnpm build
watch Builds the production code and watches for changes npm run watch yarn watch pnpm watch
test Runs the unit tests npm run test yarn test pnpm test
test:e2e Open Cypress npm run test yarn test pnpm test
test:headless Runs the unit tests in headless mode npm run test:headless yarn test:headless pnpm test:headless
lint Runs the linter npm run lint yarn lint pnpm lint
lint:fix Runs the linter and fixes any linting errors npm run lint:fix yarn lint:fix pnpm lint:fix
lint:staged Runs the linter on staged files npm run lint:staged yarn lint:staged pnpm lint:staged
stylelint Runs the style linter npm run stylelint yarn stylelint pnpm stylelint
stylelint:fix Runs the style linter and fixes any style linting errors npm run stylelint:fix yarn stylelint:fix pnpm stylelint:fix
format Formats the code with prettier npm run format yarn format pnpm format