vercel
Github Actions with Vercel CI/CD Example
Description
This is a new example showing how a user might leverage Vercel CI/CD and add a custom GitHub action for end to end testing (and any additional checks) and also perform a release. The example came up in the context of a customer requesting a best practice for Trunk Based Development. The action .yaml contains everything needed and the README details the CI/CD process.
Example Readme has full details
Demo URL
There is a video included at the bottom of the README showing how this example can work
Type of Change
- [x] New Example
New Example Checklist
This example only contains an index.html file since this is a CI/CD example.
- [x] 🛫
npm run new-examplewas used to create the example - [x] 📚 The template wasn't used but I carefuly read the Adding a new example steps and implemented them in the example
- [N/A] 📱 Is it responsive? Are mobile and tablets considered?
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated |
|---|---|---|---|---|
| ai-chatgpt | ✅ Ready (Inspect) | Visit Preview | 💬 Add your feedback | Feb 8, 2023 at 3:44PM (UTC) |
| app-dir-css-in-js | ✅ Ready (Inspect) | Visit Preview | 💬 Add your feedback | Feb 8, 2023 at 3:44PM (UTC) |
| app-dir-share-state | ✅ Ready (Inspect) | Visit Preview | 💬 Add your feedback | Feb 8, 2023 at 3:44PM (UTC) |
| edge-functions-news | ❌ Failed (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| static-tweets-tailwind | ✅ Ready (Inspect) | Visit Preview | 💬 Add your feedback | Feb 8, 2023 at 3:44PM (UTC) |
72 Ignored Deployments
| Name | Status | Preview | Comments | Updated |
|---|---|---|---|---|
| app-dir-i18n | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-edge-functions | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-edge-middleware | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-image-optimization | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-isr | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-overrides | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-prerender-functions | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-preview-mode | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-routes | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-serverless-functions | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-static-files | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| build-output-api-wildcard | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| domains-api | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-ab-testing-google-optimize | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-ab-testing-statsig | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-api-routes-cache-control | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-api-routes-hello-world | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-api-routes-json-response | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-api-routes-query-parameters | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-ab-testing-simple | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-add-header | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-api-rate-limit | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-api-rate-limit-and-tokens | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-authed-proxy | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-basic-auth-password | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-bot-protection-botd | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-bot-protection-datadome | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-cookies | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-cors | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-crypto | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-feature-flag-configcat | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-feature-flag-posthog | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-feature-flag-split | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-geolocation | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-hostname-rewrites | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-i18n | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-image-response | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-ip-blocking | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-ip-blocking-datadome | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-json-response | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-jwt-authentication | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-power-parity-pricing | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-power-parity-pricing-strategies | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-query-params-filter | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-redirects-upstash | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-functions-streams | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-maintenance-page | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-rewrites-upstash | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| edge-user-agent-based-rendering | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| example-auth-with-ory | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| example-feature-flag-apple-store | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| example-reduce-image-bandwidth-usage | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| feature-flag-optimizely | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| i18n | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| mint-nft | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-cms-contentstack-commerce | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-combining-data-fetching-strategies | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-image-fallback | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-image-offset | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-loading-web-fonts | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-microfrontends | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-microfrontends-docs | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-monorepo | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-on-demand-isr | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-pagination-with-ssg | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-reuse-responses | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-script-component-ad | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-script-component-strategies | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-subdomains-auth | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| solutions-testing | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| wasm-rust-hello-world | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) | ||
| wasm-rust-xor | ⬜️ Ignored (Inspect) | Feb 8, 2023 at 3:44PM (UTC) |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
I am happy to be merged as it is in its current state. The comment has been added for visibility and discussion.
Added some comments but overall I don't see why this new example can't just be a PR to https://github.com/vercel/examples/tree/main/solutions/testing
Good question. This example should be named "Trunk Based Development CI/CD workflow example". Testing is not the focus of this example. To simulate testing, it only uses 30 seconds of mock delay.
Added some comments but overall I don't see why this new example can't just be a PR to https://github.com/vercel/examples/tree/main/solutions/testing
Update: can the use case here be explained a bit more? production is ready once a PR to the main branch is merged and the deployment for it gets created, the action here is running tests over that branch and then adding another alias on the same deployment if the tests worked, how is that an improvement over running the tests over the preview branch before merged and not allowing a merge unless E2E works? The production deployment won't have any additional changes that can justify running E2E again before releasing IMO, if that were needed then that would be the use case of "staging".
@lfades The justification for this use case is associated with having a Trunk Based Development workflow. For scenarios where e2e tests run against a Preview deploy prior to merging into main, Preview may be using non-production data (e.g. content, env variables, pre-production services), and some teams may want to test closer to the production end user experience. Testing e2e on a staging environment is one way to accomplish this, but some teams following a Trunk Based workflow may require testing that is on the production environment. This example shows another version, similar to a blue-green deployment, where e2e tests happen directly on a Production deployment and when all tests pass the public domain is aliased to that deployment URL that was previously inactive / inaccessible to end users.
If you think that additional context is helpful here I will update the readme.
@ah100101 Rename the example and update the readme. Having the action aliasing to production is not ideal, if checks fail the reporting is less useful because there's no open PR, and not having a PR open also works badly with third party apps that do checks in GH PRs, so having a middle branch that's also production can work better. That branch can make automatic PRs and update them when something new is merged into the branch, so that you can properly follow up fixes. But I'm okay with taking what's in here for now 👍
@ah100101 Rename the example and update the readme. Having the action aliasing to production is not ideal, if checks fail the reporting is less useful because there's no open PR, and not having a PR open also works badly with third party apps that do checks in GH PRs, so having a middle branch that's also production can work better. That branch can make automatic PRs and update them when something new is merged into the branch, so that you can properly follow up fixes. But I'm okay with taking what's in here for now 👍
@lfades Circling back to this PR, the example has been renamed and readme updated. Are there more changes you would like to see done here? Thanks!
Isn't the term "trunk based development" the whole point of the example, though?
If the point of the example is to use the term, then sure.
Vercel does trunk based development by default, and that's not clear here. This is a more advanced use case where you want to do something before adding a production alias.
To make sure we refer to one single branch, it would be very helpful for users if the name of this example included "trunk-based". It is possible to use other names, such as:
- Advanced Trunk Based Development (true since we run extra checks on new deployments before promoting them to production)
- Gated trunk-based deployments (same as above)
- Blue/green Trunk Based deployments (true since we have two deployments running at the same time)
WDYT?