Supoprt Vercel deployment

.dockerignore

@@ -1,5 +1,5 @@
 .nyc_output/
+api/static/
 e2e/
 node_modules/
 reports/
-server/static/

.gitignore

@@ -1,9 +1,9 @@
 .nyc_output/
-client/public/buildinfo.txt
+api/static/
 e2e/blob-report/
 e2e/playwright/.cache/
 e2e/playwright-report/
 e2e/test-results/
 node_modules/
 reports/
-server/static/
+web/public/buildinfo.txt

.vscode/launch.json

@@ -4,14 +4,14 @@
 		{
 			"type": "node",
 			"request": "attach",
-			"name": "Debug server",
+			"name": "Debug API",
 			"port": 9229,
 			"skipFiles": ["<node_internals>/**"]
 		},
 		{
 			"type": "chrome",
 			"request": "launch",
-			"name": "Debug client",
+			"name": "Debug web",
 			"url": "http://localhost:3000",
 			"webRoot": "${workspaceFolder}"
 		}

Dockerfile

@@ -1,29 +1,29 @@
-FROM node:20-alpine as client
+FROM node:20-alpine as web
 
 USER node
 WORKDIR /home/node
 
 COPY package*.json .npmrc ./
-COPY --chown=node client/package.json client/
-RUN npm --workspace client ci
+COPY --chown=node web/package.json web/
+RUN npm --workspace web ci
 
-COPY --chown=node client/ client/
-RUN npm --workspace client run build
+COPY --chown=node web/ web/
+RUN npm --workspace web run build
 
 FROM node:20-alpine
 
 USER node
 WORKDIR /home/node
 
 COPY package*.json .npmrc ./
-COPY server/package.json server/
-RUN npm --workspace server ci --omit dev
+COPY api/package.json api/
+RUN npm --workspace api ci --omit dev
 
-COPY server/ server/
-COPY --from=client /home/node/server/static server/static/
+COPY api/ api/
+COPY --from=web /home/node/api/static api/static/
 
 EXPOSE 80
 ENV PORT=80
 
 ENTRYPOINT [ "node" ]
-CMD [ "server/server.js" ]
+CMD [ "api/server.js" ]

README.md

@@ -11,7 +11,7 @@
 - [x] Dev mode (watch modes for client and server, proxy to avoid CORS issues)
 - [x] Production build (single deployment artifact)
 - [x] [GitHub Actions] pipeline
-- [x] [Google App Engine], [Heroku] or [Render] deployment
+- [x] [Google App Engine], [Heroku], [Render] or [Vercel] deployment
 - [x] [Docker] build
 
 ## Scripts
@@ -44,6 +44,7 @@ commonly use:
 [React Router]: https://reactrouter.com/en/main
 [Render]: https://render.com/
 [SuperTest]: https://github.com/visionmedia/supertest
+[Vercel]: https://vercel.com/
 [Vite]: https://vitejs.dev/
 [Vitest]: https://vitest.dev/
 [wiki]: https://github.com/textbook/starter-kit/wiki

server/jest.config.js → api/jest.config.js

@@ -2,7 +2,7 @@
 export default {
 	collectCoverageFrom: ["**/*.js", "!static/**", "!jest.config.js"],
 	coverageDirectory: "<rootDir>/../.nyc_output/",
-	coverageReporters: [["json", { file: "server.json" }], "text"],
+	coverageReporters: [["json", { file: "api.json" }], "text"],
 	rootDir: ".",
 	transform: {},
 };

server/package.json → api/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "@starter-kit/server",
+	"name": "@starter-kit/api",
 	"private": true,
 	"version": "2.0.0",
 	"description": "Express backend",

server/utils/README.md → api/utils/README.md

@@ -1,6 +1,6 @@
 # Utilities
 
-`server/utils/` contains various utility modules. In practice, you'll probably:
+`api/utils/` contains various utility modules. In practice, you'll probably:
 
 - Import from and maybe add new options to `config.js`;
 - Import from `logger.js`; and
@@ -12,7 +12,7 @@ Creates and exposes an object representing the app's configuration. This central
 
 [Dotenv] is used to load any configuration required from a `.env` file in the root of the repository.
 
-To check if this is being used correctly, if you search your codebase, _all_ uses of `process.env` in `server/` should be in this file.
+To check if this is being used correctly, if you search your codebase, _all_ uses of `process.env` in `api/` should be in this file.
 
 ## `logger.js`
 
@@ -38,14 +38,14 @@ router.get("/welcome", (_, res) => {
 - The default [log level] is `"info"`
 - The log level can be overridden by setting the `LOG_LEVEL` environment variable
 - The log level is automatically set to `"debug"` in development mode (`npm run dev`)
-- ESLint's `"no-console"` rule is activated in `server/`, to remind you to use the logger instead
+- ESLint's `"no-console"` rule is activated in `api/`, to remind you to use the logger instead
 
 ## `middleware.js`
 
-Defines default middleware used in `server/app.js`:
+Defines default middleware used in `api/app.js`:
 
 - `clientRouter`: brings the React client into the Express server for production mode
-  - serves React app build outputs (CSS, HTML, JS, etc.) from `static/` directory
+  - serves React app build outputs (CSS, HTML, JS, etc.) from `api/static/` directory
   - provides the client app `index.html` to any GET request that isn't to an API endpoint, allowing client-side pages using e.g. [React Router]
 - `configuredHelmet`: provides a configured version of the [Helmet] middleware to set the right [Content Security Policy]
 - `configuredMorgan`: provides a configured version of the [Morgan] middleware to log using Winston

app.yaml

@@ -5,7 +5,7 @@ runtime: nodejs20
 
 instance_class: F1
 
-entrypoint: node server/server.js
+entrypoint: node api/server.js
 
 env_variables:
   LOG_LEVEL: info