📚

Building an Angular Open Source Library

Jul 8, 2024

Building an Angular Open Source Library from Scratch

Introduction

  • First stream on YouTube, contemplating future streams on YouTube/Twitch.
  • Objective: Build an Angular open-source library from scratch.

Creating the Repository

  1. Generate Repository on GitHub:
    • Create a new repository: Release Me Daddy.
    • Initial setup and basic commit.
  2. Setup Angular Workspace:
    • Use Angular CLI version 17: ng version.
    • Generate a new workspace: ng new release-me-daddy --createApplication=false.
    • Connect repository and push initial commit.

Creating the Library and Application

  1. Generate Library:
    • Generate library: ng generate library release-me-daddy.
    • Commit and push the changes.
  2. Generate Application:
    • Generate application with SSR: ng generate application showcase --standalone --style=sass.
    • Commit and push the changes.
  3. Consuming the Library:
    • Edit components and include 'release-me-daddy' library in the application components.
    • Test basic functionality via ng serve.

Formatting and Linting

  1. Prettier Setup:
    • Install Prettier: npm install --save-dev prettier.
    • Create scripts for format checking and writing in package.json.
    • Run Prettier on the codebase: npm run format-write.
  2. ESLint Setup:
    • Add ESLint config and scripts for linting library and showcase application.
    • Commit and push changes.

Open Source Essentials

  1. Code of Conduct and Contributing Guide:
    • Add code of conduct and contributing.md files describing behavior and contribution guidelines.
  2. Licensing:
    • Add MIT License file.
  3. ReadMe and Documentation:
    • Create detailed README with installation and usage instructions.
    • Use doc-toc to generate the table of contents automatically.
  4. All Contributors Bot:
    • Initialize All Contributors bot to manage contributors.
    • Use npx all-contributors-cli for adding contributors.

Continuous Integration and Deployment with GitHub Actions

  1. CI/CD Setup:
    • Create GitHub actions for CI (.github/workflows/branch.yml): Setup lint, test, and build.
    • Create GitHub actions for releases (.github/workflows/release.yml): auto-release on tag.
  2. Testing Setup:
    • Initially used Karma but explored Jest.
    • Configured Karma with ChromeHeadless for CI testing.

Semantic Release Setup

  1. Install Semantic Release Plugins:
    • Install multiple plugins (e.g., npm install @semantic-release/...).
    • Create release.config.js or .releaserc for versioning and change log generation.
  2. Environment Variables:
    • Add GitHub and NPM tokens to GitHub secrets for automated releases.

Issues Faced and Overcome

  1. Testing Coverage Reporting: (Attempted but not resolved in stream)
    • Struggled with setting up alov report for test coverage.
  2. Automated Version Bumping Issue: (Encountered and addressed)
    • Ensured correct permissions for GitHub Actions, resolved version bumping issues.

Conclusion

  • Successful setup of an automated pipeline for Angular library development.
  • Future improvements identified: test coverage reporting and deploy showcase.
  • Consider building a reusable starter template for Angular open-source libraries.

Next Steps

  • Enhance CI/CD pipeline by figuring out and integrating coverage reports properly.
  • Consider adding customization options for the setup to make it easier for others to fork and adapt.
  • Upcoming streams may include comparing libraries built in Angular and React side by side.
  • Webinar on Angular Signals hosted by JetBrains.

Acknowledgments

  • Thanks to all participants and viewers for the interaction during the stream.