refactor: move client specific scripts inside client (freeCodeCamp#51123

)

.gitpod.yml

@@ -48,8 +48,6 @@ tasks:
       gp sync-done pnpm-install &&
       gp ports await 27017
     command: >
-      pnpm run create:config &&
-      pnpm run build:curriculum &&
       pnpm run seed &&
       mongosh --eval "db.fsyncLock(); db.fsyncUnlock()" &&
       gp ports await 27017 &&
@@ -60,12 +58,10 @@ tasks:
     init: >
       cd ./client &&
       gp sync-await pnpm-install &&
-      pnpm run predevelop &&
       cd ..
     command: >
       gp ports await 3000 &&
-      cd ./client &&
-      pnpm run develop -- -H '0.0.0.0'
+      pnpm run develop:client -- -H '0.0.0.0'
     openMode: split-right
 
 github:

client/package.json

@@ -19,11 +19,14 @@
   "author": "freeCodeCamp <[email protected]>",
   "main": "none",
   "scripts": {
-    "prebuild": "pnpm -w run create:config && pnpm run build:scripts --env production && pnpm run build:components-library",
+    "prebuild": "pnpm run common-setup && pnpm run build:scripts --env production",
     "build": "cross-env NODE_OPTIONS=\"--max-old-space-size=7168\" gatsby build --prefix-paths",
     "build:scripts": "pnpm run -F=browser-scripts build",
     "clean": "gatsby clean",
-    "predevelop": "pnpm run build:scripts --env development && pnpm run build:components-library",
+    "common-setup": "pnpm -w run create:config && pnpm run create:env && pnpm run create:trending && pnpm run build:components-library",
+    "create:env": "cross-env DEBUG=fcc:* ts-node ./tools/create-env.ts",
+    "create:trending": "ts-node ./tools/download-trending.ts",
+    "predevelop": "pnpm run common-setup && pnpm run build:scripts --env development",
     "build:components-library": "pnpm run -F=@freecodecamp/ui build",
     "develop": "cross-env NODE_OPTIONS=\"--max-old-space-size=5000\" gatsby develop --inspect=9230",
     "lint": "ts-node ./i18n/schema-validation.ts",
@@ -147,8 +150,10 @@
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/jest": "29.5.3",
     "@types/jquery": "^3.5.16",
+    "@types/js-yaml": "4.0.5",
     "@types/loadable__component": "5.13.4",
     "@types/lodash-es": "^4.17.6",
+    "@types/node-fetch": "2",
     "@types/prismjs": "^1.26.0",
     "@types/reach__router": "1.3.11",
     "@types/react": "16.14.43",
@@ -174,12 +179,16 @@
     "chokidar": "3.5.3",
     "copy-webpack-plugin": "9.1.0",
     "core-js": "2.6.12",
+    "cross-env": "7.0.3",
     "dotenv": "16.3.1",
     "eslint-plugin-testing-library": "^3.9.0",
     "gatsby-plugin-webpack-bundle-analyser-v2": "1.1.31",
     "jest-environment-jsdom": "29.6.2",
     "jest-json-schema-extended": "1.0.1",
+    "joi": "17.9.2",
+    "js-yaml": "4.1.0",
     "monaco-editor-webpack-plugin": "4.2.0",
+    "node-fetch": "2.6.12",
     "react-test-renderer": "16.14.0",
     "redux-mock-store": "1.5.4",
     "redux-saga-test-plan": "4.0.6",

tools/scripts/build/ensure-env.ts → client/tools/create-env.ts

@@ -2,10 +2,10 @@ import { spawn } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
 
-import { availableLangs, Languages } from '../../../config/i18n';
-import env from '../../../config/read-env';
+import { availableLangs, Languages } from '../../config/i18n';
+import env from './read-env';
 
-const globalConfigPath = path.resolve(__dirname, '../../../config');
+const globalConfigPath = path.resolve(__dirname, '../../config');
 
 const { FREECODECAMP_NODE_ENV } = process.env;
 

tools/scripts/build/download-trending.ts → client/tools/download-trending.ts

@@ -7,7 +7,7 @@ import { config } from 'dotenv';
 
 import { trendingSchemaValidator } from './schema/trending-schema';
 
-config({ path: path.resolve(__dirname, '../../../.env') });
+config({ path: path.resolve(__dirname, '../../.env') });
 
 const createCdnUrl = (lang: string) =>
   `https://cdn.freecodecamp.org/universal/trending/${lang}.yaml`;
@@ -28,7 +28,10 @@ const download = async (clientLocale: string) => {
 
   const data = await res.text();
   const trendingJSON = JSON.stringify(yaml.load(data));
-  const trendingLocation = `./client/i18n/locales/${clientLocale}/trending.json`;
+  const trendingLocation = path.resolve(
+    __dirname,
+    `../i18n/locales/${clientLocale}/trending.json`
+  );
   writeFileSync(trendingLocation, trendingJSON);
 
   const trendingObject = JSON.parse(trendingJSON) as Record<string, string>;

config/read-env.js → client/tools/read-env.ts

@@ -1,7 +1,8 @@
-const path = require('path');
+import path from 'path';
+import { config } from 'dotenv';
 
-const envPath = path.resolve(__dirname, '../.env');
-const { error } = require('dotenv').config({ path: envPath });
+const envPath = path.resolve(__dirname, '../../.env');
+const { error } = config({ path: envPath });
 
 if (error) {
   console.warn(`
@@ -47,7 +48,7 @@ const locations = {
     : radioLocation
 };
 
-module.exports = Object.assign(locations, {
+export default Object.assign(locations, {
   clientLocale,
   curriculumLocale,
   showLocaleDropdownMenu: showLocaleDropdownMenu === 'true',

client/tsconfig.json

@@ -15,5 +15,18 @@
     "resolveJsonModule": true,
     "skipLibCheck": true
   },
-  "include": ["i18n/**/*", "plugins/**/*", "src/**/*", "utils/**/*"]
+  "include": [
+    "i18n/**/*",
+    "plugins/**/*",
+    "src/**/*",
+    "utils/**/*",
+    "tools/**/*"
+  ], // since ts-node compiles ts on the fly and then uses node, it needs to
+  // compile the scripts to commonjs (or node will complain about the requires)
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs"
+    },
+    "transpileOnly": true
+  }
 }

package.json

@@ -37,7 +37,7 @@
     "clean:curriculum": "rm -rf ./config/curriculum.json",
     "clean:packages": "rm -rf ./node_modules ./**/node_modules",
     "clean:server": "rm -rf ./api-server/lib",
-    "create:config": "tsc -p config && pnpm run ensure-env && pnpm run download-trending",
+    "create:config": "tsc -p config",
     "create:utils": "tsc -p utils",
     "precypress": "node ./cypress-install.js",
     "cypress": "cypress",
@@ -55,8 +55,6 @@
     "e2e:dev:watch": "start-test develop 'localhost:3000/status/ping|localhost:8000' cypress:dev:watch",
     "e2e:prd:run": "pnpm run build && start-test 'localhost:3000/status/ping|localhost:8000' cypress:dev:run",
     "e2e:prd:watch": "pnpm run build && start-test 'localhost:3000/status/ping|localhost:8000' cypress:dev:watch",
-    "download-trending": "ts-node ./tools/scripts/build/download-trending.ts",
-    "ensure-env": "cross-env DEBUG=fcc:* ts-node ./tools/scripts/build/ensure-env.ts",
     "format": "run-s format:eslint format:prettier",
     "format:curriculum": "run-s format:curriculum:eslint format:curriculum:prettier",
     "format:curriculum:eslint": "eslint ./curriculum --fix",