From a2257ade355dc4ef215f5ec085cf1c97472873ad Mon Sep 17 00:00:00 2001 From: Simon Taggart Date: Fri, 15 Dec 2023 11:34:34 -0800 Subject: [PATCH] chore: remove the last of Netlify (#3682) --- .gitignore | 5 +-- biome.json | 1 - internal-docs/engineering/ci.md | 14 +++---- .../engineering/developing-locally.md | 42 +++---------------- .../open-graph-image-preview-function.md | 4 +- .../engineering/environment-variables.md | 4 +- .../engineering/hosting-and-deployment.md | 13 +++--- internal-docs/engineering/on-call-rotation.md | 2 +- internal-docs/engineering/sli-slo/doc-site.md | 2 +- internal-docs/engineering/sli-slo/remix.md | 2 +- internal-docs/engineering/third-party-tool.md | 6 +-- jest.config.js | 2 - packages/paste-theme-designer/next.config.js | 6 +-- packages/paste-website/src/constants.ts | 6 +-- .../src/pages/core/upgrade-guide.mdx | 22 +++++----- 15 files changed, 41 insertions(+), 90 deletions(-) diff --git a/.gitignore b/.gitignore index bf716d263d..cd1a193f96 100644 --- a/.gitignore +++ b/.gitignore @@ -83,9 +83,6 @@ cypress/videos cypress/screenshots cypress/downloads -# Local Netlify folder -.netlify - # Yarn Folders .pnp.* .yarn/* @@ -102,4 +99,4 @@ cypress/downloads out .vscode-test -.nx/cache \ No newline at end of file +.nx/cache diff --git a/biome.json b/biome.json index 83f4aef1a7..4eefceca59 100644 --- a/biome.json +++ b/biome.json @@ -20,7 +20,6 @@ "packages/paste-website/data", ".cache/", ".next/", - ".netlify/", ".yarn/", "packages/**/dist/*", "tsconfig.build.tsbuildinfo", diff --git a/internal-docs/engineering/ci.md b/internal-docs/engineering/ci.md index 952db8db11..53b9167791 100644 --- a/internal-docs/engineering/ci.md +++ b/internal-docs/engineering/ci.md @@ -12,10 +12,10 @@ - [Danger checks](#danger-checks) - [Check package sizes](#check-package-sizes) - [CodeSandbox](#codesandbox) - - [Website test(1/2/3)](#website-test123) + - [Cypress Deployment Checks: Website test(1/2/3)](#cypress-deployment-checks-website-test123) - [Percy](#percy) - [Component Visual regression tests](#component-visual-regression-tests) - - [Netlify](#netlify) + - [Vercel](#vercel) - [Kodiak hq](#kodiak-hq) - [remove-test-label](#remove-test-label) - [Github Actions (main branch)](#github-actions-main-branch) @@ -86,9 +86,9 @@ The package size job runs on every pull request and push. It uses a [forked vers Each pull request gets its own CodeSandbox environment through the CodeSandbox Github integration. On each push the environment is updated with the working versions of Paste packages. This way we can actually test new components or changes to components in a production environment. Each environment gets a unique CodeSandbox URL which is left in a comment in the pull request. -### Website test(1/2/3) +### Cypress Deployment Checks: Website test(1/2/3) -Website tests is a test runner for Cypress and Percy, using the [Cypress Github Integration](https://docs.cypress.io/guides/dashboard/github-integration.html#Install-the-Cypress-GitHub-app). It will first wait for Netlify to finish deploying the preview of the website, and then run cypress against that url. +Website tests is a test runner for Cypress, using the [Cypress Github Integration](https://docs.cypress.io/guides/dashboard/github-integration.html#Install-the-Cypress-GitHub-app). It will first wait for Vercel to finish deploying the preview of the website, and then run cypress against that url. This makes sure we are testing deployed functionality, which for API routes can be different than local development. It will parallelize Cypress test suites across 3 boxes. @@ -110,9 +110,9 @@ Chromatic looks at our Storybook stories and takes a screenshot of each one. It We also use Chromatic to review component styles with the design team. Once the stories are built they can access the build in Chromatic and leave comments if there are any changes. All new or changed component styles need to be reviewed and approved by the design team. -### Netlify +### Vercel -We use Netlify to host and continuously deploy the Paste documentation site as well as the Paste Remix site. Netlify deploys both the production versions of each site, as well as preview versions for each pull request. For pull requests, every push will build a new preview version of each site. The preview URLs are posted in a comment in the pull request. These preview URLs can be shared with the team if content approval is needed. +We use Vercel to host and continuously deploy the Paste documentation site as well as the Paste Remix site. Vercel deploys both the production versions of each site, as well as preview versions for each pull request. For pull requests, every push will build a new preview version of each site. The preview URLs are posted in a comment in the pull request. These preview URLs can be shared with the team if content approval is needed. The production versions of each site are only built when a pull request is merged into the main branch. @@ -130,7 +130,7 @@ After any change to the PR, this action will remove the `🕵🏻‍♀️ Run w ## Github Actions (main branch) -When a pull request is merged to the main branch an additional Github action is run to publish the new package versions to NPM. The Netlify action also runs to deploy the production versions of the Paste documentation site and the Paste Remix site. The Cypress and VRT actions are also run again to verify the production version of the Paste documentation site is working properly. +When a pull request is merged to the main branch an additional Github action is run to publish the new package versions to NPM. The Vercel action also runs to deploy the production versions of the Paste documentation site and the Paste Remix site. The Cypress and VRT actions are also run again to verify the production version of the Paste documentation site is working properly. ### Version or Publish diff --git a/internal-docs/engineering/developing-locally.md b/internal-docs/engineering/developing-locally.md index 2984632810..1bab104bac 100644 --- a/internal-docs/engineering/developing-locally.md +++ b/internal-docs/engineering/developing-locally.md @@ -4,9 +4,7 @@ - [Prerequisites](#prerequisites) - [First time working on Paste](#first-time-working-on-paste) - [Environment variables](#environment-variables) - - [Login](#login) - - [Link](#link) - - [Environment variables](#environment-variables-1) + - [Pull Environment variables](#pull-environment-variables) - [Theme designer](#theme-designer) - [Website](#website) - [Building packages](#building-packages) @@ -72,40 +70,16 @@ yarn build ## Environment variables -To run the website locally you will need to have the following environment variable set. These are managed via the [Netlify CLI](https://cli.netlify.com/) which is automatically installed at the root of the repository. +To run the website locally you will need to have the following environment variable set. These can be managed via the [Vercel CLI](https://vercel.com/docs/cli). -You will need to request a login to Netlify via a Service Now ticket. +You will need to request a login to Vercel via a Service Now ticket. -### Login +### Pull Environment variables -[Log into Netlify](https://cli.netlify.com/commands/login) via the CLI. Run: - -```bash -yarn netlify login -``` - -### Link - -Link the Website and Theme Designer directories to the Netlity projects: - -```bash -yarn workspace @twilio-paste/theme-designer netlify link -``` - -```bash -yarn workspace @twilio-paste/website netlify link -``` - -### Environment variables - -Use the Netlify CLI to list the environment variables used by each website by running: +To pull the environment variables from Vercel, follow the documentation on the [Vercel CLI](https://vercel.com/docs/cli/env). #### Theme designer -```bash -yarn workspace @twilio-paste/theme-designer netlify env:list -``` - Create a `.env.local` file at the root of packages/paste-theme-designer/ Then add each environment variable with it’s value to the env file in the format of @@ -118,7 +92,7 @@ DATADOG_CLIENT_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxx CONTEXT - Set to “local”. This replicates Netlify deployment context + Set to “development”. This replicates Vercel environment variables @@ -137,10 +111,6 @@ DATADOG_CLIENT_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxx #### Website -```bash -yarn workspace @twilio-paste/website netlify env:list -``` - Create a `.env` (specifically different from theme designer) file at the root of packages/paste-website/ Then add each environment variable with it’s value to the env file in the format of diff --git a/internal-docs/engineering/doc-site/open-graph-image-preview-function.md b/internal-docs/engineering/doc-site/open-graph-image-preview-function.md index 5a9a214f7e..1c2a1ad4c2 100644 --- a/internal-docs/engineering/doc-site/open-graph-image-preview-function.md +++ b/internal-docs/engineering/doc-site/open-graph-image-preview-function.md @@ -24,6 +24,4 @@ Once the website have started running, you can hit the function at `/api/og-imag The images rendered is 800px x 420px. The information is display for the component being requested comes from Airtable, via the JS client. -[Winston](https://github.com/winstonjs/winston) does our logging, so we can observe the function running in real time in the Netlify UI. - -[Rollbar](https://docs.rollbar.com/docs/aws-lambda) wraps our function and helps log errors to the Rollbar service so we are alerted if it starts to break. +[Winston](https://github.com/winstonjs/winston) does our logging, so we can observe the function running in real time in the Vercel UI. diff --git a/internal-docs/engineering/environment-variables.md b/internal-docs/engineering/environment-variables.md index 6387aee33c..be7d32fd1f 100644 --- a/internal-docs/engineering/environment-variables.md +++ b/internal-docs/engineering/environment-variables.md @@ -2,7 +2,7 @@ Full list of Environment variables and where they are needed. -| Variable | Description | Local | GH Secrets | Netlify paste | Netlify remix | +| Variable | Description | Local | GH Secrets | Vercel paste | Vercel remix | | ------------------------------------ | --------------------------------------------------------------------- | ----- | ---------- | ------------- | ------------- | | AIRTABLE_APIKEY | Airtable API key for Next | ✅ | | ✅ | | | AIRTABLE_BASEID | Airtable Base to look up data | ✅ | | ✅ | | @@ -13,8 +13,6 @@ Full list of Environment variables and where they are needed. | NEXT_PUBLIC_DATADOG_APPLICATION_ID | Datadog application ID for docsite RUM tracking | ✅ | | ✅ | | | NEXT_PUBLIC_DATADOG_CLIENT_TOKEN | Datadog client token for docsite RUM tracking | ✅ | | ✅ | | | NEXT_PUBLIC_ENVIRONMENT_CONTEXT | Informs Next which deployment environment its in | ✅ | | ✅ | | -| NETLIFY_SITE_ID | Docsite site ID for Netlify deployment wait in GH actions | | ✅ | | | -| NETLIFY_TOKEN | Docsite token for Netlify deployment wait in GH actions | | ✅ | | | | NPM_TOKEN | NPM package publish token | | ✅ | | | | SLACK_BOT_USER_OAUTH_ACCESS_TOKEN | Slack app oath access token for release posting | | ✅ | | | | SLACK_RELEASE_CHANNEL_ID | Slack app channel id for release posting in | | ✅ | | | diff --git a/internal-docs/engineering/hosting-and-deployment.md b/internal-docs/engineering/hosting-and-deployment.md index 7e5b657a24..6cebcaecbe 100644 --- a/internal-docs/engineering/hosting-and-deployment.md +++ b/internal-docs/engineering/hosting-and-deployment.md @@ -3,17 +3,14 @@ - [Hosting and Deployment](#hosting-and-deployment) - [Environment variables](#environment-variables) -We use [Netlify](https://netlify.com/) to host and deploy our web site and web apps. +We use [Vercel](https://vercel.com/) to host and deploy our web site and web apps. -Because we use [NextJS](https://nextjs.org/) we take advantage of the [Essential Next.js Plugin](https://docs.netlify.com/integrations/frameworks/next-js/#essential-next-js-build-plugin). -We have a Netlify project for: +- [Paste Documentation Site](https://vercel.com/twilio/paste-docs) - [https://paste.twilio.design](https://paste.twilio.design) +- [Paste Remix](https://vercel.com/twilio/paste-remix) - [https://remix.twilio.design](https://remix.twilio.design) +- [Paste Prototyping Kit](https://vercel.com/twilio/paste-prototype-kit) - -- [Paste Documentation Site](https://app.netlify.com/sites/paste-docs/overview) - [https://paste.twilio.design](https://paste.twilio.design) -- [Paste Remix](https://app.netlify.com/sites/paste-theme-designer/overview) - [https://remix.twilio.design](https://remix.twilio.design) -- [Paste Prototyping Kit](https://app.netlify.com/sites/paste-prototype-kit/overview) - - -Netlify is integrated into each of the Github repositories that contain those web properties using the [GitHub integration](https://github.com/apps/netlify). +Vercel is integrated into each of the Github repositories that contain those web properties using the [GitHub integration](https://github.com/apps/vercel). Due to the GitHub integration we get a preview deployment of the web apps in that repo for each commit in Pull Requests. We also get automatic Domain aliasing when we merge to main. diff --git a/internal-docs/engineering/on-call-rotation.md b/internal-docs/engineering/on-call-rotation.md index c57a14af1c..cbb610d56c 100644 --- a/internal-docs/engineering/on-call-rotation.md +++ b/internal-docs/engineering/on-call-rotation.md @@ -12,7 +12,7 @@ During your rotation, you will be responsible for responding to an incident with ### Things that may trigger an incident include: -- Netlify outages: +- Vercel outages: - The docs site may go down - Remix might go down - Airtable outage (an ongoing outage could prevent site deployments or break an attempted site deployment) diff --git a/internal-docs/engineering/sli-slo/doc-site.md b/internal-docs/engineering/sli-slo/doc-site.md index 0b3fff58d1..8971ba6f2f 100644 --- a/internal-docs/engineering/sli-slo/doc-site.md +++ b/internal-docs/engineering/sli-slo/doc-site.md @@ -21,7 +21,7 @@ All user sessions are tracked captured in DataDog RUM. | Type | Name | SLA | Notes | | -------- | ------- | ------- | ------------------------------------------------------------------- | -| External | Netlify | 99.999% | If Netlify breaches SLA the whole site will go down, with no backup | +| External | Vercel | 99.999% | If Vercel breaches SLA the whole site will go down, with no backup | ## SLIs and SLOs diff --git a/internal-docs/engineering/sli-slo/remix.md b/internal-docs/engineering/sli-slo/remix.md index d8ac5298a4..343d34d45d 100644 --- a/internal-docs/engineering/sli-slo/remix.md +++ b/internal-docs/engineering/sli-slo/remix.md @@ -20,7 +20,7 @@ All user sessions are tracked captured in DataDog RUM. | Type | Name | SLA | Notes | | -------- | ------- | ------- | ------------------------------------------------------------------- | -| External | Netlify | 99.999% | If Netlify breaches SLA the whole site will go down, with no backup | +| External | Vercel | 99.999% | If Vercel breaches SLA the whole site will go down, with no backup | ## SLIs and SLOs diff --git a/internal-docs/engineering/third-party-tool.md b/internal-docs/engineering/third-party-tool.md index 180bbea434..4f1cff255a 100644 --- a/internal-docs/engineering/third-party-tool.md +++ b/internal-docs/engineering/third-party-tool.md @@ -4,7 +4,7 @@ - [Chromatic](#chromatic) - [Percy](#percy) - [Cypress](#cypress) - - [Netlify](#netlify) + - [Vercel](#vercel) We use various third party tools in order to successfully work on and deploy Paste. Each tool is used for a specific purpose, but all help make Paste a better product. @@ -22,6 +22,6 @@ Percy is another VRT tool, but this time it is better suited to full page tests. For end to end testing, we use Cypress. Cypress makes setting up, writing, running and debugging tests easy. With Cypress, we can write and debug tests locally using the browser. We can also run Cypress via the command line as part of our CI/CD integration. Each test will need to pass before merging a PR. Currently, end to end testing is only used on the documentation site, but that may change in the future. -## Netlify +## Vercel -Netlify is one of the industry leaders in static site hosting. It comes with Github integration out of the box, which allows us to continuously deploy both the documentation site and theme designer site. For each site, Netlify provides a preview site for every PR. The preview sites allow us to verify any changes we’ve made to either site. We can also use these preview links to send around for reviews. +Vercel is one of the industry leaders in static site hosting. It comes with Github integration out of the box, which allows us to continuously deploy both the documentation site and theme designer site. For each site, Vercel provides a preview site for every PR. The preview sites allow us to verify any changes we’ve made to either site. We can also use these preview links to send around for reviews. diff --git a/jest.config.js b/jest.config.js index a1e62e0889..71f324d514 100644 --- a/jest.config.js +++ b/jest.config.js @@ -13,8 +13,6 @@ module.exports = { "/apps/", "/packages/(?:.+?)/.next/", "/templates/(?:.+?)/.next/", - "/packages/(?:.+?)/.netlify/", - "/.netlify/", "/.nx/", ], cacheDirectory: ".jest-cache", diff --git a/packages/paste-theme-designer/next.config.js b/packages/paste-theme-designer/next.config.js index 7cb01f2bd6..1ff0ef4586 100644 --- a/packages/paste-theme-designer/next.config.js +++ b/packages/paste-theme-designer/next.config.js @@ -2,9 +2,7 @@ module.exports = { env: { DATADOG_APPLICATION_ID: process.env.DATADOG_APPLICATION_ID, DATADOG_CLIENT_TOKEN: process.env.DATADOG_CLIENT_TOKEN, - // Netlify or Vercel (whilst we migrate) environment context - ENVIRONMENT_CONTEXT: process.env.CONTEXT || process.env.VERCEL_ENV, - // Netlify or Vercel (whilst we migrate) deploy url - DEPLOY_URL: process.env.DEPLOY_URL || process.env.VERCEL_URL, + ENVIRONMENT_CONTEXT: process.env.VERCEL_ENV, + DEPLOY_URL: process.env.VERCEL_URL, }, }; diff --git a/packages/paste-website/src/constants.ts b/packages/paste-website/src/constants.ts index 13d74ff1a6..b4fa9d872c 100644 --- a/packages/paste-website/src/constants.ts +++ b/packages/paste-website/src/constants.ts @@ -36,11 +36,7 @@ export const DATADOG_CLIENT_TOKEN = process.env.NEXT_PUBLIC_DATADOG_CLIENT_TOKEN */ export type EnvironmentContext = "production" | "deploy-preview" | "branch-deploy" | "local"; export const ENVIRONMENT_CONTEXT: EnvironmentContext = - // comes from Netlify config - (process.env.NEXT_PUBLIC_ENVIRONMENT_CONTEXT as EnvironmentContext) || - // comes from Vercel environment - (process.env.NEXT_PUBLIC_VERCEL_ENV as EnvironmentContext) || - "local"; + (process.env.NEXT_PUBLIC_VERCEL_ENV as EnvironmentContext) || "local"; export const SidebarCategoryRoutes = { INTRODUCTION: "/introduction", diff --git a/packages/paste-website/src/pages/core/upgrade-guide.mdx b/packages/paste-website/src/pages/core/upgrade-guide.mdx index 68ba8b8227..dfe49fabff 100644 --- a/packages/paste-website/src/pages/core/upgrade-guide.mdx +++ b/packages/paste-website/src/pages/core/upgrade-guide.mdx @@ -57,7 +57,7 @@ Ensure `@types/react` and `@types/react-dom` are installed as dependencies of yo **ACTION NEEDED**: No action should be necessary. If you are still using the `__console_patch` prop with Toast and this change affects your codebase, please [reach out to us with a Github Discussion](https://github.com/twilio-labs/paste/discussions/new/choose). -See [the full change list](/core/changelog#19-0-0) and the [documentation snapshot](https://release-v19--paste-docs.netlify.app/). +See [the full change list](/core/changelog#19-0-0). ### Core 18.0.0 - February 2023 @@ -70,7 +70,7 @@ install all the missing peer dependencies. **ACTION NEEDED**: If you are using the deprecated light/dark named design tokens, you will need to update your references to the new weak/strong named design tokens. You can find the new design tokens in the [design tokens changelog](/tokens/design-tokens-package#6-7-0). -See [the full change list](/core/changelog#18-0-0) and the [documentation snapshot](https://release-v18--paste-docs.netlify.app/). +See [the full change list](/core/changelog#18-0-0). ### Core 17.0.0 - October 2022 @@ -98,7 +98,7 @@ See [the full change list](/core/changelog#18-0-0) and the [documentation snapsh **ACTION NEEDED**: If you are using the Switch component, you will need to update your code to use the new API. You can find the new API in the [Switch documentation](/components/switch). -See [the full change list](/core/changelog#17-0-0) and the [documentation snapshot](https://deploy-preview-2779--paste-docs.netlify.app/). +See [the full change list](/core/changelog#17-0-0). ### Core 16.0.0 - October 2022 @@ -106,7 +106,7 @@ See [the full change list](/core/changelog#17-0-0) and the [documentation snapsh **ACTION NEEDED**: None, but the `__console_patch` prop will no longer work if you are on a legacy application and need to use the Modal component. We recommend migrating to the new Console application. -See [the full change list](https://github.com/twilio-labs/paste/pull/2687) and the [documentation snapshot](https://deploy-preview-2687--paste-docs.netlify.app/). +See [the full change list](https://github.com/twilio-labs/paste/pull/2687). ### Core 15.0.0 - August 2022 @@ -116,7 +116,7 @@ See [the full change list](https://github.com/twilio-labs/paste/pull/2687) and t **ACTION NEEDED**: If you are referencing the `color.dataVisualization` tokens directly from the `@twilio-paste/design-tokens` package, you will need to update your references to the `dataVisualization` bucket. -See [the full change list](https://github.com/twilio-labs/paste/pull/2579/files) and the [documentation snapshot](https://deploy-preview-2579--paste-docs.netlify.app/). +See [the full change list](https://github.com/twilio-labs/paste/pull/2579/files). ### Core 14.0.0 - June 2022 @@ -124,7 +124,7 @@ See [the full change list](https://github.com/twilio-labs/paste/pull/2579/files) **ACTION NEEDED**: None, but because `@twilio-paste/react-autosize-textarea` is a new peer dependency requirement of `@twilio-paste/textarea`, out of an abundance of caution with how npm and yarn differ with regards to handling peer dependencies, we decided to mark this change as a major to be safe. -See [the full change list](https://github.com/twilio-labs/paste/pull/2455) and the [documentation snapshot](https://deploy-preview-2455--paste-docs.netlify.app/). +See [the full change list](https://github.com/twilio-labs/paste/pull/2455). ### Core 13.0.0 @@ -132,7 +132,7 @@ See [the full change list](https://github.com/twilio-labs/paste/pull/2455) and t **ACTION NEEDED**: None, the upgrade from v10 to v11 is largely a backwards compatible upgrade, but there were significant changes to the types exported from Emotion that could impact compilation of your application when using Typescript. -See [the full change list](https://github.com/twilio-labs/paste/pull/2393) and the [documentation snapshot](https://deploy-preview-2393--paste-docs.netlify.app/). +See [the full change list](https://github.com/twilio-labs/paste/pull/2393). ### Core 12.0.0 @@ -140,7 +140,7 @@ See [the full change list](https://github.com/twilio-labs/paste/pull/2393) and t **ACTION NEEDED**: None, but you should be aware of the change due to the fact that refs on Icons are now assigned differently, and there is the potential for exported types to be different. -See [the full change list](https://github.com/twilio-labs/paste/pull/2359) and the [documentation snapshot](https://deploy-preview-2359--paste-docs.netlify.app/). +See [the full change list](https://github.com/twilio-labs/paste/pull/2359). ### Core 11.0.0 @@ -162,7 +162,7 @@ See [the full change list](https://github.com/twilio-labs/paste/pull/2359) and t } from '@twilio-paste/design-tokens/dist/tokens.common'; ``` -See [the full change list](https://github.com/twilio-labs/paste/pull/2149) and the [documentation snapshot](https://62670a903c653a000973739e--paste-docs.netlify.app/). +See [the full change list](https://github.com/twilio-labs/paste/pull/2149). ### Core 10.0.0 @@ -179,7 +179,7 @@ See [the full change list](https://github.com/twilio-labs/paste/pull/2149) and t ``` -See [the full change list](https://github.com/twilio-labs/paste/pull/1617) and the [documentation snapshot](https://6201b7fc1c305e0007f5619d--paste-docs.netlify.app/). +See [the full change list](https://github.com/twilio-labs/paste/pull/1617). ### Core 9.0.0 @@ -222,7 +222,7 @@ See [the full change list](https://github.com/twilio-labs/paste/pull/1617) and t ``` -See [the full change list](https://github.com/twilio-labs/paste/pull/2149) and the [documentation snapshot](https://60db9a93dac22a00072c060b--paste-docs.netlify.app/). +See [the full change list](https://github.com/twilio-labs/paste/pull/2149). ### Core 4.3.2