8 files changed, 113 insertions, 0 deletions

diff --git a/examples/with-create-react-app/apps/web/src/App.css b/examples/with-create-react-app/apps/web/src/App.css
new file mode 100644
index 0000000..2be1fcc
--- /dev/null
+++ b/examples/with-create-react-app/apps/web/src/App.css
@@ -0,0 +1,26 @@
+.App {
+  text-align: center;
+}
+
+.Turborepo {
+  font-size: 72px;
+  background: linear-gradient(to right, #0099f7, #f11712);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.App-header {
+  background-color: #18181b;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: white;
+}
diff --git a/examples/with-create-react-app/apps/web/src/App.test.tsx b/examples/with-create-react-app/apps/web/src/App.test.tsx
new file mode 100644
index 0000000..bbcbc62
--- /dev/null
+++ b/examples/with-create-react-app/apps/web/src/App.test.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+test("renders learn react link", () => {
+  render(<App />);
+  const linkElement = screen.getByText(/Turborepo Example/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/examples/with-create-react-app/apps/web/src/App.tsx b/examples/with-create-react-app/apps/web/src/App.tsx
new file mode 100644
index 0000000..f260409
--- /dev/null
+++ b/examples/with-create-react-app/apps/web/src/App.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "ui";
+import "./App.css";
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1 className="header">
+          Web
+          <div className="Turborepo">Turborepo Example</div>
+        </h1>
+        <div>
+          <Link className="App-link" href="https://turbo.build/repo">
+            Turborepo Docs
+          </Link>
+          <span> | </span>
+          <Link className="App-link" href="https://reactjs.org">
+            React Docs
+          </Link>
+        </div>
+      </header>
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/with-create-react-app/apps/web/src/index.css b/examples/with-create-react-app/apps/web/src/index.css
new file mode 100644
index 0000000..4a1df4d
--- /dev/null
+++ b/examples/with-create-react-app/apps/web/src/index.css
@@ -0,0 +1,13 @@
+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;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/examples/with-create-react-app/apps/web/src/index.tsx b/examples/with-create-react-app/apps/web/src/index.tsx
new file mode 100644
index 0000000..ad9cbbb
--- /dev/null
+++ b/examples/with-create-react-app/apps/web/src/index.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/examples/with-create-react-app/apps/web/src/react-app-env.d.ts b/examples/with-create-react-app/apps/web/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/examples/with-create-react-app/apps/web/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/examples/with-create-react-app/apps/web/src/reportWebVitals.ts b/examples/with-create-react-app/apps/web/src/reportWebVitals.ts
new file mode 100644
index 0000000..5fa3583
--- /dev/null
+++ b/examples/with-create-react-app/apps/web/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/examples/with-create-react-app/apps/web/src/setupTests.ts b/examples/with-create-react-app/apps/web/src/setupTests.ts
new file mode 100644
index 0000000..1dd407a
--- /dev/null
+++ b/examples/with-create-react-app/apps/web/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";