Skip to content

Commit

Permalink
Proxy site search to developer.mozilla.org by default (mdn#2865)
Browse files Browse the repository at this point in the history
* proxy site-search to developer.mozilla.org by default

* it works

* add warning

* remove unused import
  • Loading branch information
peterbe authored Feb 10, 2021
1 parent 4930460 commit d3aa411
Show file tree
Hide file tree
Showing 7 changed files with 85 additions and 49 deletions.
24 changes: 24 additions & 0 deletions client/src/site-search/search-results.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import { Link, createSearchParams, useSearchParams } from "react-router-dom";
import useSWR from "swr";

import { CRUD_MODE } from "../constants";
import { useLocale } from "../hooks";
import { appendURL } from "./utils";

Expand Down Expand Up @@ -157,6 +158,8 @@ export default function SearchResults() {
{/* It only makes sense to display the sorting options if anything was found */}
{hitCount > 1 && <SortOptions />}

<RemoteSearchWarning />

<Results {...data} />
<Pagination
currentPage={currentPage}
Expand All @@ -175,6 +178,27 @@ export default function SearchResults() {
);
}

function RemoteSearchWarning() {
if (CRUD_MODE) {
// If you're in CRUD_MODE, the search results will be proxied from a remote
// Kuma and it might be confusing if a writer is wondering why their
// actively worked-on content isn't showing up in searches.
// The default value in the server is not accessible from the react app,
// so it's hardcoded here in the client.
const kumaHost = process.env.REACT_APP_KUMA_HOST || "developer.mozilla.org";
return (
<div className="notecard warning">
<h4>Note!</h4>
<p>
Site-search is proxied to <code>{kumaHost}</code> which means that
some content found doesn't reflect what's in your current branch.
</p>
</div>
);
}
return null;
}

function SortOptions() {
const [searchParams] = useSearchParams();
const querySort = searchParams.get("sort") || SORT_OPTIONS[0][0];
Expand Down
7 changes: 6 additions & 1 deletion client/src/user-context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,12 @@ export function UserDataProvider(props: { children: React.ReactNode }) {
const [userData, setUserData] = useState<UserData | null>(null);

useEffect(() => {
if (DISABLE_AUTH) return;
if (DISABLE_AUTH) {
// Remember, the presence of the "Sign in" link depends on the resolution
// of the /api/v1/whoami XHR fetch.
// So exiting here will imply that it doesn't even show the sign in link.
return;
}

fetch("/api/v1/whoami")
.then((response) => {
Expand Down
15 changes: 11 additions & 4 deletions docs/proxying.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@
## Quickstart

Suppose you're working on a feature, in Yari, where you want to make use
of API responses in Kuma. The quickest way to accomplish this is as follows:
of API responses in a local Kuma. The quickest way to accomplish this is as follows:

1. Start `cd /path/to/kuma && docker-compose up` in a separate terminal
1. Edit the root `.env` file and put in the line: `HOST=localhost.org`
1. Edit the root `.env` file and...

- put in the line: `HOST=localhost.org`
- put in the line: `REACT_APP_KUMA_HOST=localhost.org:8000`

1. Now use <http://localhost.org:3000>

**Note!** You have to use <http://localhost.org:3000> (note the extra `.org`)
and not the usual <http://localhost:3000> so the browser sends your "Kuma cookie".

**Note!** When you edit your root `.env` file, you need to stop `yarn dev`
and start it up again.

Expand Down Expand Up @@ -80,8 +87,8 @@ 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 put and proxies
it leaving the request untouched but essentially only changes the host name.
to our Yari server (`localhost:5000`) 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
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,12 @@
"dotenv": "8.2.0",
"ejs": "3.1.6",
"express": "4.17.1",
"express-http-proxy": "1.6.2",
"file-type": "16.2.0",
"front-matter": "4.0.2",
"fs-extra": "9.1.0",
"glob": "^7.1.6",
"got": "11.8.1",
"http-proxy-middleware": "1.0.6",
"image-size": "0.9.3",
"imagemin": "7.0.1",
"imagemin-gifsicle": "7.0.0",
Expand Down
3 changes: 2 additions & 1 deletion server/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ require("dotenv");

const STATIC_ROOT =
process.env.SERVER_STATIC_ROOT || path.join(__dirname, "../client/build");
const PROXY_HOSTNAME = process.env.REACT_APP_KUMA_HOST || "localhost.org:8000";
const PROXY_HOSTNAME =
process.env.REACT_APP_KUMA_HOST || "developer.mozilla.org";

const FAKE_V1_API = JSON.parse(process.env.SERVER_FAKE_V1_API || false);

Expand Down
15 changes: 10 additions & 5 deletions server/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const path = require("path");
const chalk = require("chalk");
const express = require("express");
const send = require("send");
const proxy = require("express-http-proxy");
const { createProxyMiddleware } = require("http-proxy-middleware");
const cookieParser = require("cookie-parser");
const openEditor = require("open-editor");

Expand Down Expand Up @@ -44,10 +44,15 @@ app.use(
// on `.json` files on disk or we proxy the requests to Kuma.
FAKE_V1_API
? fakeV1APIRouter
: proxy(PROXY_HOSTNAME, {
// More options are available on
// https://www.npmjs.com/package/express-http-proxy#options
proxyReqPathResolver: (req) => `/api/v1${req.url}`,
: createProxyMiddleware({
target: `${
["developer.mozilla.org", "developer.allizom.org"].includes(
PROXY_HOSTNAME
)
? "https://"
: "http://"
}${PROXY_HOSTNAME}`,
changeOrigin: true,
})
);

Expand Down
68 changes: 31 additions & 37 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2959,6 +2959,13 @@
resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.0.tgz#9140779736aa2655635ee756e2467d787cfe8a2a"
integrity sha512-c3Xy026kOF7QOTn00hbIllV1dLR9hG9NkSrLQgCVs8NF6sBU+VGWjD3wLPhmh1TYAc7ugCFsvHYMN4VcBN1U1A==

"@types/http-proxy@^1.17.4":
version "1.17.5"
resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.5.tgz#c203c5e6e9dc6820d27a40eb1e511c70a220423d"
integrity sha512-GNkDE7bTv6Sf8JbV2GksknKOsk7OznNYHSdrtvPJXO0qJ9odZig6IZKUi5RFGi6d1bf6dgIAe4uXi3DBc7069Q==
dependencies:
"@types/node" "*"

"@types/is-function@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
Expand Down Expand Up @@ -6397,7 +6404,7 @@ debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
dependencies:
ms "2.1.2"

debug@^3.0.0, debug@^3.0.1, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
debug@^3.0.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
version "3.2.6"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
Expand Down Expand Up @@ -7291,11 +7298,6 @@ [email protected], es6-iterator@~2.0.3:
es5-ext "^0.10.35"
es6-symbol "^3.1.1"

es6-promise@^4.1.1:
version "4.2.8"
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==

es6-promisify@^6.0.0:
version "6.1.1"
resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-6.1.1.tgz#46837651b7b06bf6fff893d03f29393668d01621"
Expand Down Expand Up @@ -7790,15 +7792,6 @@ expect@^26.6.0, expect@^26.6.2:
jest-message-util "^26.6.2"
jest-regex-util "^26.0.0"

[email protected]:
version "1.6.2"
resolved "https://registry.yarnpkg.com/express-http-proxy/-/express-http-proxy-1.6.2.tgz#e87152e45958cee4b91da2fdaa20a1ffd581204a"
integrity sha512-soP7UXySFdLbeeMYL1foBkEoZj6HELq9BDAOCr1sLRpqjPaFruN5o6+bZeC+7U4USWIl4JMKEiIvTeKJ2WQdlQ==
dependencies:
debug "^3.0.1"
es6-promise "^4.1.1"
raw-body "^2.3.0"

[email protected], express@^4.17.0, express@^4.17.1:
version "4.17.1"
resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
Expand Down Expand Up @@ -9467,17 +9460,6 @@ [email protected]:
statuses ">= 1.5.0 < 2"
toidentifier "1.0.0"

[email protected], http-errors@~1.7.2:
version "1.7.3"
resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
dependencies:
depd "~1.1.2"
inherits "2.0.4"
setprototypeof "1.1.1"
statuses ">= 1.5.0 < 2"
toidentifier "1.0.0"

http-errors@~1.6.2:
version "1.6.3"
resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
Expand All @@ -9488,6 +9470,17 @@ http-errors@~1.6.2:
setprototypeof "1.1.0"
statuses ">= 1.4.0 < 2"

http-errors@~1.7.2:
version "1.7.3"
resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
dependencies:
depd "~1.1.2"
inherits "2.0.4"
setprototypeof "1.1.1"
statuses ">= 1.5.0 < 2"
toidentifier "1.0.0"

http-parser-js@>=0.5.1:
version "0.5.2"
resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.2.tgz#da2e31d237b393aae72ace43882dd7e270a8ff77"
Expand All @@ -9503,7 +9496,18 @@ [email protected]:
lodash "^4.17.11"
micromatch "^3.1.10"

http-proxy@^1.17.0:
[email protected]:
version "1.0.6"
resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-1.0.6.tgz#0618557722f450375d3796d701a8ac5407b3b94e"
integrity sha512-NyL6ZB6cVni7pl+/IT2W0ni5ME00xR0sN27AQZZrpKn1b+qRh+mLbBxIq9Cq1oGfmTc7BUq4HB77mxwCaxAYNg==
dependencies:
"@types/http-proxy" "^1.17.4"
http-proxy "^1.18.1"
is-glob "^4.0.1"
lodash "^4.17.20"
micromatch "^4.0.2"

http-proxy@^1.17.0, http-proxy@^1.18.1:
version "1.18.1"
resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
Expand Down Expand Up @@ -14670,16 +14674,6 @@ [email protected]:
iconv-lite "0.4.24"
unpipe "1.0.0"

raw-body@^2.3.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.1.tgz#30ac82f98bb5ae8c152e67149dac8d55153b168c"
integrity sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==
dependencies:
bytes "3.1.0"
http-errors "1.7.3"
iconv-lite "0.4.24"
unpipe "1.0.0"

raw-loader@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.1.tgz#14e1f726a359b68437e183d5a5b7d33a3eba6933"
Expand Down

0 comments on commit d3aa411

Please sign in to comment.