Testing out bun with NX/TSC/Vite

.github/actions/dockerize/action.yml

@@ -22,11 +22,6 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - name: docker build
-      run: |
-        docker build -t ${{ inputs.gcr_hostname }}/${{ inputs.project_id }}/${{ inputs.service_name }}:${{ github.sha }} -f ${{ inputs.dockerfile }} .
-      shell: bash
-
     - id: 'auth'
       name: gcloud auth
       uses: google-github-actions/auth@v2
@@ -42,6 +37,14 @@ runs:
       run: gcloud auth configure-docker ${{ inputs.gcr_hostname }}
       shell: bash
 
-    - name: docker push
-      run: docker push ${{ inputs.gcr_hostname }}/${{ inputs.project_id }}/${{ inputs.service_name }}:${{ github.sha }}
-      shell: bash
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
+    - name: Build and push
+      uses: docker/build-push-action@v5
+      with:
+        context: .
+        file: ${{ inputs.dockerfile }}
+        push: true
+        tags: ${{ inputs.gcr_hostname }}/${{ inputs.project_id }}/${{ inputs.service_name }}:${{ github.sha }}
+        no-cache: true

.github/actions/install-workspace/action.yml

@@ -1,20 +1,13 @@
 # .github/actions/setup-node/action.yml
 name: 'install workspace'
-description: 'Set up Node.js environment and check out code'
-inputs:
-  node-version-file:
-    description: 'Path to Node version file'
-    default: '.nvmrc'
+description: 'Set up Bun and install packages'
 runs:
   using: 'composite'
   steps:
-    - name: setup node
-      uses: actions/setup-node@v4
+    - uses: oven-sh/setup-bun@v1
       with:
-        node-version-file: ${{ inputs.node-version-file }}
-        cache: 'npm'
-        cache-dependency-path: 'package-lock.json'
+        bun-version: latest
 
-    - name: npm ci
-      run: npm ci --audit=false --fund=false
+    - name: bun install
+      run: bun install --silent
       shell: bash

.github/workflows/ci.yml

@@ -2,6 +2,10 @@ name: ci
 
 on: [push]
 
+env:
+  PROJECT_ID: bhouston-general-hosting
+  SERVICE_NAME: template-typescript-monorepo
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -12,8 +16,8 @@ jobs:
       - name: install workspace
         uses: ./.github/actions/install-workspace
 
-      - name: npm run build
-        run: npm run build
+      - name: bun run build
+        run: bun run build
 
   test:
     runs-on: ubuntu-latest
@@ -24,8 +28,8 @@ jobs:
       - name: install workspace
         uses: ./.github/actions/install-workspace
 
-      - name: npm test
-        run: npm test
+      - name: bun run test
+        run: bun run test
 
   lint:
     runs-on: ubuntu-latest
@@ -36,8 +40,8 @@ jobs:
       - name: install workspace
         uses: ./.github/actions/install-workspace
 
-      - name: npm run lint
-        run: npm run lint
+      - name: bun run lint
+        run: bun run lint
 
   dockerize:
     name: dockerize
@@ -50,8 +54,8 @@ jobs:
         uses: ./.github/actions/dockerize
         with:
           credentials_json: ${{ secrets.GCP_SA_KEY }}
-          project_id: bhouston-general-hosting
-          service_name: template-typescript-monorepo
+          project_id: ${{ env.PROJECT_ID }}
+          service_name: ${{ env.SERVICE_NAME }}
 
   deploy:
     name: deploy
@@ -66,5 +70,5 @@ jobs:
         uses: ./.github/actions/deploy-cloud-run
         with:
           credentials_json: ${{ secrets.GCP_SA_KEY }}
-          project_id: bhouston-general-hosting
-          service_name: template-typescript-monorepo
+          project_id: ${{ env.PROJECT_ID }}
+          service_name: ${{ env.SERVICE_NAME }}

.vscode/extensions.json

@@ -1,8 +1,7 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-    "orta.vscode-jest",
     "esbenp.prettier-vscode",
-    "kisstkondoros.vscode-codemetrics"
+    "github.vscode-github-actions"
   ]
 }

.vscode/settings.json

@@ -1,9 +1,18 @@
 {
-  "eslint.probe": ["javascript", "javascriptreact", "typescript", "json"],
+  "eslint.probe": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "markdown",
+    "html",
+    "json"
+  ],
   "editor.formatOnSave": true,
   "editor.formatOnPaste": true,
   "cSpell.words": [
     "bhouston",
+    "Buildx",
     "bunx",
     "cacheable",
     "esbuild",
@@ -19,6 +28,7 @@
     "reserialization",
     "reserialized",
     "Slerp",
+    "tailwindcss",
     "threeify"
   ],
   "editor.defaultFormatter": "esbenp.prettier-vscode",

Dockerfile

@@ -1,13 +1,12 @@
-FROM node:21-alpine
+FROM oven/bun:1
 
 WORKDIR /usr/src/app
 
 COPY . ./
 
-RUN npm ci
-
-RUN npx nx run-many -t build -p koa-server react-app
+RUN bun install --silent
+RUN bunx nx run-many -t build -p koa-server react-app
 
 ENV PORT=8080
 EXPOSE 8080
-CMD ["node", "./apps/koa-server/dist/server.js"]
+CMD ["bun", "./apps/koa-server/dist/server.js"]

README.md

@@ -10,6 +10,7 @@ It is what @bhouston considers best practice in January 2024.
 
 ## Features
 
+- Bun runtime for maximum speed.
 - Mono-repository using NPM workspaces
 - TypeScript for type safety
 - ES Modules for fast builds
@@ -31,25 +32,25 @@ It is what @bhouston considers best practice in January 2024.
 ## Getting Started
 
 1. Clone this repository
-2. Run `npm install`
+2. Run `bun install`
 
 ### Tests
 
-1. Run `npm run test` to run all jest tests
+1. Run `bun run test` to run all jest tests
 
 ### Continuous Dev Build
 
-1. Run `npm run watch` to start the hot reload development server & build watchers
+1. Run `bun run watch` to start the hot reload development server & build watchers
 
 ### Optimized Production Build
 
-1. Run `npm run build` to build the source
+1. Run `bun run build` to build the source
 
 ### Run the webserver (no reload)
 
-1. Run `npx koa-server` to start the webserver
-2. Open the link that appears in the console in your browser
+1. Run `bunx koa-server` to start the webserver
+2. Open `http://localhost:8000` in your browser
 
 ### Command Line
 
-1. Run `npx cmdline-app` to run the CLI example
+1. Run `bunx cmdline-app` to run the CLI example

apps/cli/project.json

@@ -4,6 +4,7 @@
   "targets": {
     "watch": {},
     "build": {},
+    "lint:check": {},
     "lint": {},
     "format": {}
   }

apps/koa-server/project.json

@@ -4,10 +4,11 @@
   "targets": {
     "watch": {
       "options": {
-        "commands": ["tsc --watch", "nodemon dist/server.js"]
+        "commands": ["bun run --watch dist/server.js"]
       }
     },
     "build": {},
+    "lint:check": {},
     "lint": {},
     "format": {},
     "test": {}

apps/react-app/package.json

@@ -6,17 +6,15 @@
     "@types/react": "^18.2.12",
     "@types/react-dom": "^18.2.5",
     "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.25",
     "rollup-plugin-visualizer": "^5.9.2",
-    "tailwindcss": "^3.3.2",
     "vite": "^5.0.11",
     "vite-tsconfig-paths": "^4.2.0"
   },
   "dependencies": {
     "@bhouston/react-lib": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.1"
+    "react-router-dom": "^6.14.1",
+    "styled-components": "^6.1.8"
   }
 }

apps/react-app/project.json

@@ -4,14 +4,15 @@
   "targets": {
     "watch": {
       "options": {
-        "commands": ["vite"]
+        "commands": ["bunx --bun vite"]
       }
     },
     "build": {
       "options": {
-        "commands": ["tsc", "vite build"]
+        "commands": ["bunx --bun tsc", "bunx --bun vite build"]
       }
     },
+    "lint:check": {},
     "lint": {},
     "format": {}
   }

apps/react-app/src/ErrorPage.tsx

@@ -1,22 +1,55 @@
 import React from 'react';
+import styled from 'styled-components';
 
 interface ErrorPageProps {
   errorCode: number;
   errorMessage: string;
 }
 
+// Styled components
+const Container = styled.div`
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f3f4f6; // bg-gray-200
+`;
+
+const ErrorCode = styled.div`
+  font-size: 6rem; // text-6xl
+  color: #dc2626; // text-red-600
+  font-weight: bold;
+`;
+
+const ErrorMessage = styled.div`
+  font-size: 1.5rem; // text-2xl
+  color: #4b5563; // text-gray-700
+  margin-top: 1rem; // mt-4
+`;
+
+const ReturnHomeLink = styled.a`
+  margin-top: 2rem; // mt-8
+  padding: 0.5rem 1rem; // px-4 py-2
+  background-color: #3b82f6; // bg-blue-500
+  color: white;
+  border-radius: 0.375rem; // rounded
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05); // shadow
+  transition: background-color 0.3s; // hover
+
+  &:hover {
+    background-color: #2563eb; // hover:bg-blue-700
+  }
+`;
+
 const ErrorPage: React.FC<ErrorPageProps> = ({ errorCode, errorMessage }) => {
   return (
-    <div className="h-screen w-full flex flex-col items-center justify-center bg-gray-200">
-      <div className="text-6xl text-red-600 font-bold">{errorCode}</div>
-      <div className="text-2xl text-gray-700 mt-4">{errorMessage}</div>
-      <a
-        href="/"
-        className="mt-8 px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-700"
-      >
-        Return Home
-      </a>
-    </div>
+    <Container>
+      <ErrorCode>{errorCode}</ErrorCode>
+      <ErrorMessage>{errorMessage}</ErrorMessage>
+      <ReturnHomeLink href="/">Return Home</ReturnHomeLink>
+    </Container>
   );
 };
 

apps/react-app/src/Home.tsx

@@ -8,7 +8,7 @@ const Home: React.FC = () => {
     fetch('/api/message').then(async (res) => {
       const json = await res.json();
       console.log(json);
-      setServerMessage(json.message);
+      return setServerMessage(json.message);
     });
   }, []);
 

apps/react-app/src/Viewer.tsx

@@ -1,11 +1,18 @@
 import { HelloWorld } from '@bhouston/react-lib';
 import React from 'react';
+import styled from 'styled-components';
+
+// Styled component
+const CenteredDiv = styled.div`
+  text-align: center;
+  margin-top: 1rem; /* mt-4 */
+`;
 
 const Viewer: React.FC = () => {
   return (
-    <div className="text-center mt-4">
+    <CenteredDiv>
       <HelloWorld name="Viewer" />
-    </div>
+    </CenteredDiv>
   );
 };
 

apps/react-app/src/index.tsx

@@ -1,5 +1,3 @@
-import './styles.css';
-
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';