ready for upload

Author: KevinEverywhere

ReadMe.md

@@ -1,75 +1,91 @@
-# simple-init-react-preact
+# simple-init-react-angular-preact-vue
 
 This project is an example of current framework cli-build processes work and appear side by side. Once the initial files are created, you can experiment in each of the apps to see how interchangeable they actually are.
 
 ## instructions
 
-Each framework has its own installation and launch scripts. To begin, download this repo and run yarn or npm install. Once the repo is installed, yarn is used in the script files.
+Each framework has its own installation and launch scripts. It is recommended that you use yarn for package management and running scripts. If the build process is not successful,
 
 ```
 git clone git@github.com:KevinEverywhere/simple-init-react-angular-preact-vue.git
 cd simple-init-react-angular-preact-vue
 npm install
 ```
 
-### react
+### Run All Four
 
-Running the startReact script will first test to see if it has ever been run before (testReact). After the directory has been recognized or created, the startReact script changes to the my-react-app directory and runs yarn start. When you run yarn start, it will install or check for updates in the repo's dependencies. From the root directory (simple-init-react-angular-preact-vue), run the following script and the application will launch in the browser.
+Running the startAll script will execute startReact, startPreact, startAngular, and startVue. Please look to the individual script to see cli specifics.
 
-If you have not previously installed yarn:
+Ensure that you have previously installed yarn and then run this line of code.
 ```
-npm run startReact
+yarn run startAll
 ```
+The most typical errors when they occur come from already having ports 3000, 8080, 6789 and 4200 already being used; and yarn not being installed. If you do not have yarn installed, run the following line of code.
 
-If you have previously installed yarn:
 ```
-yarn run startReact
+npm install -g yarn
 ```
 
-To use the yarn package bundled with this repo:
+### react
+
+Running the startReact script will first test to see if it has ever been run before (testReact). After the directory has been recognized or created, the startReact script runs yarn start in the my-react-app directory. When you run yarn start, it will install or check for updates in the repo's dependencies. From the root directory (simple-init-react-angular-preact-vue), run the following script and the application will launch in the browser at http://localhost:3000.
+
 ```
-node_modules/.bin/yarn run startReact
+yarn run startReact
 ```
-You can use npm or yarn in for installation and running of package.json dependency and script content. Yarn is recommended for performance and dependency management reasons.
 
-### preact
-
-Running the startPreact script will first test to see if it has ever been run before (testPreact). After the directory has been recognized or created, the startPreact script changes to the my-preact-app directory and runs yarn start. When you run yarn start, it will install or check for updates in the repo's dependencies. From the root directory (simple-init-react-preact), run the following script and once it creates the application, you can find it at http://localhost:8080.
+### angular
 
+Running the startAngular script will first test to see if it has ever been run before (testAngular). After the directory has been recognized or created, the startAngular runs ng serve
+in the my-angular-app directory. When you run ng serve, it will launch the app in port 4200. From the root directory (simple-init-react-preact), run the following script and it will launch at http://localhost:4200.
 
-If you have not previously installed yarn:
 ```
-npm run startPreact
+yarn run startAngular
 ```
 
-If you have previously installed yarn:
+### preact
+
+Running the startPreact script will first test to see if it has ever been run before (testPreact). After the directory has been recognized or created, the startPreact runs preact watch -p 6789
+in the my-preact-app directory. When you run yarn start, it will install or check for updates in the repo's dependencies. From the root directory (simple-init-react-preact), run the following script and once it creates the application, you can find it at http://localhost:6789.
+
 ```
 yarn run startPreact
 ```
 
-To use the yarn package bundled with this repo:
+### vue
+
+Unlike the other CLI tools, the vue-cli will require some interactivity during the creation process. You can easily just hit return and accept the defaults at the command line which will create a new vue app titled my-vue-app. Once the startVue script calls testVue to see if it has ever been run and creates the app and directory if it has not, it then runs yarn start from the my-vue-app directory. When you run yarn start, it installs and checks for updates in the repo's dependencies. From the root directory (simple-init-react-angular-preact-vue), run the following script and the application will launch in the browser at http://localhost:8080.
+
 ```
-node_modules/.bin/yarn run startPreact
+yarn run startVue
 ```
-You can use npm or yarn in for installation and running of package.json dependency and script content. Yarn is recommended for performance and dependency management reasons.
-
 
 ## summary
 
 This truly is meant as nothing more than a way to quickly see the state of react and preact development the first day of autumn, 2017. This should save some time for those wanting to have a quick view of how the two look under the hood.
 
 ## reference
 
-This repo uses the initialization scripts described in the [preact-cli][preact-cli] for preact and [create-react-app][create-react-app] for react repos to create a base application. For more information, please use the links below to discover best practices and state of the moment examples and documentation.
+This repo uses the initialization scripts described in the [preact-cli][preact-cli], for preact, [create-react-app][create-react-app] for react, [angular-cli][angular-cli], for angular, and [vue-cli][vue-cli] for vue to create a base applications. For more information, please use the links below to discover best practices and state of the moment examples and documentation.
+
+[What's new in Create React App][whatsnew]
+
+[angular][angular]
 
 [preact][preact]
 
-[What's new in Create React App][whatsnew]
+[vue][vue]
 
 -------------
 
+[whatsnew]: https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html
+[create-react-app]: https://github.com/facebookincubator/create-react-app
+
+[angular][https://github.com/angular/angular]
+[angular-cli]: https://github.com/angular/angular-cli
+
 [preact]: https://preactjs.com/
 [preact-cli]: https://github.com/developit/preact-cli
 
-[whatsnew]: https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html
-[create-react-app]: https://github.com/facebookincubator/create-react-app
+[vue]: https://vuejs.org/v2/guide/
+[vue-cli]: https://github.com/vuejs/vue-cli

package.json

@@ -7,21 +7,21 @@
   "scripts": {
     "firstRunPreact": "node_modules/.bin/preact create my-preact-app",
     "testPreact": "if [ ! -f my-preact-app/package.json ]; then yarn run firstRunPreact; fi",
-    "prestartPreact": "npm install && yarn run testPreact",
-    "startPreact": "cd my-preact-app && yarn start",
+    "prestartPreact": "yarn install && yarn run testPreact",
+    "startPreact": "cd my-preact-app && node_modules/.bin/preact watch -p 6789",
     "namePkgReturn": "mv package.json replacement.package.json && mv temp.package.json package.json",
     "namePkgTemp": "mv package.json temp.package.json && mv replacement.package.json package.json",
-    "firstRunAngular": "npm run namePkgTemp && ng new my-angular-app && npm run namePkgReturn",
-    "testAngular": "if [ ! -f my-angular-app/package.json ]; then npm run firstRunAngular; fi",
-    "prestartAngular": "npm install && npm run testAngular",
+    "firstRunAngular": "yarn run namePkgTemp && ng new my-angular-app && yarn run namePkgReturn",
+    "testAngular": "if [ ! -f my-angular-app/package.json ]; then yarn run firstRunAngular; fi",
+    "prestartAngular": "yarn install && yarn run testAngular",
     "startAngular": "cd my-angular-app && node_modules/.bin/ng serve",
     "firstRunVue": "node_modules/.bin/vue init webpack my-vue-app",
     "testVue": "if [ ! -f my-vue-app/package.json ]; then yarn run firstRunVue; fi",
-    "prestartVue": "npm install && yarn run testVue",
-    "startVue": "cd my-vue-app && npm install && npm run dev",
+    "prestartVue": "yarn install && yarn run testVue",
+    "startVue": "cd my-vue-app && yarn install && yarn run dev",
     "firstRunReact": "node_modules/.bin/create-react-app my-react-app",
     "testReact": "if [ ! -f my-react-app/package.json ]; then yarn run firstRunReact; fi",
-    "prestartReact": "npm install && yarn run testReact",
+    "prestartReact": "yarn install && yarn run testReact",
     "startReact": "cd my-react-app && yarn start",
     "startAll": "parallelshell 'yarn run startReact' 'yarn run startPreact' 'yarn run startVue' 'yarn run startAngular'"
   },

replacement.package.json

@@ -7,23 +7,23 @@
   "scripts": {
     "firstRunPreact": "node_modules/.bin/preact create my-preact-app",
     "testPreact": "if [ ! -f my-preact-app/package.json ]; then yarn run firstRunPreact; fi",
-    "prestartPreact": "yarn run testPreact",
-    "startPreact": "cd my-preact-app && yarn start",
+    "prestartPreact": "yarn install && yarn run testPreact",
+    "startPreact": "cd my-preact-app && node_modules/.bin/preact watch -p 6789",
     "namePkgReturn": "mv package.json replacement.package.json && mv temp.package.json package.json",
     "namePkgTemp": "mv package.json temp.package.json && mv replacement.package.json package.json",
-    "firstRunAngular": "npm run namePkgTemp && ng new my-angular-app && npm run namePkgReturn",
-    "testAngular": "if [ ! -f my-angular-app/package.json ]; then npm run firstRunAngular; fi",
-    "prestartAngular": "npm run testAngular",
+    "firstRunAngular": "yarn run namePkgTemp && ng new my-angular-app && yarn run namePkgReturn",
+    "testAngular": "if [ ! -f my-angular-app/package.json ]; then yarn run firstRunAngular; fi",
+    "prestartAngular": "yarn install && yarn run testAngular",
     "startAngular": "cd my-angular-app && node_modules/.bin/ng serve",
     "firstRunVue": "node_modules/.bin/vue init webpack my-vue-app",
     "testVue": "if [ ! -f my-vue-app/package.json ]; then yarn run firstRunVue; fi",
-    "prestartVue": "yarn run testVue",
-    "startVue": "cd my-vue-app && npm install && npm run dev",
+    "prestartVue": "yarn install && yarn run testVue",
+    "startVue": "cd my-vue-app && yarn install && yarn run dev",
     "firstRunReact": "node_modules/.bin/create-react-app my-react-app",
     "testReact": "if [ ! -f my-react-app/package.json ]; then yarn run firstRunReact; fi",
-    "prestartReact": "yarn run testReact",
+    "prestartReact": "yarn install && yarn run testReact",
     "startReact": "cd my-react-app && yarn start",
-    "startAll": "npm install && parallelshell 'yarn run startReact' 'yarn run startPreact' 'yarn run startVue' 'yarn run startAngular'"
+    "startAll": "parallelshell 'yarn run startReact' 'yarn run startPreact' 'yarn run startVue' 'yarn run startAngular'"
   },
   "peerDependencies": {
     "@angular/cli": "^1.4.3",