Skip to content

Commit 2428040

Browse files
Copilotcprecioso
Copilot
and
cprecioso
authored
Add helpful message for users navigating to server root route in development (#3213)
Co-authored-by: cprecioso <[email protected]> Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: Carlos Precioso <[email protected]>
1 parent 3e6c7a9 commit 2428040

File tree

17 files changed

+596
-20
lines changed

17 files changed

+596
-20
lines changed

‎waspc/data/Generator/templates/server/src/routes/index.js‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,32 @@ import apis from './apis/index.js'
1111
{=# areThereAnyCrudRoutes =}
1212
import { rootCrudRouter } from './crud/index.js'
1313
{=/ areThereAnyCrudRoutes =}
14+
{=# isDevelopment =}
15+
import { config } from 'wasp/server'
16+
import { makeWrongPortPage } from '../views/wrong-port.js'
17+
{=/ isDevelopment =}
1418

1519

1620
const router = express.Router()
1721
const middleware = globalMiddlewareConfigForExpress()
1822

19-
router.get('/', middleware, function (_req, res) {
20-
res.status(200).send();
21-
})
23+
router.get('/', middleware,
24+
{=# isDevelopment =}
25+
function (_req, res) {
26+
const data = {
27+
appName: "{= appName =}",
28+
frontendUrl: config.frontendUrl
29+
};
30+
const wrongPortPage = makeWrongPortPage(data);
31+
res.status(200).type('html').send(wrongPortPage);
32+
}
33+
{=/ isDevelopment =}
34+
{=^ isDevelopment =}
35+
function (_req, res) {
36+
res.status(200).send();
37+
}
38+
{=/ isDevelopment =}
39+
)
2240

2341
{=# isAuthEnabled =}
2442
router.use('/auth', middleware, auth)

‎waspc/data/Generator/templates/server/src/views/wrong-port.ts‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/*
2+
This template gets rendered when you visit the root route on the server (i.e.
3+
http://localhost:3001/) in development mode.
4+
5+
Some of the data passed to this template is known at runtime and not compile
6+
time, so we need to craft the string at runtime with a JS template string. We
7+
explicitly do not use Wasp mustaches here so we don't have to reason about two
8+
different templating systems.
9+
10+
For now, we don't serve any other static files in our routes, so all the
11+
resources needed (CSS, images, etc.) must be inlined into the file.
12+
*/
13+
14+
// The /* HTML */ comment is a hint to `prettier` to format this string as HTML.
15+
export const makeWrongPortPage = ({
16+
appName,
17+
frontendUrl,
18+
}: {
19+
appName: string;
20+
frontendUrl: string;
21+
}): string => /* HTML */ `
22+
<!doctype html>
23+
<html lang="en">
24+
<head>
25+
<meta charset="UTF-8" />
26+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
27+
<title>${appName} API Server</title>
28+
29+
<style>
30+
:root {
31+
--page-background: #f0f0f0;
32+
--wrapper-background: white;
33+
--wasp-yellow: #f5cc05;
34+
--main-link-color: #1a73e8;
35+
}
36+
37+
.wrapper {
38+
font-family: system-ui, sans-serif;
39+
width: 90%;
40+
max-width: 600px;
41+
margin: 2em auto;
42+
}
43+
44+
h1,
45+
h2 {
46+
margin: 0;
47+
}
48+
49+
.main-link {
50+
text-align: center;
51+
font-size: 1.5em;
52+
font-weight: bold;
53+
font-family: ui-monospace, monospace;
54+
}
55+
56+
.icon {
57+
width: 1em;
58+
height: 1em;
59+
}
60+
61+
.wasp-title {
62+
margin: 0.5em 0;
63+
display: flex;
64+
align-items: center;
65+
gap: 0.2em;
66+
}
67+
68+
body {
69+
background-color: var(--page-background);
70+
}
71+
72+
main {
73+
background-color: var(--wrapper-background);
74+
padding: 1.5em;
75+
border-radius: 10px;
76+
}
77+
78+
a,
79+
a:visited {
80+
color: var(--main-link-color);
81+
}
82+
</style>
83+
</head>
84+
<body>
85+
<div class="wrapper">
86+
<header>
87+
<h2 class="wasp-title">
88+
<svg viewBox="0 0 161 161" class="icon" alt="Wasp Logo">
89+
<circle cx="80.5" cy="80.5" r="79" fill="var(--wasp-yellow)" />
90+
<path
91+
d="M88.67 114.33h2.91q6 0 7.87-1.89c1.22-1.25 1.83-3.9 1.83-7.93V93.89c0-4.46.65-7.7 1.93-9.73s3.51-3.43 6.67-4.2q-4.69-1.08-6.65-4.12c-1.3-2-2-5.28-2-9.77V55.44q0-6-1.83-7.93t-7.87-1.88h-2.86V39.5h2.65q10.65 0 14.24 3.15t3.59 12.62v10.29c0 4.28.77 7.24 2.29 8.87s4.3 2.44 8.32 2.44h2.74V83h-2.74q-6 0-8.32 2.49c-1.52 1.65-2.29 4.64-2.29 9v10.25q0 9.47-3.59 12.64t-14.24 3.12h-2.65Z"
92+
/>
93+
<path d="M38.5 85.15h37.33v7.58H38.5Zm0-17.88h37.33v7.49H38.5Z" />
94+
</svg>
95+
Wasp
96+
</h2>
97+
</header>
98+
99+
<main>
100+
<h1>${appName} API Server</h1>
101+
<p>
102+
The server is up and running. This is the backend part of your Wasp
103+
application.
104+
</p>
105+
<p>
106+
If you want to visit your frontend application, go to this URL in
107+
your browser:
108+
</p>
109+
<a href="${frontendUrl}" class="main-link">
110+
<p>${frontendUrl}</p>
111+
</a>
112+
<p>
113+
<small>
114+
This message is shown because you are running the server in
115+
development mode. In production, this route would not show
116+
anything.
117+
</small>
118+
</p>
119+
</main>
120+
</div>
121+
</body>
122+
</html>
123+
`;

‎waspc/e2e-tests/snapshots/kitchen-sink-golden/snapshot-file-list.manifest‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎waspc/e2e-tests/snapshots/kitchen-sink-golden/wasp-app/.wasp/out/.waspchecksums‎

Lines changed: 8 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎waspc/e2e-tests/snapshots/kitchen-sink-golden/wasp-app/.wasp/out/server/src/routes/index.js‎

Lines changed: 12 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎waspc/e2e-tests/snapshots/kitchen-sink-golden/wasp-app/.wasp/out/server/src/views/wrong-port.ts‎

Lines changed: 123 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎waspc/e2e-tests/snapshots/wasp-build-golden/wasp-app/.wasp/build/.waspchecksums‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎waspc/e2e-tests/snapshots/wasp-build-golden/wasp-app/.wasp/build/server/src/routes/index.js‎

Lines changed: 5 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎waspc/e2e-tests/snapshots/wasp-compile-golden/snapshot-file-list.manifest‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎waspc/e2e-tests/snapshots/wasp-compile-golden/wasp-app/.wasp/out/.waspchecksums‎

Lines changed: 8 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)