This project is an example of current framework cli-build processes. Once the initial files are created, you can experiment in each of the apps in their own child directory.
Each framework has its own installation and launch scripts. It is recommended that you use yarn for package management and running scripts.
git clone git@github.com:KevinEverywhere/simple-init-react-angular-preact-vue.git
cd simple-init-react-angular-preact-vue
npm install
Running the startAll script will execute startReact, startPreact, and startAngular. Please look to the individual script to see cli specifics. Vue required interactive information to begin. Please see below for starting the Vue application.
Ensure that you have previously installed yarn and then run this line of code.
yarn run startAll
The most typical errors when they occur come from ports 3000, 6789 and 4200 already being used; and yarn not being installed. If you do not have yarn installed, run the following line of code.
npm install -g yarn
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.
yarn run startReact
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.
yarn run startAngular
One thing to notice for the angular-cli are the following two scripts in package.json:
"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",
These are executed by the firstRunAngular script, and these are used to work around the limitation of having the angular-cli library included as a dependency. If you notice the firstRunAngular script, it first renames package.json and uses replacement.package.json which lists the angular-cli library as a peerDependency. After ng new has created the new app, it returns the peerDependencies to regular by renaming temp.package.json to package.json.
firstRunAngular:
yarn run namePkgTemp && ng new my-angular-app && yarn run namePkgReturn
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
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.
yarn run startVue
This truly is meant as nothing more than a way to quickly see the state of current CLI framework development in September 2017. This should save some time for those wanting to have a quick view of how they compare and look under the hood.
This repo uses the initialization scripts described in the preact-cli, for preact, create-react-app for react, angular-cli, for angular, and vue-cli for vue to create base applications. For more information, please use the links below to discover best practices and state of the moment examples and documentation.