add: vite & typescript samples to index (#2743)

PeaceDate · web-flow · commit 1f50614ed911 · 2023-02-08T15:25:02.000-08:00
diff --git a/package.json b/package.json
@@ -96,15 +96,21 @@
       "./version-discrepancy/*",
       "./vite-react-microfrontends",
       "./vite-react-microfrontends/*",
+      "./vite-react-simple",
+      "./vite-react-simple/*",
       "./vite-svelte-microfrontends",
       "./vite-svelte-microfrontends/*",
+      "./vite-vue-microfrontends",
+      "./vite-vue-microfrontends/*",
       "./vue2-in-vue3",
       "./vue2-in-vue3/*",
       "./vue3-demo-federation-with-vite",
       "./vue3-demo-federation-with-vite/*",
       "./vue3-demo",
       "./vue3-demo/*",
+      "./third-party-scripts",
       "./third-party-scripts/*",
+      "./typescript",
       "./typescript/*",
       "./nextjs-sidecar/*",
       "./dashboard-example/*",
diff --git a/third-party-scripts/README.md b/third-party-scripts/README.md
@@ -13,3 +13,11 @@ This will build and serve `app1` on port 3001
 - [localhost:3001](http://localhost:3001/) (HOST)
 
 <img src="https://ssl.google-analytics.com/collect?v=1&t=event&ec=email&ea=open&t=event&tid=UA-120967034-1&z=1589682154&cid=ae045149-9d17-0367-bbb0-11c41d92b411&dt=ModuleFederationExamples&dp=/email/BasicRemoteHost">
+
+# Running Cypress E2E Tests
+
+To run tests in interactive mode, run  `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress/README.md#how-to-run-tests)
+
+To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
+
+["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
diff --git a/third-party-scripts/app1/package.json b/third-party-scripts/app1/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@third-party-scripts/app1",
+  "name": "third-party-scripts_app1",
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
diff --git a/third-party-scripts/package.json b/third-party-scripts/package.json
@@ -9,10 +9,11 @@
   },
   "version": "0.0.0",
   "scripts": {
-    "start": "lerna run --parallel start",
+    "start": "lerna run --scope=third-party-scripts_* --parallel start",
     "build": "lerna run build",
-    "serve": "lerna run --parallel serve",
-    "clean": "lerna run --parallel clean"
+    "serve": "lerna run --scope=third-party-scripts_* --parallel serve",
+    "clean": "lerna run --scope=third-party-scripts_* --parallel clean",
+    "e2e:ci": "yarn start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../cypress/config/cypress.config.ts --config '{\"supportFile\": \"../cypress/support/e2e.ts\"}' --spec \"./e2e/tests/*.cy.ts\" --browser=chrome"
   },
   "devDependencies": {
     "lerna": "3.22.1"
diff --git a/typescript/README.md b/typescript/README.md
@@ -16,3 +16,11 @@ Run `yarn start`. This will build and serve both `app1` and `app2` on ports 3001
 - [localhost:3002](http://localhost:3002/)
 
 <img src="https://ssl.google-analytics.com/collect?v=1&t=event&ec=email&ea=open&t=event&tid=UA-120967034-1&z=1589682154&cid=ae045149-9d17-0367-bbb0-11c41d92b411&dt=ModuleFederationExamples&dp=/email/TypeScript">
+
+# Running Cypress E2E Tests
+
+To run tests in interactive mode, run  `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress/README.md#how-to-run-tests)
+
+To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
+
+["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
diff --git a/typescript/app1/package.json b/typescript/app1/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@typescript/app1",
+  "name": "typescript_app1",
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
diff --git a/typescript/app2/package.json b/typescript/app2/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@typescript/app2",
+  "name": "typescript_app2",
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
diff --git a/typescript/package.json b/typescript/package.json
@@ -7,10 +7,11 @@
   ],
   "version": "0.0.0",
   "scripts": {
-    "start": "lerna run --scope @typescript/* --parallel start",
-    "build": "lerna run --scope @typescript/* build",
-    "serve": "lerna run --scope @typescript/* --parallel serve",
-    "clean": "lerna run --scope @typescript/* --parallel clean"
+    "start": "lerna run --scope=typescript_* --parallel start",
+    "build": "lerna run --scope=typescript_* build",
+    "serve": "lerna run --scope=typescript_* --parallel serve",
+    "clean": "lerna run --scope=typescript_* --parallel clean",
+    "e2e:ci": "yarn start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../cypress/config/cypress.config.ts --config '{\"supportFile\": \"../cypress/support/e2e.ts\"}' --spec \"./e2e/tests/*.cy.ts\" --browser=chrome"
   },
   "devDependencies": {
     "lerna": "3.22.1"
diff --git a/vite-react-simple/README.md b/vite-react-simple/README.md
@@ -9,4 +9,12 @@ yarn start
 
 ```
 http://localhost:3000
-```
+```
+
+# Running Cypress E2E Tests
+
+To run tests in interactive mode, run  `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress/README.md#how-to-run-tests)
+
+To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
+
+["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
diff --git a/vite-react-simple/package.json b/vite-react-simple/package.json
@@ -8,7 +8,8 @@
   ],
   "version": "0.0.0",
   "scripts": {
-    "start": "concurrently \"yarn --cwd vite-react start\" \"yarn --cwd webpack-spa start\" \"cd rs-sidecart; yarn start\""
+    "start": "concurrently \"yarn --cwd vite-react start\" \"yarn --cwd webpack-spa start\" \"cd rs-sidecart; yarn start\"",
+    "e2e:ci": "yarn start & wait-on http-get://localhost:3000/ && npx cypress run --config-file ../cypress/config/cypress.config.ts --config '{\"supportFile\": \"../cypress/support/e2e.ts\"}' --spec \"./e2e/tests/runAll.cy.ts\" --browser=chrome"
   },
   "devDependencies": {
     "concurrently": "7.3.0"
diff --git a/vite-react-simple/rs-sidecart/package.json b/vite-react-simple/rs-sidecart/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "wp5-starter-react",
+  "name": "vite-react-simple_rs-sidecart",
   "version": "1.0.0",
   "scripts": {
     "build": "webpack --mode production",
diff --git a/vite-react-simple/vite-react/package.json b/vite-react-simple/vite-react/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vite-react",
+  "name": "vite-react-simple_vite-react",
   "version": "0.0.0",
   "scripts": {
     "start": "nodemon serve.js",
diff --git a/vite-react-simple/webpack-spa/package.json b/vite-react-simple/webpack-spa/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "webpack-spa-systemjs",
+  "name": "vite-react-simple_webpack-spa-systemjs",
   "version": "0.0.0",
   "private": true,
   "scripts": {
diff --git a/vite-vue-microfrontends/README.md b/vite-vue-microfrontends/README.md
@@ -13,3 +13,11 @@ Open your browser at http://localhost:4173/ to see the amazing result
 ![screenshot](docs/screenshot.png)
 
 The state is shared between applications
+
+# Running Cypress E2E Tests
+
+To run tests in interactive mode, run  `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress/README.md#how-to-run-tests)
+
+To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
+
+["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
diff --git a/vite-vue-microfrontends/host/package.json b/vite-vue-microfrontends/host/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "host",
+  "name": "vite-vue-microfrontends_host",
   "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "run-p vite:dev force-vite-restart",
     "vite:dev": "vite --port 4173",
     "build": "run-p type-check build-only",
-    "preview": "vite preview --port 4173",
+    "preview": "nohup vite preview --port 4173 &",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
diff --git a/vite-vue-microfrontends/package.json b/vite-vue-microfrontends/package.json
@@ -16,12 +16,16 @@
     "build:host": "npm --prefix ./host run build",
     "build:remote": "npm --prefix ./remote run build",
     "preview:host": "npm --prefix ./host run build && npm --prefix ./host run preview",
-    "preview:remote": "npm --prefix ./remote run build && npm --prefix ./remote run preview"
+    "preview:remote": "npm --prefix ./remote run build && npm --prefix ./remote run preview",
+    "e2e:ci": "yarn preview:remote && yarn preview:host & wait-on http-get://localhost:4173/ && npx cypress run --config-file ../cypress/config/cypress.config.ts --config '{\"supportFile\": \"../cypress/support/e2e.ts\"}' --spec \"./e2e/tests/runAll.cy.ts\" --browser=chrome"
   },
   "author": {
     "name": "Giorgio Boa",
     "email": "giorgiob.boa@gmail.com",
     "url": "https://github.com/gioboa"
   },
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "nohup": "0.1.0"
+  }
 }
diff --git a/vite-vue-microfrontends/remote/package.json b/vite-vue-microfrontends/remote/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "remote",
+  "name": "vite-vue-microfrontends_remote",
   "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "run-p vite:dev force-vite-restart",
     "vite:dev": "vite --port 4174",
     "build": "run-p type-check build-only",
-    "preview": "vite preview --port 4174",
+    "preview": "nohup vite preview --port 4174 &",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "@third-party-scripts/app1",`
	`2`	`+ "name": "third-party-scripts_app1",`
`3`	`3`	`"version": "0.0.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"devDependencies": {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "@typescript/app1",`
	`2`	`+ "name": "typescript_app1",`
`3`	`3`	`"version": "0.0.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"devDependencies": {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "@typescript/app2",`
	`2`	`+ "name": "typescript_app2",`
`3`	`3`	`"version": "0.0.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"devDependencies": {`