(chore:platform) change default static server port (#5134)

Change the default static server port from `5000` to `5042` to work around a clash in macOS Monterey and newer.

fix #5133

.github/workflows/developing.yml

@@ -62,7 +62,7 @@ jobs:
           # Just a slight delay to wait until the dev server is ready.
           sleep 3
 
-          curl --retry-connrefused --retry 5 http://localhost:5000 > /dev/null
+          curl --retry-connrefused --retry 5 http://localhost:5042 > /dev/null
           curl --retry-connrefused --retry 5 --silent http://localhost:3000 > /dev/null
 
       - name: Test viewing the dev server

.github/workflows/npm-published-simulation.yml

@@ -73,21 +73,21 @@ jobs:
         run: |
           yarn start > /tmp/stdout.log 2> /tmp/stderr.log &
 
-      - name: View some URLs on localhost:5000
+      - name: View some URLs on localhost:5042
         run: |
-          curl --retry-connrefused --retry 5 -I http://localhost:5000
+          curl --retry-connrefused --retry 5 -I http://localhost:5042
 
           # Basically, test if it 200 OKs. If not, this'll exit non-zero.
-          curl http://localhost:5000/en-US/ > /dev/null
-          curl http://localhost:5000/en-US/docs/MDN/Kitchensink > /dev/null
+          curl http://localhost:5042/en-US/ > /dev/null
+          curl http://localhost:5042/en-US/docs/MDN/Kitchensink > /dev/null
 
       - name: Test viewing the dev server
         env:
           # This will make sure the tests in `testing/tests/*.test.js` only run
           # if the development server is up and ready to be tested.
           TESTING_DEVELOPING: true
           # When running Yari from within mdn/content it only starts 1 server;
-          # the one on localhost:5000. No React dev server; the one
+          # the one on localhost:5042. No React dev server; the one
           # on localhost:3000.
           # Testing that dev server is not relevant or important in this context.
           DEVELOPING_SKIP_DEV_URL: true

.github/workflows/performance.yml

@@ -63,7 +63,7 @@ jobs:
           yarn start:static-server &
           sleep 1
           curl --retry-connrefused --retry 5 \
-            http://localhost:5000/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach/ > /dev/null
+            http://localhost:5042/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach/ > /dev/null
 
           npm install -g @lhci/cli@next
 
@@ -75,7 +75,7 @@ jobs:
 
           lhci autorun \
             --upload.target=temporary-public-storage \
-            --collect.url="http://localhost:5000/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach/"
+            --collect.url="http://localhost:5042/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach/"
 
           # TODO (as of Oct 2020)
           # Once our Lighthouse score starts to not be so terrible, we can start

.github/workflows/testing.yml

@@ -63,7 +63,7 @@ jobs:
 
           yarn start:static-server > /tmp/stdout.log 2> /tmp/stderr.log &
           sleep 1
-          curl --fail --retry-connrefused --retry 5 http://localhost:5000 > /dev/null
+          curl --fail --retry-connrefused --retry 5 http://localhost:5042 > /dev/null
 
       - name: Functional testing
         run: |

README.md

@@ -119,7 +119,7 @@ with the front-end code, ready to be served as static files.
 ## Development
 
 The `yarn start` command encapsulates the front-end dev server
-(on <http://localhost:3000>) and the `server` (on <http://localhost:5000>).
+(on <http://localhost:3000>) and the `server` (on <http://localhost:5042>).
 
 All the sub-commands of `yarn start` can be broken down and run individually
 if you want to work more rapidly.
@@ -184,7 +184,7 @@ be fairly feature-complete.
 1. [Create in account on Ngrok.com](https://dashboard.ngrok.com/signup)
 2. [Download the executable](https://ngrok.com/download)
 3. Start your Yari server with `yarn start` in one terminal
-4. Start the `ngrok` executable with: `/path/to/your/ngrok http 5000`
+4. Start the `ngrok` executable with: `/path/to/your/ngrok http 5042`
 
 This will display something like this:
 
@@ -193,8 +193,8 @@ This will display something like this:
     Version                       2.3.35
     Region                        United States (us)
     Web Interface                 http://127.0.0.1:4040
-    Forwarding                    http://920ba2108da8.ngrok.io -> http://localhost:5000
-    Forwarding                    https://920ba2108da8.ngrok.io -> http://localhost:5000
+    Forwarding                    http://920ba2108da8.ngrok.io -> http://localhost:5042
+    Forwarding                    https://920ba2108da8.ngrok.io -> http://localhost:5042
 
     Connections                   ttl     opn     rt1     rt5     p50     p90
                                   0       0       0.00    0.00    0.00    0.00
@@ -278,9 +278,9 @@ sub-dependencies. A sure way to solve it is to run:
     rm -fr node_modules
     yarn install
 
-### `Error: listen EADDRINUSE: address already in use :::5000`
+### `Error: listen EADDRINUSE: address already in use :::5042`
 
-The default server port `:5000` might be in use by another process. To resolve this,
+The default server port `:5042` might be in use by another process. To resolve this,
 you can pick any unused port (e.g., 6000) and run the following:
 
     echo SERVER_PORT=6000 >> .env

client/src/page-not-found/index.tsx

@@ -7,11 +7,11 @@ import "./index.scss";
 const FallbackLink = React.lazy(() => import("./fallback-link"));
 
 // NOTE! To hack on this component, you have to use a trick to even get to this
-// unless you use the Express server on localhost:5000.
+// unless you use the Express server on localhost:5042.
 // To get here, use http://localhost:3000/en-US/_404/Whatever/you/like
 // Now hot-reloading works and you can iterate faster.
-// Otherwise, you can use http://localhost:5000/en-US/docs/Whatever/you/like
-// (note the :5000 port) and that'll test it a bit more realistically.
+// Otherwise, you can use http://localhost:5042/en-US/docs/Whatever/you/like
+// (note the :5042 port) and that'll test it a bit more realistically.
 
 export function PageNotFound() {
   const location = useLocation();

client/src/setupProxy.js

@@ -1,6 +1,6 @@
 const { createProxyMiddleware } = require("http-proxy-middleware");
 
-const SERVER_PORT = process.env.SERVER_PORT || 5000;
+const SERVER_PORT = process.env.SERVER_PORT || 5042;
 
 console.log(`Setting up a Proxy to localhost:${SERVER_PORT}`);
 module.exports = function (app) {

docs/envvars.md

@@ -111,7 +111,7 @@ because the security of the `iframe`'s content has not been audited as
 carefully as the rest of the site.
 
 When doing local development, it's recommended to set this to
-`http://localhost:5000` in your personal `.env`.
+`http://localhost:5042` in your personal `.env`.
 
 ### `BUILD_INTERACTIVE_EXAMPLES_BASE_URL`
 
@@ -188,7 +188,7 @@ How many RSS feed entries to display on the home page.
 
 ### `SERVER_PORT`
 
-**Default: `5000`**
+**Default: `5042`**
 
 Usually the `server` module is started with `foreman` (the `nf` command)
 and this is the default port.
@@ -209,7 +209,7 @@ If you want to serve static files some a completely different directory.
 
 NOTE! Due to a quirk of how we build the client, anything `REACT_APP_*` environment
 variable that you want to be available in the production-grade built JS code
-that gets used when use `localhost:5000` can not only be set in the root `/.env`
+that gets used when use `localhost:5042` can not only be set in the root `/.env`
 file. Either use `export REACT_APP_*=...` or write it once in `/.env` and
 once in `/client/.env`.
 

docs/google-analytics.md

@@ -34,7 +34,7 @@ it's sending to Google Analytics.
 But note, when you use the `webpack` server (from `create-react-app`) that runs
 on <http://localhost:3000> this will not be present. It's only present on pages that
 are fully server-side rendered. So to test out what Google Analytics does,
-make sure you use <http://localhost:5000>.
+make sure you use <http://localhost:5042>.
 
 ## Sending events
 

docs/npm-packaging.md

@@ -76,10 +76,10 @@ Now, go to `~/content` and run:
     rm -fr node_modules
     yarn add ~/yari/mdn-yari-x.y.z.tgz
     yarn start
-    open http://localhost:5000
+    open http://localhost:5042
 
 Make sure you actually test it out fully. For example, just because
 `yarn start` starts the server OK, doesn't mean it can do all things
 it needs to do. The best place to start is to navigate into
-<http://localhost:5000> to an actual page which
+<http://localhost:5042> to an actual page which
 will need to built-on-the-fly.

docs/proxying.md

@@ -71,11 +71,11 @@ await fetch("/api/v1/whoami");
 ```
 
 ...what that does is that the request, by the Webpack dev server, is forwarded
-to our Yari server (`localhost:5000`) which in turn picks this up and proxies,
+to our Yari server (`localhost:5042`) which in turn picks this up and proxies,
 it leaving the request untouched, but essentially only changes the host name.
 
 So a request for `http://localhost:3000/api/v1/whoami` goes from your browser
-to `http://localhost:5000/api/v1/whoami` (via Node) proxies it on to
+to `http://localhost:5042/api/v1/whoami` (via Node) proxies it on to
 `http://localhost.org:8000/api/v1/whoami`. All along, any cookie tied
 to `localhost.org` is automatically appended to the request.
 

docs/spas.md

@@ -24,7 +24,7 @@ key, it renders this instead.
 
 To debug the 404 page, in local development you have two choices:
 
-- <http://localhost:5000/en-US/docs/Does/not/exist>
+- <http://localhost:5042/en-US/docs/Does/not/exist>
 
 - <http://localhost:3000/en-US/_404/Does/not/exist>
 

kumascript/src/constants.js

@@ -1,4 +1,4 @@
-const SERVER_PORT = process.env.SERVER_PORT || 5000;
+const SERVER_PORT = process.env.SERVER_PORT || 5042;
 const SERVER_URL = `http://localhost:${SERVER_PORT}`;
 
 // Allow the `process.env.BUILD_LIVE_SAMPLES_BASE_URL` to be falsy

server/fake-v1-api.js

@@ -1,6 +1,6 @@
 /**
  * The purpose of these routes is to respond with a JSON payload on
- * requests that come in to localhost:5000/api/v1/*
+ * requests that come in to localhost:5042/api/v1/*
  *
  * You can read more about it in the docs/proxying.md document.
  */

server/index.js

@@ -305,7 +305,7 @@ console.log(
     : ""
 );
 
-const PORT = parseInt(process.env.SERVER_PORT || "5000");
+const PORT = parseInt(process.env.SERVER_PORT || "5042");
 app.listen(PORT, () => {
   console.log(`Listening on port ${PORT}`);
   if (process.env.EDITOR) {

server/static.js

@@ -252,5 +252,5 @@ app.get("/*", async (req, res) => {
     .sendFile(path.join(STATIC_ROOT, "en-us", "_spas", "404.html"));
 });
 
-const PORT = parseInt(process.env.SERVER_PORT || "5000");
+const PORT = parseInt(process.env.SERVER_PORT || "5042");
 app.listen(PORT, () => console.log(`Listening on port ${PORT}`));

testing/.env

@@ -12,7 +12,7 @@ CONTENT_TRANSLATED_ROOT=testing/translated-content/files
 # testing environment. And in CI, it's always disabled anyway.
 BUILD_NO_PROGRESSBAR=true
 
-BUILD_LIVE_SAMPLES_BASE_URL=http://localhost:5000
+BUILD_LIVE_SAMPLES_BASE_URL=http://localhost:5042
 
 # As of right now (Nov 2020), the auto-complete search is disabled.
 # It's just a temporary thing whilst MDN becomes partially Kuma and

testing/README.md

@@ -27,7 +27,7 @@ yarn build
 yarn start:static-server
 ```
 
-This will start a server on <http://localhost:5000> which serves the built content.
+This will start a server on <http://localhost:5042> which serves the built content.
 Now, in a separate terminal, you can run:
 
 ```sh
@@ -178,7 +178,7 @@ echo 'CONTENT_TRANSLATED_ROOT=testing/translated-content/files' >> .env
 yarn dev
 ```
 
-Now you can browse both <http://localhost:3000> and <http://localhost:5000>
+Now you can browse both <http://localhost:3000> and <http://localhost:5042>
 to see what the content fixtures are.
 For example, you can go to <http://localhost:3000/en-US/docs/Web/Foo>.
 Again, remember to start with a fresh new terminal so that no other testing

testing/tests/developing.spec.js

@@ -9,7 +9,7 @@ function devURL(pathname = "/") {
 }
 
 const SERVER_BASE_URL =
-  process.env.DEVELOPING_SERVER_BASE_URL || "http://localhost:5000";
+  process.env.DEVELOPING_SERVER_BASE_URL || "http://localhost:5042";
 
 function serverURL(pathname = "/") {
   return `${SERVER_BASE_URL}${pathname}`;

testing/tests/headless.auth.spec.js

@@ -1,7 +1,7 @@
 const { test, expect } = require("@playwright/test");
 
 function testURL(pathname = "/") {
-  return `http://localhost:5000${pathname}`;
+  return `http://localhost:5042${pathname}`;
 }
 
 test.describe("Visiting pages related and requiring authentication", () => {

testing/tests/headless.index.spec.js

@@ -1,7 +1,7 @@
 const { test, expect } = require("@playwright/test");
 
 function testURL(pathname = "/") {
-  return `http://localhost:5000${pathname}`;
+  return `http://localhost:5042${pathname}`;
 }
 
 test.describe("Basic viewing of functional pages", () => {

testing/tests/headless.search.spec.js

@@ -1,7 +1,7 @@
 const { test, expect } = require("@playwright/test");
 
 function testURL(pathname = "/") {
-  return "http://localhost:5000" + pathname;
+  return "http://localhost:5042" + pathname;
 }
 
 test.describe("Autocomplete search", () => {

testing/tests/headless.sitesearch.spec.js

@@ -1,7 +1,7 @@
 const { test, expect } = require("@playwright/test");
 
 function testURL(pathname = "/") {
-  return "http://localhost:5000" + pathname;
+  return "http://localhost:5042" + pathname;
 }
 
 test.describe("Site search", () => {

testing/tests/redirects.test.js

@@ -2,7 +2,7 @@ const got = require("got");
 const braces = require("braces");
 
 function serverURL(pathname = "/") {
-  return `http://localhost:5000${pathname}`;
+  return `http://localhost:5042${pathname}`;
 }
 
 function url_test(from, to, { statusCode = 301 } = {}) {

tool/cli.js

@@ -35,7 +35,7 @@ const { runOptimizeClientBuild } = require("./optimize-client-build");
 const { runBuildRobotsTxt } = require("./build-robots-txt");
 const kumascript = require("../kumascript");
 
-const PORT = parseInt(process.env.SERVER_PORT || "5000");
+const PORT = parseInt(process.env.SERVER_PORT || "5042");
 
 // The Google Analytics pageviews CSV file parsed, sorted (most pageviews
 // first), and sliced to this number of URIs that goes into the JSON file.