Switch from netlify to CloudFlare Pages (#5305)

* add a script that will deploy the `netlify` dir to cloudflare pages

* switch everything from netlify over to cf pages

* fix wrangler version

* add `/` to api-docs url

* fix name of cloudflare dev project

.github/ISSUE_TEMPLATE/bug.yaml

@@ -58,9 +58,9 @@ body:
       options:
         - label: The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
           required: true
-        - label: The issue occurs in the stable client (latest release) on https://hls-js.netlify.com/demo and not just on my page
+        - label: The issue occurs in the stable client (latest release) on https://hlsjs.pages.dev/demo and not just on my page
           required: true
-        - label: The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
+        - label: The issue occurs in the latest client (main branch) on https://hlsjs-dev.pages.dev/demo and not just on my page
           required: true
         - label: The stream has correct Access-Control-Allow-Origin headers (CORS)
           required: true

.github/workflows/build.yml

@@ -162,7 +162,7 @@ jobs:
         env:
           CI: true
 
-  netlify:
+  cloudflare:
     needs: [config, test_unit]
     if: needs.config.outputs.tag || needs.config.outputs.isMainBranch == 'true'
     runs-on: ubuntu-latest
@@ -197,19 +197,19 @@ jobs:
         env:
           CI: true
 
-      - name: build netlify
+      - name: build for CloudFlare
         run: |
-          ./scripts/build-netlify.sh
+          ./scripts/build-cloudflare.sh
         env:
           CI: true
 
-      - name: deploy netlify
+      - name: deploy to CloudFlare
         run: |
-          ./scripts/deploy-netlify.sh
+          ./scripts/deploy-cloudflare.sh
         env:
           CI: true
           GITHUB_TOKEN: ${{ secrets.CI_GITHUB_TOKEN }}
-          NETLIFY_ACCESS_TOKEN: ${{ secrets.NETLIFY_ACCESS_TOKEN }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
 
   update_draft_release:
     needs: [config, test_unit]

.gitignore

@@ -19,7 +19,7 @@ coverage/
 /lib
 /dist
 /dist.zip
-/netlify
+/cloudflare-pages
 /api-docs
 /api-docs-markdown
 

README.md

@@ -269,8 +269,8 @@ An overview of this project's design, it's modules, events, and error handling c
 ## API docs and usage guide
 
 - [API and usage docs, with code examples](./docs/API.md)
-- [Auto-Generated API Docs (Latest Release)](https://hls-js.netlify.com/api-docs)
-- [Auto-Generated API Docs (Development Branch)](https://hls-js-dev.netlify.com/api-docs)
+- [Auto-Generated API Docs (Latest Release)](https://hlsjs.pages.dev/api-docs)
+- [Auto-Generated API Docs (Development Branch)](https://hlsjs-dev.pages.dev/api-docs)
 
 _Note you can access the docs for a particular version using "[https://github.com/video-dev/hls.js/tree/deployments](https://github.com/video-dev/hls.js/tree/deployments)"_
 
@@ -278,18 +278,16 @@ _Note you can access the docs for a particular version using "[https://github.co
 
 ### Latest Release
 
-[https://hls-js.netlify.com/demo](https://hls-js.netlify.com/demo)
+[https://hlsjs.pages.dev/demo](https://hlsjs.pages.dev/demo)
 
 ### Master
 
-[https://hls-js-dev.netlify.com/demo](https://hls-js-dev.netlify.com/demo)
+[https://hlsjs-dev.pages.dev/demo](https://hlsjs-dev.pages.dev/demo)
 
 ### Specific Version
 
 Find the commit on [https://github.com/video-dev/hls.js/tree/deployments](https://github.com/video-dev/hls.js/tree/deployments).
 
-[![](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com)
-
 [![](https://opensource.saucelabs.com/images/opensauce/powered-by-saucelabs-badge-gray.png?sanitize=true)](https://saucelabs.com)
 
 ## Compatibility

demo/index.html

@@ -31,7 +31,7 @@
         <h2 class="title">demo</h2>
 
         <h3>
-          <a href="../api-docs">API docs | usage guide</a>
+          <a href="../api-docs/">API docs | usage guide</a>
         </h3>
       </header>
     </div>

demo/main.js

@@ -1,4 +1,4 @@
-/* global $, Hls, __NETLIFY__ */
+/* global $, Hls, __CLOUDFLARE_PAGES__ */
 /* eslint camelcase: 0 */
 
 import { pack } from 'jsonpack';
@@ -6,7 +6,7 @@ import 'promise-polyfill/src/polyfill';
 import { sortObject, copyTextToClipboard } from './demo-utils';
 import { TimelineChart } from './chart/timeline-chart';
 
-const NETLIFY = __NETLIFY__; // replaced in build
+const CLOUDFLARE_PAGES = __CLOUDFLARE_PAGES__; // replaced in build
 
 const STORAGE_KEYS = {
   Editor_Persistence: 'hlsjs:config-editor-persist',
@@ -175,26 +175,24 @@ $(document).ready(function () {
   $('#dumpfMP4').prop('checked', dumpfMP4);
   $('#levelCapping').val(levelCapping);
 
-  // link to version on npm if canary
-  // github branch for a branch version
-  // github tag for a normal tag
-  // github PR for a pr
+  // If cloudflare pages build link to branch
+  // If not a stable tag link to npm
+  // otherwise link to github tag
   function getVersionLink(version) {
-    const alphaRegex = /[-.]0\.alpha\./;
-    if (alphaRegex.test(version)) {
+    const noneStable = version.includes('-');
+    if (CLOUDFLARE_PAGES) {
+      return `https://github.com/video-dev/hls.js/tree/${encodeURIComponent(
+        CLOUDFLARE_PAGES.branch
+      )}`;
+    } else if (noneStable) {
       return `https://www.npmjs.com/package/hls.js/v/${encodeURIComponent(
         version
       )}`;
-    } else if (NETLIFY.reviewID) {
-      return `https://github.com/video-dev/hls.js/pull/${NETLIFY.reviewID}`;
-    } else if (NETLIFY.branch) {
-      return `https://github.com/video-dev/hls.js/tree/${encodeURIComponent(
-        NETLIFY.branch
+    } else {
+      return `https://github.com/video-dev/hls.js/releases/tag/v${encodeURIComponent(
+        version
       )}`;
     }
-    return `https://github.com/video-dev/hls.js/releases/tag/v${encodeURIComponent(
-      version
-    )}`;
   }
 
   const version = Hls.version;

docs/API.md

@@ -1,6 +1,6 @@
 # HLS.js v1 API
 
-See [API Reference](https://hls-js-dev.netlify.app/api-docs/) for a complete list of interfaces available in the hls.js package.
+See [API Reference](https://hlsjs-dev.pages.dev/api-docs/) for a complete list of interfaces available in the hls.js package.
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

netlify.toml

@@ -1,8 +0,0 @@
-# https://www.netlify.com/docs/netlify-toml-reference/
-
-[build]
-  publish = "netlify"
-  command = "./scripts/netlify.sh"
-
-[build.environment]
-  NODE_VERSION = "lts/*"

package.json

@@ -96,7 +96,6 @@
     "markdown-styles": "3.2.0",
     "micromatch": "4.0.5",
     "mocha": "10.2.0",
-    "netlify-cli": "12.14.0",
     "node-fetch": "3.3.0",
     "prettier": "2.8.4",
     "promise-polyfill": "8.3.0",
@@ -110,6 +109,7 @@
     "webpack": "5.76.0",
     "webpack-cli": "5.0.1",
     "webpack-dev-server": "4.11.1",
-    "webpack-merge": "5.8.0"
+    "webpack-merge": "5.8.0",
+    "wrangler": "2.12.3"
   }
 }

renovate.json

@@ -1,7 +1,6 @@
 {
   "extends": ["config:base"],
   "labels": ["dependencies", "skip-change-log"],
-  "commitMessagePrefix": "[skip netlify]",
   "prHourlyLimit": 0,
   "prConcurrentLimit": 0,
   "prCreation": "not-pending",

scripts/build-cloudflare.sh

@@ -1,12 +1,12 @@
 #!/bin/bash
 set -e
 
-root="./netlify"
+root="./cloudflare-pages"
 
 rm -rf "$root"
 mkdir "$root"
 
-echo "Building netlify..."
+echo "Building for CloudFlare..."
 
 # redirect / to /demo
 echo "/ /demo" > "$root/_redirects"
@@ -16,4 +16,4 @@ cp -r "./dist" "$root/dist"
 cp -r "./demo" "$root/demo"
 cp -r "./api-docs" "$root/api-docs"
 
-echo "Built netlify."
+echo "Built for CloudFlare."

scripts/build-on-cloudflare.sh

@@ -12,4 +12,4 @@ npm run lint
 npm run type-check
 npm run build:ci
 npm run docs
-./scripts/build-netlify.sh
+./scripts/build-cloudflare.sh

scripts/deploy-cloudflare.sh

@@ -0,0 +1,45 @@
+#!/bin/bash
+set -e
+
+# GITHUB_TOKEN and CLOUDFLARE_API_TOKEN required
+accountId="8c9d432e3647d63cd0953ca4a26e02ed"
+stableProjectName="hlsjs"
+latestProjectName="hlsjs-dev"
+
+currentCommit=$(git rev-parse HEAD)
+
+root="./cloudflare-pages"
+version="$(jq -r -e '.version' "./package.json")"
+idShort="$(echo "$currentCommit" | cut -c 1-8) ($version)"
+
+deploy () {
+  projectName=$1
+  echo "Deploying on CloudFlare to '$projectName'."
+  ./node_modules/.bin/wrangler pages publish --project-name "$projectName" --commit-dirty=true --branch=master --commit-hash="$currentCommit" $root
+  echo "Deployed on CloudFlare to '$projectName'."
+}
+
+deploy "$latestProjectName"
+
+if [[ $version != *"-"* ]]; then
+  echo "Detected new version: $version"
+  deploy "$stableProjectName"
+fi
+
+echo "Finished deploying to CloudFlare."
+
+echo "Fetching deployment urls."
+
+deploymentUrl=`curl -X GET --fail "https://api.cloudflare.com/client/v4/accounts/$accountId/pages/projects/$latestProjectName/deployments" \
+    -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
+    -H "Content-Type:application/json" | jq --raw-output --exit-status '[.result[] | select(.deployment_trigger.metadata.commit_hash == "'"$currentCommit"'")][0].url'`
+
+echo "Updating deployments branch."
+git clone --depth 1 "https://${GITHUB_TOKEN}@github.com/video-dev/hls.js.git" -b deployments "$root/deployments"
+cd "$root/deployments"
+echo "- [\`$idShort\`](https://github.com/video-dev/hls.js/commit/$currentCommit): [$deploymentUrl/]($deploymentUrl/)" >> "README.md"
+git add "README.md"
+git -c user.name="hlsjs-ci" -c user.email="40664919+hlsjs-ci@users.noreply.github.com" commit -m "update for $id"
+git push "https://${GITHUB_TOKEN}@github.com/video-dev/hls.js.git"
+cd ..
+echo "Updated deployments branch."

scripts/deploy-netlify.sh

@@ -1,43 +0,0 @@
-#!/bin/bash
-set -e
-
-# GITHUB_TOKEN and NETLIFY_ACCESS_TOKEN required
-
-currentCommit=$(git rev-parse HEAD)
-
-id=$currentCommit
-root="./netlify"
-version=$(jq -r -e '.version' "./package.json")
-idShort="$(echo "$id" | cut -c 1-8) ($version)"
-stableSiteId="deef7ecf-4c3e-4de0-b6bb-676b02e1c20e"
-
-deploy () {
-  siteId=$1
-  echo "Deploying netlify to '$siteId'."
-  ./node_modules/.bin/netlify deploy -d "$root" -m "deploy for $id" -s "$siteId" --prod -a "$NETLIFY_ACCESS_TOKEN"
-  echo "Deployed netlify to '$siteId'."
-}
-
-echo "Creating site for current commit ($id)."
-uuid=$(uuidgen)
-commitSiteName="hls-js-$uuid"
-commitSiteId=$(curl --fail -d "{\"name\":\"$commitSiteName\"}" -H "Content-Type: application/json" -X POST "https://api.netlify.com/api/v1/hls-js/sites?access_token=$NETLIFY_ACCESS_TOKEN" | jq -r '.site_id')
-echo "Created site '$commitSiteId'."
-
-deploy "$commitSiteId"
-
-if [[ $version != *"-"* ]]; then
-  echo "Detected new version: $version"
-  deploy "$stableSiteId"
-fi
-echo "Finished deploying to netlify."
-
-echo "Updating deployments branch."
-git clone --depth 1 "https://${GITHUB_TOKEN}@github.com/video-dev/hls.js.git" -b deployments "$root/deployments"
-cd "$root/deployments"
-echo "- [\`$idShort\`](https://github.com/video-dev/hls.js/commit/$id): [https://$commitSiteName.netlify.app/](https://$commitSiteName.netlify.app/)" >> "README.md"
-git add "README.md"
-git -c user.name="hlsjs-ci" -c user.email="40664919+hlsjs-ci@users.noreply.github.com" commit -m "update for $id"
-git push "https://${GITHUB_TOKEN}@github.com/video-dev/hls.js.git"
-cd ..
-echo "Updated deployments branch."

scripts/get-package-version.js

@@ -41,17 +41,9 @@ try {
     // remove v
     intermediateVersion = intermediateVersion.substring(1);
 
-    const suffix =
-      process.env.NETLIFY && process.env.CONTEXT === 'deploy-preview'
-        ? `pr.${
-            process.env.REVIEW_ID /* set by netlify */
-          }.${getCommitHash().slice(0, 8)}`
-        : process.env.NETLIFY && process.env.CONTEXT === 'branch-deploy'
-        ? `branch.${process.env.BRANCH /* set by netlify */.replace(
-            /[^a-zA-Z0-9]/g,
-            '-'
-          )}.${getCommitHash().slice(0, 8)}`
-        : `0.canary.${getCommitNum()}`;
+    const suffix = process.env.CF_PAGES
+      ? `pr.${process.env.CF_PAGES_BRANCH}.${getCommitHash().slice(0, 8)}`
+      : `0.canary.${getCommitNum()}`;
 
     newVersion = `${intermediateVersion}${isStable ? '-' : '.'}${suffix}`;
   }

webpack.config.js

@@ -262,13 +262,11 @@ const multiConfig = [
     plugins: [
       ...mainPlugins,
       new webpack.DefinePlugin({
-        __NETLIFY__: JSON.stringify(
-          env.NETLIFY === 'true'
+        __CLOUDFLARE_PAGES__: JSON.stringify(
+          env.CF_PAGES
             ? {
-                branch: env.BRANCH,
-                commitRef: env.COMMIT_REF,
-                reviewID:
-                  env.PULL_REQUEST === 'true' ? parseInt(env.REVIEW_ID) : null,
+                branch: env.CF_PAGES_BRANCH,
+                commitRef: env.CF_PAGES_COMMIT_SHA,
               }
             : {}
         ),
@@ -279,7 +277,7 @@ const multiConfig = [
 ].map((config) => {
   const baseClone = merge({}, baseConfig);
   // Strip console.assert statements from build targets
-  if (config.mode === 'production' || env.NETLIFY === 'true') {
+  if (config.mode === 'production' || env.CF_PAGES) {
     // eslint-disable-next-line no-restricted-properties
     baseClone.module.rules
       .find((rule) => rule.loader === 'babel-loader')