gitpod-samples · Joshuafrankle · Jul 9, 2022 · Jul 9, 2022 · Jul 9, 2022 · Jul 9, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,32 @@
+**/*.trace
+**/*.zip
+**/*.tar.gz
+**/*.tgz
+**/*.log
+
+package-lock.json
+**/*.bun
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile
@@ -1,4 +1,4 @@
-FROM gitpod/workspace-full
+FROM gitpod/
 
 RUN curl -fsSL https://bun.sh/install | bash
 RUN echo 'export BUN_INSTALL="/home/gitpod/.bun"' >> /home/gitpod/.bashrc.d/600-bun | bash && \

diff --git a/.gitpod.yml b/.gitpod.yml
@@ -2,13 +2,8 @@ image:
   file: .gitpod.Dockerfile
 
 tasks:
-  - name: Run Script Using Bun
-    command: bun run hashing.js
-    openMode: split-left
-
   - name: Run Dev Server
     command: bun dev
-    openMode: split-right
 
 ports:
   - port: 3000

diff --git a/README.md b/README.md
@@ -1,19 +1,24 @@
-# Bun Template for Gitpod
+# React Bun Template for Gitpod
+This is a React project boostrapped with bun.
 
-Spin up the [Bun](https://bun.sh) Server with a Single Click on Gitpod
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Joshuafrankle/bun-react)
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Siddhant-K-code/bun-on-gitpod)
+## Getting Started
 
-## Run Any Script
+### Install packages
 
 ```sh
-bun run hashing.js
+bun install
+(or)
+bun install --backend=copyfile && bun bun
 ```
 
-## Run the Dev Server
+### Development
 
-```sh
+Run the development server.
+
+```
 bun dev
 ```
-> Currently this will render the `index.html` file
 
+You can start editing the page by modifying src/pages/Home.tsx. The page auto-updates as you edit the file.
diff --git a/bun.lockb b/bun.lockb
diff --git a/hashing.js b/hashing.js
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "react-app",
+  "version": "0.0.47",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "^5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {},
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "devDependencies": {
+    "typescript": "latest",
+    "react-refresh": "0.10.0"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+    <script src="/src/index.jsx" async type="module"></script>
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />}/>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
@@ -0,0 +1,38 @@
+.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);
+  }
+}
diff --git a/src/assets/css/index.css b/src/assets/css/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/src/assets/images/react-logo.png b/src/assets/images/react-logo.png
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Loader() {
+  return (
+    <div>Loader</div>
+  )
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import "assets/css/index.css"
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import "assets/css/App.css"
+import logo from "./logo.svg"
+
+export default function Home() {
+  return (
+    <div className="App">
+    <header className="App-header">
+      <img src={logo} className="App-logo" alt="logo" />
+      <h3>Welcome to React!</h3>
+      <a
+        className="App-link"
+        href="https://reactjs.org"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Learn React
+      </a>
+    </header>
+  </div>
+  )
+}
diff --git a/src/pages/logo.svg b/src/pages/logo.svg
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+      "baseUrl": "./src",
+      "suppressImplicitAnyIndexErrors": true,
+      "target": "es5",
+      "lib": ["dom", "dom.iterable", "esnext"],
+      "allowJs": true,
+      "skipLibCheck": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true,
+      "noFallthroughCasesInSwitch": true,
+      "module": "esnext",
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "noEmit": true,
+      "jsx": "react-jsx"
+    },
+    "include": ["src"]
+  }
+