JBook Exercise (#5)

.github/workflows/course-react-ts-portfolio-jbook.yml

@@ -0,0 +1,28 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: course-react-ts-portfolio/jbook CI
+
+on: [push]
+
+defaults:
+  run:
+    working-directory: ./course-react-ts-portfolio/jbook
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm install --legacy-peer-deps
+      - run: npx lerna bootstrap

README.md

@@ -3,3 +3,10 @@
 Udemy course code
 
 1. [React and Typescript: Build a Portfolio Project](https://github.com/nicholeuf/udemy/tree/main/course-react-ts-portfolio)
+
+## Github Workflow Local Setup
+
+This repo can be run locally using the following libraries, which must be installed and run locally:
+
+1. [act](https://github.com/nektos/act)
+2. [github-act-cache-server](https://github.com/sp-ricard-valverde/github-act-cache-server)

course-react-ts-portfolio/jbook/.nvmrc

@@ -0,0 +1 @@
+lts/*

course-react-ts-portfolio/jbook/lerna.json

@@ -0,0 +1,13 @@
+{
+  "packages": [
+    "packages/*"
+  ],
+  "version": "2.0.1",
+  "command": {
+    "bootstrap": {
+      "npmClientArgs": [
+        "--legacy-peer-deps"
+      ]
+    }
+  }
+}

course-react-ts-portfolio/jbook/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "root",
+  "private": true,
+  "devDependencies": {
+    "lerna": "^3.22.1"
+  },
+  "scripts": {
+    "start": "lerna run start --parallel"
+  }
+}

course-react-ts-portfolio/jbook/packages/cli/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

course-react-ts-portfolio/jbook/packages/cli/README.md

@@ -0,0 +1,26 @@
+# jsnotenlf
+
+Created for Udemy course [React and Typescript: Build a Portfolio Project
+](https://www.udemy.com/course/react-and-typescript-build-a-portfolio-project)
+
+The application allows a user to create and edit markdown and javascript code cells directly in the browser. The code cells are bundled and executed automatically, providing instant feedback. The cells can be inserted, reordered, and deleted.
+
+The application will launch a react web client and an api server on the user's local machine. The client fetches a list of cells from the server at startup and any changes to the cells are persisted via the API layer. As of right now, the data is persisted to a file.
+
+Some features of the client-side application include:
+
+- The code cells use the [Monaco](https://github.com/microsoft/monaco-editor) code editor with jsx syntax highlighting
+- Node packages referenced in code cells are automatically fetched from [unpkg](https://unpkg.com/).
+- Node packages are cached in the browser's IndexedDB using [localForage](https://localforage.github.io/localForage/).
+- After the code is bundled with [esbuild](https://esbuild.github.io/), it is executed in an iframe.
+- Code entered in previous cells can be referenced in subsequent cells. For instance, a function or variable can be defined in one cell and then used in a later cell.
+- A convenience function is available to display content in the iframe. For eexample `show(<h1>hello there</h1)`, will render the provided html in a div element of the iframe.
+
+## Links
+
+- [Github](https://github.com/nicholeuf/udemy) - Navigate to the course-react-ts-portfolio/jbook folder.
+
+## How to run the application
+
+1. On the command line, type `npx jsnotenlf serve`. Optionally, a file can be provided to the serve command and/or the port. Type `npx jsnotenlf serve -h` for additional information.
+2. Open the launched client application in your browser. For instance, `http://localhost:4005`.

course-react-ts-portfolio/jbook/packages/cli/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "jsnotenlf",
+  "version": "2.0.1",
+  "description": "",
+  "bin": "dist/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "tsc --watch --preserveWatchOutput",
+    "prepublishOnly": "esbuild src/index.ts --platform=node --outfile=dist/index.js --bundle --minify --define:process.env.NODE_ENV=\\\"production\\\""
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@jsnotenlf/local-client": "^2.0.0"
+  },
+  "devDependencies": {
+    "@jsnotenlf/local-api": "^2.0.0",
+    "@types/node": "^20.10.5",
+    "commander": "^11.1.0",
+    "esbuild": "0.8.26",
+    "typescript": "^5.3.3"
+  }
+}

course-react-ts-portfolio/jbook/packages/cli/src/commands/serve.ts

@@ -0,0 +1,48 @@
+import path from 'path';
+
+import { Command } from 'commander';
+import { serve } from '@jsnotenlf/local-api';
+
+interface OptionsParams {
+  port: string;
+}
+
+interface LocalApiError {
+  code: string;
+}
+
+const isLocalApiError = (err: any) => {
+  return typeof err.code === 'string';
+};
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+export const serveCommand = new Command()
+  // filename is optional value [square brackets]
+  .command('serve [filename]')
+  .description('Open a file for editing')
+  // number is required <angle brackets>
+  .option('-p, --port <number>', 'port to run server on', '4005')
+  .action(async (filename = 'notebook.js', options: OptionsParams) => {
+    try {
+      const dir = path.join(process.cwd(), path.dirname(filename));
+      await serve(
+        parseInt(options.port),
+        path.basename(filename),
+        dir,
+        !isProduction
+      );
+      console.log(
+        `Opened ${filename}. Navigate to http://localhost:${options.port} to edit the file`
+      );
+    } catch (err: any) {
+      if (isLocalApiError(err)) {
+        if (err.code === 'EADDRINUSE') {
+          console.error('Port is in use. Try running on a different port.');
+        }
+      } else if (err instanceof Error) {
+        console.log('Heres the problem', err.message);
+      }
+      process.exit(1);
+    }
+  });

course-react-ts-portfolio/jbook/packages/cli/src/index.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import { program } from 'commander';
+import { serveCommand } from './commands/serve';
+
+program.addCommand(serveCommand);
+
+program.parse(process.argv);