TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Modern CI/CD pipeline for front end projects

1 pointsby gajusover 4 years ago

1 comment

gajusover 4 years ago
Here is what we do in my company:<p>`precommit` and `prepush` \#git hooks are used to catch issues before they are pushed upstream.<p>* `precommit` runs only on staged files (takes few seconds) * `prepush` runs eslint typescript and unit tests (takes up to 20 seconds)<p>Every time a commit is pushed:<p>1 ) We build a #docker image &amp; bundle cypress and other development dependencies. This allows us to run all subsequent tasks using the same Docker image.<p>It is fast. Takes 2-4 minutes.<p>2 ) We run 5 tasks concurrently to validate our build.<p>* ESLint * TypeScript * jest Unit tests * cypress Integration tests * Fetch, validate &amp; compile GraphQL schema<p>2 ) For every commit, we deploy a review app.<p>Review app:<p>* Allows anyone to preview what is being developed. * Allows anyone to preview our storybook. * Allows to leave visual reviews (WIP)<p>3 ) Before changes can be merged to the main branch, we use GitLab to mandate at least 1 review from the team.<p>In addition, we use GitLab review system to advise who is the best person to review the code based on which files have changed.<p>5 ) When changes are merged to the main branch, we automatically deploy to production.<p>We use argocd to implement gitops. This means that we have a detail log of everything that has been deployed, and in case of a critical error, reverting is as simple as &quot;git revert&quot; Receipt<p>6 ) Finally, we push changes regularly to the main branch. Small incremental updates, dozens of times a day.<p>This means that if things break, they are typically small things and easy to revert &#x2F; patch.<p>We use feature flags to hide any WIP features.