Merge pull request #198 from vercel/kitchen-sink

vercel · Dec 12, 2021 · be37370 · be37370 · vercel · Dec 12, 2021
2 parents 398521d + d25c5e2
commit be37370
Show file tree

Hide file tree

Showing 77 changed files with 1,812 additions and 0 deletions.
diff --git a/examples/kitchen-sink/.gitignore b/examples/kitchen-sink/.gitignore
@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+.turbo
+*.log
+.next
+dist
+dist-ssr
+*.local
+.env
+.cache
+server/dist
+public/dist
+.turbo
diff --git a/examples/kitchen-sink/.prettierignore b/examples/kitchen-sink/.prettierignore
@@ -0,0 +1,9 @@
+node_modules
+.next
+build
+dist
+*.tsbuildinfo
+*.gitignore
+*.svg
+*.lock
+*.npmignore
diff --git a/examples/kitchen-sink/.prettierrc b/examples/kitchen-sink/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": false,
+  "semi": true
+}
diff --git a/examples/kitchen-sink/README.md b/examples/kitchen-sink/README.md
@@ -0,0 +1,29 @@
+# `turborepo` kitchen sink starter
+
+This is an official Yarn v1 starter Turborepo with multiple meta-frameworks all working in harmony and sharing packages.
+
+## What's inside?
+
+This Turborepo includes the following packages and apps:
+
+### Apps and Packages
+
+- `api`: an [Express](https://expressjs.com/) server
+- `storefront`: a [Next.js](https://nextjs.org) app
+- `admin`: a [Vite](https://vitejs.dev/) single page app
+- `blog`: a [Remix](https://remix.run/) blog
+- `logger`: isomorphic logger (a small wrapper around console.log)
+- `ui`: a dummy React UI library (which contains a single `<CounterButton>` component)
+- `scripts`: Jest and eslint configurations
+- `tsconfig`: tsconfig.json;s used throughout the monorepo
+
+Each package and app is 100% [Typescript](https://www.typescriptlang.org/).
+
+### Utilities
+
+This turborepo has some additional tools already setup for you:
+
+- [Typescript](https://www.typescriptlang.org/) for static type checking
+- [ESLint](https://eslint.org/) for code linting
+- [Jest](https://jestjs.io) test runner for all things JavaScript
+- [Prettier](https://prettier.io) for code formatting
diff --git a/examples/kitchen-sink/apps/admin/.eslintrc.js b/examples/kitchen-sink/apps/admin/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require("scripts/eslint-preset");
diff --git a/examples/kitchen-sink/apps/admin/index.html b/examples/kitchen-sink/apps/admin/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/kitchen-sink/apps/admin/package.json b/examples/kitchen-sink/apps/admin/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "admin",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite --port 3001 --clearScreen false",
+    "build": "vite build",
+    "deploy": "vercel deploy dist --team=turborepo --confirm",
+    "lint": "TIMING=1 eslint src/**/*.tsx --fix && tsc --noEmit",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "ui": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "scripts": "*",
+    "tsconfig": "*",
+    "typescript": "^4.2.4",
+    "vite": "^2.6.14"
+  }
+}
diff --git a/examples/kitchen-sink/apps/admin/src/App.css b/examples/kitchen-sink/apps/admin/src/App.css
@@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}
diff --git a/examples/kitchen-sink/apps/admin/src/App.tsx b/examples/kitchen-sink/apps/admin/src/App.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import logo from "./logo.svg";
+import "./App.css";
+import { CounterButton } from "ui";
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <h1>Turborepo Admin</h1>
+        <p>This app is powered by Vite.</p>
+        <p>
+          <CounterButton />
+        </p>
+        <p>
+          Edit <code>App.tsx</code> and save to test HMR updates.
+        </p>
+        <p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {" | "}
+          <a
+            className="App-link"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
+      </header>
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/kitchen-sink/apps/admin/src/index.css b/examples/kitchen-sink/apps/admin/src/index.css
@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/examples/kitchen-sink/apps/admin/src/logo.svg b/examples/kitchen-sink/apps/admin/src/logo.svg
diff --git a/examples/kitchen-sink/apps/admin/src/main.tsx b/examples/kitchen-sink/apps/admin/src/main.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
diff --git a/examples/kitchen-sink/apps/admin/tsconfig.json b/examples/kitchen-sink/apps/admin/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "exclude": ["node_modules"],
+  "extends": "tsconfig/vite.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}
diff --git a/examples/kitchen-sink/apps/admin/vite.config.ts b/examples/kitchen-sink/apps/admin/vite.config.ts
@@ -0,0 +1,6 @@
+import reactRefresh from "@vitejs/plugin-react-refresh";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [reactRefresh()],
+});
diff --git a/examples/kitchen-sink/apps/api/.eslintrc.js b/examples/kitchen-sink/apps/api/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require("scripts/eslint-preset");
diff --git a/examples/kitchen-sink/apps/api/package.json b/examples/kitchen-sink/apps/api/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "api",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "test": "jest --detectOpenHandles",
+    "dev": "nodemon --exec \"node -r esbuild-register ./src/index.ts\" -e .ts",
+    "start": "node -r esbuild-register ./src/index.ts",
+    "build": "tsc",
+    "lint": "tsc --noEmit && TIMING=1 eslint src --fix",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "devDependencies": {
+    "scripts": "*",
+    "tsconfig": "*",
+    "@types/body-parser": "^1.19.0",
+    "@types/cors": "^2.8.10",
+    "@types/express": "^4.17.12",
+    "@types/morgan": "^1.9.2",
+    "@types/node": "^15.12.2",
+    "@types/supertest": "^2.0.11",
+    "esbuild-register": "^2.5.0",
+    "supertest": "^6.1.3",
+    "typescript": "^4.2.4"
+  },
+  "jest": {
+    "preset": "scripts/jest/node"
+  },
+  "dependencies": {
+    "logger": "*",
+    "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "morgan": "^1.10.0"
+  }
+}
diff --git a/examples/kitchen-sink/apps/api/src/__tests__/server.test.ts b/examples/kitchen-sink/apps/api/src/__tests__/server.test.ts
@@ -0,0 +1,22 @@
+import supertest from "supertest";
+import { createServer } from "../server";
+
+describe("server", () => {
+  it("health check returns 200", async () => {
+    await supertest(createServer())
+      .get("/healthz")
+      .expect(200)
+      .then((res) => {
+        expect(res.body.ok).toBe(true);
+      });
+  });
+
+  it("message endpoint says hello", async () => {
+    await supertest(createServer())
+      .get("/message/jared")
+      .expect(200)
+      .then((res) => {
+        expect(res.body).toEqual({ message: "hello jared" });
+      });
+  });
+});
diff --git a/examples/kitchen-sink/apps/api/src/__tests__/tsconfig.json b/examples/kitchen-sink/apps/api/src/__tests__/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [".", "../."]
+}
diff --git a/examples/kitchen-sink/apps/api/src/index.ts b/examples/kitchen-sink/apps/api/src/index.ts
@@ -0,0 +1,9 @@
+import { createServer } from "./server";
+import { log } from "logger";
+
+const port = process.env.PORT || 5000;
+const server = createServer();
+
+server.listen(port, () => {
+  log(`api running on ${port}`);
+});
diff --git a/examples/kitchen-sink/apps/api/src/server.ts b/examples/kitchen-sink/apps/api/src/server.ts
@@ -0,0 +1,22 @@
+import { json, urlencoded } from "body-parser";
+import express from "express";
+import morgan from "morgan";
+import cors from "cors";
+
+export const createServer = () => {
+  const app = express();
+  app
+    .disable("x-powered-by")
+    .use(morgan("dev"))
+    .use(urlencoded({ extended: true }))
+    .use(json())
+    .use(cors())
+    .get("/message/:name", (req, res) => {
+      return res.json({ message: `hello ${req.params.name}` });
+    })
+    .get("/healthz", (req, res) => {
+      return res.json({ ok: true });
+    });
+
+  return app;
+};
diff --git a/examples/kitchen-sink/apps/api/tsconfig.json b/examples/kitchen-sink/apps/api/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "lib": ["ES2015"],
+    "module": "CommonJS",
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "exclude": ["node_modules"],
+  "extends": "tsconfig/base.json",
+  "include": ["src"]
+}
diff --git a/examples/kitchen-sink/apps/blog/.gitignore b/examples/kitchen-sink/apps/blog/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+
+.cache
+.vercel
+.output
+
+public/build
+api/build
diff --git a/examples/kitchen-sink/apps/blog/README.md b/examples/kitchen-sink/apps/blog/README.md
@@ -0,0 +1,34 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Deployment
+
+After having run the `create-remix` command and selected "Vercel" as a deployment target, you only need to [import your Git repository](https://vercel.com/new) into Vercel, and it will be deployed.
+
+If you'd like to avoid using a Git repository, you can also deploy the directory by running [Vercel CLI](https://vercel.com/cli):
+
+```sh
+npm i -g vercel
+vercel
+```
+
+It is generally recommended to use a Git repository, because future commits will then automatically be deployed by Vercel, through its [Git Integration](https://vercel.com/docs/concepts/git).
+
+## Development
+
+To run your Remix app locally, make sure your project's local dependencies are installed:
+
+```sh
+npm install
+```
+
+Afterwards, start the Remix development server like so:
+
+```sh
+npm run dev
+```
+
+Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
+
+If you're used to using the `vercel dev` command provided by [Vercel CLI](https://vercel.com/cli) instead, you can also use that, but it's not needed.
diff --git a/examples/kitchen-sink/apps/blog/api/index.js b/examples/kitchen-sink/apps/blog/api/index.js
@@ -0,0 +1,5 @@
+const { createRequestHandler } = require("@remix-run/vercel");
+
+module.exports = createRequestHandler({
+  build: require("./build"),
+});