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.