Skip to content

A four framework scaffolding application to provide quick comparison of current react, angular, preact and vue.

Notifications You must be signed in to change notification settings

KevinEverywhere/simple-init-react-angular-preact-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

simple-init-react-angular-preact-vue

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.

instructions

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

Run React, Angular and Preact at the same time

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

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.

yarn run startReact

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.

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

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

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.

yarn run startVue

summary

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.

reference

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.

react

angular

preact

vue


About

A four framework scaffolding application to provide quick comparison of current react, angular, preact and vue.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published