Publish the test site to Netlify (#3575)

* change from surge to netlify

* use env variables available from netlify

* add bundle size to page

* fix size cmd

Author: ryanio

.github/PULL_REQUEST_TEMPLATE.md

@@ -29,6 +29,4 @@ Fixes #(issue)
 - [ ] I ran `npm run build-all` and tested the resulting files from `dist` folder in a browser.
 - [ ] I have updated the `CHANGELOG.md` file in the root folder.
 - [ ] I have tested my code on the live network.
-- [ ] The browser visual inspection check looks ok: [sudden-playground.surge.sh][1]
-
-[1]: http://sudden-playground.surge.sh/
+- [ ] I have checked the Deploy Preview and it looks correct.

.github/workflows/build.yml

@@ -51,8 +51,6 @@ jobs:
             CI: true
             DISPLAY: :99.0
             PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
-            SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
-            SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
             BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}
         steps:
             - uses: actions/setup-node@v1

README.md

@@ -4,7 +4,7 @@
 
 # web3.js - Ethereum JavaScript API
 
-[![Gitter][gitter-image]][gitter-url] [![StackExchange][stackexchange-image]][stackexchange-url] [![NPM Package Version][npm-image-version]][npm-url] [![NPM Package Downloads][npm-image-downloads]][npm-url] [![Build Status][actions-image]][actions-url] [![Dev Dependency Status][deps-dev-image]][deps-dev-url] [![Coverage Status][coveralls-image]][coveralls-url] [![Lerna][lerna-image]][lerna-url]
+[![Gitter][gitter-image]][gitter-url] [![StackExchange][stackexchange-image]][stackexchange-url] [![NPM Package Version][npm-image-version]][npm-url] [![NPM Package Downloads][npm-image-downloads]][npm-url] [![Build Status][actions-image]][actions-url] [![Dev Dependency Status][deps-dev-image]][deps-dev-url] [![Coverage Status][coveralls-image]][coveralls-url] [![Lerna][lerna-image]][lerna-url] [![Netlify Status][netlify-image]][netlify-url]
 
 This is the Ethereum [JavaScript API][docs]
 which connects to the [Generic JSON-RPC](https://github.com/ethereum/wiki/wiki/JSON-RPC) spec.
@@ -181,5 +181,7 @@ This project adheres to the [Release Guidelines](./REVIEW.md).
 [gitter-url]:  https://gitter.im/ethereum/web3.js
 [lerna-image]: https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
 [lerna-url]: https://lerna.js.org/
+[netlify-image]: https://api.netlify.com/api/v1/badges/1fc64933-d170-4939-8bdb-508ecd205519/deploy-status
+[netlify-url]: https://app.netlify.com/sites/web3-staging/deploys
 [stackexchange-image]: https://img.shields.io/badge/web3js-stackexchange-brightgreen
 [stackexchange-url]: https://ethereum.stackexchange.com/questions/tagged/web3js

TESTING.md

@@ -17,7 +17,7 @@ These should pass for PRs to merge:
 | typescript | dtslint | -- | TS type definitions tests |
 | dependencies  | depcheck | -- | Verifies every dependency is listed correctly in the module package |
 | bundle | test:e2e:min | [e2e.minified.js][3] | Verifies minified bundle loads in a headless browser *without* being webpacked / browserified | :white_check_mark: |
-| cdn | test:e2e:cdn | [e2e.cdn.sh][4]| Visual inspection check: publishes an (un-webpacked) site that uses web3.min.js at http://sudden-playground.surge.sh/ | :white_check_mark: |
+| cdn | test:e2e:cdn | [e2e.cdn.sh][4]| Visual inspection check: publishes an (un-webpacked) site that uses web3.min.js at https://web3-staging.netlify.app/ | :white_check_mark: |
 | windows | -- | [e2e.windows.sh][5] | Verifies Web3 installs on Windows OS / Node 12 and can connect to Infura over wss and https | :white_check_mark: |
 
 

package.json

@@ -142,7 +142,6 @@
         "puppeteer": "^1.20.0",
         "regenerator-runtime": "^0.13.3",
         "sandboxed-module": "^2.0.3",
-        "surge": "^0.21.3",
         "typescript": "^3.8.3",
         "underscore": "^1.9.1",
         "vinyl-source-stream": "^2.0.0",

scripts/e2e.cdn.sh

@@ -1,35 +1,31 @@
 #!/usr/bin/env bash
 
 # --------------------------------------------------------------------
-# Publishes a small test site that uses the packages/web3/dist/min
+# Prepares a small test site that uses the packages/web3/dist/min
 # --------------------------------------------------------------------
 
 if [ -z "$CI" ]; then
 
   echo "======================================================================"
-  echo "This script publishes a test site with surge.sh. Only run in CI."
+  echo "This script prepares a test site for Netlify. Only run in CI.         "
   echo "======================================================================"
 
   exit 1
 
 fi
 
 echo "======================================================================"
-echo "Publishing test site with surge.sh. See link below.                   "
+echo "Preparing test site for web3-staging.netlify.app                      "
 echo "======================================================================"
 
-# Mark file with current commit and branch
-sed -i "s|__COMMIT_HASH__|$GITHUB_SHA|g" scripts/html/index.html
-sed -i "s|__BRANCH__|$GITHUB_REF|g" scripts/html/index.html
-
 cp packages/web3/dist/web3.min.js scripts/html
-cd scripts
-(echo "" && exit && cat ) | npx surge --domain sudden-playground.surge.sh html
 
-# Might be running locally in development
-rm html/web3.min.js
+cd scripts/html
+
+BUNDLE_SIZE=$(wc -c web3.min.js | awk '{print $1}')
+
+# Mark file with current commit, branch, and bundle size.
+sed -i "s|__COMMIT_HASH__|$COMMIT_REF|g" index.html
+sed -i "s|__BRANCH__|$BRANCH|g" index.html
+sed -i "s|__BUNDLE_SIZE__|$BUNDLE_SIZE|g" index.html
 
-# Sometimes surge.sh fails with an auth error because it's generated a name which
-# is already taken (or something?) This test is just meant to be a visual
-# inspection check if/when there are doubts - we don't want it crash CI alot.
-exit 0

scripts/html/index.html

@@ -11,12 +11,9 @@ <h2> Latest Block </h2>
   <p id="blockNumber"></p>
   <p id="timestamp"></p>
   <p id="gasLimit"></p>
-
-  <h4> Important: this test site is shared by all pull requests & is overwritten by the most recent run. </h4>
-  <h4> It's only informative when the PR ref number listed below matches your PR. </h4>
-
   <p id="commitHash"></p>
   <p id="branch"></p>
+  <p id="bundleSize"></p>
 
   <script>
     var web3 = new Web3('https://mainnet.infura.io/v3/1d13168ffb894ad2827f2152620bd27c');
@@ -28,6 +25,7 @@ <h4> It's only informative when the PR ref number listed below matches your PR.
       document.getElementById("today").innerHTML = "Today is " + Date(block.timestamp);
       document.getElementById("commitHash").innerHTML = "Merge commit hash: " + "__COMMIT_HASH__";
       document.getElementById("branch").innerHTML = "Branch: " + "__BRANCH__";
+      document.getElementById("bundleSize").innerHTML = "Bundle size: " + "__BUNDLE_SIZE__" + " bytes";
     }
     writeBlock();
   </script>