Skip to content

Commit

Permalink
refactor(@embark/api): in dev use cockpit redirect instead of proxy
Browse files Browse the repository at this point in the history 
Embark API server's development proxy from port 55555 to 3000 was attempting to
inappropriately forward an `/embark-api/` endpoint for the blockchain process
logs to Create React App's development server. Why it was only happening for
the one endpoint is not known but probably has to do with timing around
registration of the API server's express routes.

The problem can be fixed with a one-line `filter:` function in the options for
`express-http-proxy`. However, it was realized that to fix an unrelated
problem, whereby the proxy doesn't forward websockets to CRA such that hot
reload doesn't work when accessing `embark-ui` in development on port 55555, a
switch to `http-proxy-middleware` would be required. That was quickly
attempted (easy switch) but there are outstanding [difficulties][bug] with
`webpack-dev-server` and `node-http-proxy` that cause CRA to crash.

Switch strategies and refactor the API module to serve a page on port 55555 (in
development only) that alerts the developer `embark-ui` should be accessed on
port 3000. The page redirects (client-side) after 10 seconds, with URL query
params and/or hash preserved. A future version could instead do client-side
polling of port 3000 with `fetch` and then redirect only once it's
available. The reason for not redirecting immediately is that the intermediate
page makes it more obvious what needs to be done, e.g. CRA dev server may need
to be started with `yarn start`.

[bug]: webpack/webpack-dev-server#1642
  • Loading branch information
@michaelsbradleyjr
michaelsbradleyjr committed Apr 16, 2019
1 parent 3988fb4 commit ea41cc6
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 70 deletions.
1 change: 0 additions & 1 deletion packages/embark/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,6 @@
"@types/body-parser": "1.17.0",
"@types/cors": "2.8.4",
"@types/express": "4.16.0",
"@types/express-http-proxy": "1.5.1",
"@types/express-ws": "3.0.0",
"@types/find-up": "2.1.0",
"@types/globule": "1.1.3",
Expand Down
135 changes: 74 additions & 61 deletions packages/embark/src/lib/modules/api/server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import bodyParser from "body-parser";
import cors from "cors";
import {Embark, Plugins} from "embark";
import express, {NextFunction, Request, Response} from "express";
import proxy from "express-http-proxy";
import expressWs from "express-ws";
import findUp from "find-up";
import helmet from "helmet";
Expand Down Expand Up @@ -87,15 +86,12 @@ export default class Server {
});
}

private makePage(reloadSeconds: number, body: string) {
private makePage(body: string) {
return (`
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
${this.isInsideMonorepo ? `
<meta http-equiv="refresh" content="${reloadSeconds}">
` : ""}
<title>Embark API Server</title>
<style type="text/css">
code {
Expand All @@ -112,47 +108,78 @@ export default class Server {
</head>
<body>
${body}
${this.isInsideMonorepo ? `
<p>this page will automatically reload
in <span id="timer">${reloadSeconds}</span> seconds</p>
<script>
let timeLeft = ${reloadSeconds};
const span = document.querySelector("#timer");
setInterval(() => {
if (timeLeft >= 1) { timeLeft -= 1; }
span.innerText = \`\${timeLeft}\`;
}, 1000);
</script>
` : ""}
</body>
</html>
`.trim().split("\n").map((str) => str.trim()).filter((str) => str).join("\n"));
}

private makePage404(reloadSeconds: number, envReport: string, inside: string, notice: string) {
return this.makePage(reloadSeconds, `
return this.makePage(`
${envReport}
<p>missing build for package <code>embark-ui</code> ${inside}</p>
${notice}
${this.isInsideMonorepo ? `
<p>this page will automatically reload
in <span id="timer">${reloadSeconds}</span> seconds</p>
<script>
let timeLeft = ${reloadSeconds};
const span = document.querySelector("#timer");
const timer = window.setInterval(() => {
if (timeLeft >= 1) {
timeLeft -= 1;
span.innerText = \`\${timeLeft}\`;
}
if (!timeLeft) {
window.clearInterval(timer);
window.location.reload(true);
}
}, 1000);
</script>
` : ""}
`);
}

private makePageEConnError(reloadSeconds: number, waitingFor: string) {
return this.makePage(reloadSeconds, `
<p><code>lib/modules/api/server</code> inside the monorepo at
<code>${path.join(this.monorepoRootDir, "packages/embark")}</code> is
waiting for the Create React App development server of package
<code>embark-ui</code> to ${waitingFor} at
<code>localhost:55555</code></p>
${waitingFor === "become available" ? `
<p>please run either:</p>
<p><code>cd ${this.monorepoRootDir} && yarn start</code><br />
or<br />
<code>cd ${path.join(this.monorepoRootDir, "packages/embark-ui")}
&& yarn start</code></p>
private makePage503(redirectSeconds: number) {
return this.makePage(`
<p><code>lib/modules/api/server</code> is inside the monorepo at
<code>${path.join(this.monorepoRootDir, "packages/embark")}</code></p>
<p>to access <code>embark-ui</code> in development use port
<code>3000</code></p>
<p>if you haven't already, please run either:</p>
<p><code>cd ${this.monorepoRootDir} && yarn start</code><br />
or<br />
<code>cd ${path.join(this.monorepoRootDir, "packages/embark-ui")} &&
yarn start</code></p>
<p>to instead use a static build from the monorepo, restart embark with:
<code>EMBARK_UI_STATIC=t embark run</code></p>
` : ""}
<p>this page will automatically redirect to <a id="redirect" href=""></a>
in <span id="timer">${redirectSeconds}</span> seconds</p>
<script>
window.embarkApiRedirect = window.location.href.replace(
\`http://\${window.location.hostname}:55555\`,
\`http://\${window.location.hostname}:3000\`
);
document.querySelector("#redirect").href = window.embarkApiRedirect;
let displayLink = window.embarkApiRedirect.slice(7);
if (displayLink.endsWith(\`\${window.location.hostname}:3000/\`)) {
displayLink = displayLink.slice(0, -1);
}
document.querySelector("#redirect").innerText = displayLink;
</script>
<script>
let timeLeft = ${redirectSeconds};
const span = document.querySelector("#timer");
const timer = window.setInterval(() => {
if (timeLeft >= 1) {
timeLeft -= 1;
span.innerText = \`\${timeLeft}\`;
}
if (!timeLeft) {
window.clearInterval(timer);
window.location.href = window.embarkApiRedirect;
}
}, 1000);
</script>
`);
}

Expand Down Expand Up @@ -195,7 +222,7 @@ export default class Server {
if (!this.isInsideMonorepo || process.env.EMBARK_UI_STATIC) {
if (existsSync(path.join(this.embarkUiBuildDir, "index.html"))) {
instance.app.use("/", express.static(this.embarkUiBuildDir));
instance.app.get("/*", (_req, res) => {
instance.app.get(/^\/(?!embark-api).*$/, (_req, res) => {
res.sendFile(path.join(this.embarkUiBuildDir, "index.html"));
});
} else {
Expand All @@ -204,7 +231,9 @@ export default class Server {
in <code>${path.dirname(this.embarkUiBuildDir)}</code>
`;
let notice = `
<p>this distribution of <code>embark-ui</code> appears to be broken</p>
<p>this distribution of <code>embark-ui</code> appears to be broken,
please <a href="https://github.com/embark-framework/embark/issues">
file an issue</a></p>
`;
if (this.isInsideMonorepo) {
envReport = `
Expand All @@ -223,40 +252,24 @@ export default class Server {
&& yarn build</code></p>
<p>restart <code>embark run</code> after building
<code>embark-ui</code></p>
<p>to instead use a live development build from the monorepo, unset
the environment variable <code>EMBARK_UI_STATIC</code> and restart
embark</p>
<p>to instead use a live development build from the monorepo: unset
the environment variable <code>EMBARK_UI_STATIC</code>, restart
embark, and visit
<a href="http://localhost:3000">http://localhost:3000</a></p>
`;
}
const page404 = this.makePage404(3, envReport, inside, notice);
const page404 = this.makePage404(10, envReport, inside, notice);
const missingBuildHandler = (_req: Request, res: Response) => {
res.status(404).send(page404);
};
instance.app.get("/", missingBuildHandler);
instance.app.get("/*", missingBuildHandler);
instance.app.get(/^\/(?!embark-api).*$/, missingBuildHandler);
}
} else {
const page503 = this.makePageEConnError(3, "become available");
const page504 = this.makePageEConnError(3, "become responsive");
instance.app.use("/", proxy("http://localhost:3000", {
// @ts-ignore
proxyErrorHandler: (err, res, next) => {
switch (err && err.code) {
case "ECONNREFUSED": {
return res.status(503).send(page503);
}
case "ECONNRESET": {
if (err.message === "socket hang up") {
return res.status(504).send(page504);
}
}
default: {
next(err);
}
}
},
timeout: 1000,
}));
const page503 = this.makePage503(10);
const unavailableBuildHandler = (_req: Request, res: Response) => {
res.status(503).send(page503);
};
instance.app.get(/^\/(?!embark-api).*$/, unavailableBuildHandler);
}

return instance;
Expand Down
8 changes: 0 additions & 8 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2723,14 +2723,6 @@
resolved "https://registry.yarnpkg.com/@types/events/-/events-1.2.0.tgz#81a6731ce4df43619e5c8c945383b3e62a89ea86"
integrity sha512-KEIlhXnIutzKwRbQkGWb/I4HFqBuUykAdHgDED6xqwXJfONCjF5VoE0cXEiurh3XauygxzeDzgtXUqvLkxFzzA==

"@types/express-http-proxy@1.5.1":
version "1.5.1"
resolved "https://registry.yarnpkg.com/@types/express-http-proxy/-/express-http-proxy-1.5.1.tgz#0184017b1cfc8ab2a4954d35f90c9b4cc3d7ffcc"
integrity sha512-9SOGqwVzbudT5nzF4TjKOu0cWE0HRaTVVivwxUxYMN/7mas6Wt/W5pz53dZIs7Y0fZBjAI3RTDDr+dXtXrv+hA==
dependencies:
"@types/express" "*"
"@types/express-serve-static-core" "*"

"@types/express-serve-static-core@*":
version "4.16.0"
resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.16.0.tgz#fdfe777594ddc1fe8eb8eccce52e261b496e43e7"
Expand Down

0 comments on commit ea41cc6

Please sign in to comment.