Skip to content

Commit

Permalink
chore: remove the last of Netlify (#3682)
Browse files Browse the repository at this point in the history
  • Loading branch information
SiTaggart authored Dec 15, 2023
1 parent c5e6d70 commit a2257ad
Show file tree
Hide file tree
Showing 15 changed files with 41 additions and 90 deletions.
5 changes: 1 addition & 4 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,6 @@ cypress/videos
cypress/screenshots
cypress/downloads

# Local Netlify folder
.netlify

# Yarn Folders
.pnp.*
.yarn/*
Expand All @@ -102,4 +99,4 @@ cypress/downloads
out
.vscode-test

.nx/cache
.nx/cache
1 change: 0 additions & 1 deletion biome.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
"packages/paste-website/data",
".cache/",
".next/",
".netlify/",
".yarn/",
"packages/**/dist/*",
"tsconfig.build.tsbuildinfo",
Expand Down
14 changes: 7 additions & 7 deletions internal-docs/engineering/ci.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.

Expand All @@ -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.

Expand All @@ -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

Expand Down
42 changes: 6 additions & 36 deletions internal-docs/engineering/developing-locally.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand All @@ -118,7 +92,7 @@ DATADOG_CLIENT_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxx
<tr>
<td>CONTEXT
</td>
<td>Set to “local”. This replicates <a href="https://docs.netlify.com/configure-builds/environment-variables/#build-metadata">Netlify deployment context</a>
<td>Set to “development”. This replicates <a href="https://vercel.com/docs/projects/environment-variables/system-environment-variables">Vercel environment variables</a>
</td>
</tr>
<tr>
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
4 changes: 1 addition & 3 deletions internal-docs/engineering/environment-variables.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 || || |
Expand All @@ -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 | || | |
Expand Down
13 changes: 5 additions & 8 deletions internal-docs/engineering/hosting-and-deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion internal-docs/engineering/on-call-rotation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion internal-docs/engineering/sli-slo/doc-site.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion internal-docs/engineering/sli-slo/remix.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions internal-docs/engineering/third-party-tool.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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.
2 changes: 0 additions & 2 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ module.exports = {
"<rootDir>/apps/",
"<rootDir>/packages/(?:.+?)/.next/",
"<rootDir>/templates/(?:.+?)/.next/",
"<rootDir>/packages/(?:.+?)/.netlify/",
"<rootDir>/.netlify/",
"<rootDir>/.nx/",
],
cacheDirectory: ".jest-cache",
Expand Down
6 changes: 2 additions & 4 deletions packages/paste-theme-designer/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
};
6 changes: 1 addition & 5 deletions packages/paste-website/src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

1 comment on commit a2257ad

@vercel
Copy link

@vercel vercel bot commented on a2257ad Dec 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.