Merge pull request #1287 from qdraw/feature/202311_vite_build_pipeline

Feature/202311 vite build pipeline

.github/workflows/auto-upgrade-clientapp-create-react-app.yml

@@ -1,4 +1,4 @@
-name: auto clientapp create react app upgrade
+name: Auto Client App create Vite upgrade
 
 on:
   workflow_dispatch:
@@ -18,13 +18,13 @@ jobs:
     - name: Setup Node.js environment
       uses: actions/setup-node@v4
       with:
-        node-version: 16
+        node-version: 18
         check-latest: true
 
     - name: 'Update clientapp'
-      id: clientapp_create_react_app_update
+      id: clientapp_vite_app_update
       working-directory: ./starsky-tools/build-tools
-      run: npm run clientapp-create-react-app-update
+      run: npm run clientapp-vite-app-update
 
     - shell: bash
       working-directory: ./starsky
@@ -52,21 +52,21 @@ jobs:
         signoff: false
         add-paths: |
           *
-        branch: feature/auto_clientapp_create_react_app_update
+        branch: feature/auto_clientapp_vite_app_update
         delete-branch: true
-        title: 'Client App - Create React App - Upgrade dependencies'
+        title: 'Client App - Vite - Upgrade dependencies'
         body: |
-          ## Upgrade Client App to the lastest version
+          ## Upgrade Client App to the latest version
           - todo: test!         
         labels: |
           dependencies
         draft: false
 
-    - name: Merge current branch into -> auto_clientapp_create_react_app_update
+    - name: Merge current branch into -> auto_clientapp_vite_app_update
       uses: everlytic/[email protected]
       if: github.event_name == 'workflow_dispatch' && steps.files_changed.outputs.CHANGED == 'true'
       with:
         github_token: ${{ secrets.WORKFLOW_GITHUB }}
         source_ref: 'master'
-        target_branch: feature/auto_clientapp_create_react_app_update
+        target_branch: feature/auto_clientapp_vite_app_update
         commit_message_template: '[Automated] Merged {source_ref} into target {target_branch}'

.gitignore

@@ -357,6 +357,8 @@ starsky-tools/docs/*/*.jpg
 starsky-tools/docs/*/*/*.jpg
 starsky-tools/docs/*/*/*/*.jpg
 
+starsky-tools/build-tools/vite-tmp-folder/*
+
 **/osx-x64/*
 **/osx-arm64/*
 **/linux-arm/*

starsky-tools/build-tools/clientapp-create-react-app-update.js → starsky-tools/build-tools/clientapp-vite-update.js

@@ -37,11 +37,11 @@ deleteFolderRecursive = function (path) {
 	}
 };
 
-const createReactTempFolder = path.join(__dirname, "create-react-tmp-folder");
+const createReactTempFolder = path.join(__dirname, "vite-tmp-folder");
 const myAppName = "my-app";
 const createReactMyAppFolder = path.join(
 	__dirname,
-	"create-react-tmp-folder",
+	"vite-tmp-folder",
 	myAppName
 );
 
@@ -67,22 +67,41 @@ function getNpxCreateCreateApp() {
 	console.log("--createReactTempFolder");
 	console.log(createReactTempFolder);
 
+	// npm create -y vite@latest my-app -- --template react-ts
 	console.log(
-		`running --> npx create-react-app ${myAppName} --template typescript`
+		` npm create -y vite@latest ${myAppName} -- --template react-ts`
 	);
+
 	const updateSpawn = spawnSync(
-		"npx",
-		["create-react-app", myAppName, "--template", "typescript"],
+		"npm",
+		["create", "-y", "vite@latest" , myAppName, ,"--", "--template", "react-ts"],
 		{
 			cwd: createReactTempFolder,
 			env: process.env,
 			encoding: "utf-8",
 		}
 	);
 
-	console.log("-result of npx");
+	console.log("-result of npm create");
 	console.log(updateSpawn.stdout);
 	console.log(updateSpawn.stout ? updateSpawn.stout : "");
+
+	// run npm install in my-app folder
+	const createReactTempFolderMyApp = path.join(createReactTempFolder, myAppName);
+	const npmInstallMyAppSpawn = spawnSync(
+		"npm",
+		["install"],
+		{
+			cwd: createReactTempFolderMyApp,
+			env: process.env,
+			encoding: "utf-8",
+		}
+	);
+
+	console.log("-result of npm install in my-app folder");
+	console.log(npmInstallMyAppSpawn.stdout);
+	console.log(npmInstallMyAppSpawn.stout ? npmInstallMyAppSpawn.stout : "");
+
 }
 
 if (process.env.DEBUG !== "true") {
@@ -178,10 +197,7 @@ function npmUnInstall(packageName) {
 	console.log(uninstall.stout ? updateSpawn.stout : "");
 }
 
-// web-vitals is not needed
-npmUnInstall("web-vitals");
-// install later again (newer version)
-npmUnInstall("@testing-library/user-event");
+// npmUnInstall can be done here
 
 // update packages in clientapp package json
 console.log("next: overwrite package json file");
@@ -233,39 +249,42 @@ function npmInstall(packageName, force, dev) {
 	}
 }
 
-console.log("next un-install");
-npmUnInstall("web-vitals");
-npmUnInstall("@types/node");
+// uninstall not needed at the moment
 
 console.log("next install");
-npmInstall("abortcontroller-polyfill", false, false);
-npmInstall("@reach/router", true, false);
-npmInstall("intersection-observer", false, false);
-npmInstall("@types/reach__router", false, false);
-npmInstall("abortcontroller-polyfill", false, false);
-npmInstall("leaflet", false, false);
-npmInstall("@types/storybook__react", false, false);
-npmInstall("@storybook/react", true, true);
-npmInstall("eslint-config-prettier", false), false;
-npmInstall("eslint-plugin-prettier", false, false);
-npmInstall("prettier", false, false);
-npmInstall("eslint-plugin-prettier", false, false);
-npmInstall("@types/node", false, false);
-npmInstall("concurrently", false, true);
-npmInstall("@testing-library/user-event", false, false);
-
-// # for storybook
-npmInstall("@storybook/addon-essentials", false, true);
-npmInstall("@storybook/addon-interactions", false, true);
-npmInstall("@storybook/addon-links", false, true);
-npmInstall("@storybook/blocks", false, true);
-npmInstall("@storybook/node-logger", false, true);
-npmInstall("prop-types", false, true);
-npmInstall("storybook", false, true);
-
-npmInstall("@storybook/preset-create-react-app", false, true);
-
-npmInstall("webpack", false, true);
+// npmInstall: name, force, dev
+
+npmInstall('leaflet', false, false);
+npmInstall('core-js', false, false);
+npmInstall('react-router-dom', false, false);
+npmInstall('prettier', false, true);
+npmInstall('ts-jest', false, true);
+npmInstall('ts-node', false, true);
+npmInstall('jest', false, true);
+npmInstall('jest-environment-jsdom', false, true);
+npmInstall('identity-obj-proxy', false, true);
+npmInstall('isomorphic-fetch', false, true);
+npmInstall('eslint-plugin-react', false, true);
+npmInstall('eslint-config-prettier', false, true);
+npmInstall('eslint-plugin-prettier', false, true);
+npmInstall('eslint-plugin-jest-react', false, true);
+npmInstall('eslint-plugin-storybook', false, true);
+npmInstall('eslint-plugin-testing-library', false, true);
+npmInstall('@types/leaflet', false, true);
+npmInstall('@types/node', false, true);
+npmInstall('@types/jest', false, true);
+npmInstall('storybook', false, true);
+npmInstall('@storybook/addon-essentials', false, true);
+npmInstall('@storybook/addon-interactions', false, true);
+npmInstall('@storybook/addon-links', false, true);
+npmInstall('@storybook/blocks', false, true);
+npmInstall('@storybook/builder-vite', false, true);
+npmInstall('@storybook/react', false, true);
+npmInstall('@storybook/react-vite', false, true);
+npmInstall('@storybook/testing-library', false, true);
+npmInstall('@testing-library/jest-dom', false, true);
+npmInstall('@testing-library/react', false, true);
+npmInstall('@testing-library/user-event', false, true);
 
 console.log("npm install result:");
 const npmInstallSpawnResult = spawnSync(
@@ -290,7 +309,7 @@ if (process.env.DEBUG !== "true") {
 	}
 }
 
-// run linter
+// run linter (and fix issues)
 console.log("next: run linter");
 const lintSpawn = spawnSync("npm", ["run", "lint:fix"], {
 	cwd: clientAppFolderPath,
@@ -299,4 +318,21 @@ const lintSpawn = spawnSync("npm", ["run", "lint:fix"], {
 });
 console.log(lintSpawn.stdout);
 
+console.log("next: build project");
+const buildSpawn = spawnSync("npm", ["run", "build"], {
+	cwd: clientAppFolderPath,
+	env: process.env,
+	encoding: "utf-8",
+});
+console.log(buildSpawn.stdout);
+
+
+console.log("next: test project");
+const testSpawn = spawnSync("npm", ["run", "test:ci"], {
+	cwd: clientAppFolderPath,
+	env: process.env,
+	encoding: "utf-8",
+});
+console.log(testSpawn.stdout);
+
 console.log("done");

starsky-tools/build-tools/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "update": "echo 'keep this without any npm dependencies'",
     "update:install": "echo 'keep this without any npm dependencies'",
-    "clientapp-create-react-app-update": "node clientapp-create-react-app-update",
+    "clientapp-vite-update": "node clientapp-vite-update",
     "documentation-create-docusaurus-update": "node documentation-create-docusaurus-update",
     "app-version-update": "node app-version-update.js",
     "project-guid": "node project-guid.js",