stumash / CoursePlanner

http://conucourseplanner.online
MIT License
5 stars 3 forks source link

10 npm dependencies needed for a simple Hello world in react 😢 #50

Closed Davidster closed 7 years ago

Davidster commented 7 years ago

This pull request is trying to merge into changeToGridView-#45, not master.

If you're too lazy to read this, then please at least just follow my instructions at the bottom so I know this stuff is working for everybody. I recommend reading the diffs using the split view.

Hello react.js

I wiped away all of our frontend stuff except for our two images and our css font and replaced it with a stupid simple hello world example using react.

Background info : When you type npm run scriptName in the terminal, node will look in the package.json and run the command contained in the value of scripts.scriptName. Weirdly enough, unless you install our npm dependencies globally via npm install -g or add some new paths, you will get command not found errors if you try to run the command directly in the terminal. For example, the babel command will not be found.

Two operations have been added to our deploy process to accomodate react.

  1. The first operation compiles the react code itself (babel-src/index.js) which uses Babel as recommended by the react docs. It can be run manually outside the deploy script via npm run babel (see /package.json:7). It generates a new javascript file inside /src/main/webapp/babel-out which cannot run in the browser without additional processing.

  2. React recommends to use either browserify or webpack in order to package the generated code from babel-out into a single obfuscated js file which can run the the browser. This is the second operation and can be run manually via npm run browserify or npm run browserify-prod to generate this final js file for dev or prod respectively. I chose to use browserify since it's simpler and was pretty easy to add into the project. I don't believe we need anything more sophisticated than this but if ya'll wanna switch to webpack, say it now before it's too late.

I added a temporary option to deploy.sh which lets you put a second argument. Basically if you do sh deploy.sh david it deploys using a slow dev version of react with good dev tools for like bug testing and stuff, and if you do sh deploy.sh david x it deploys with a faster and more lightweight prod version of react. We shall replace this feature soon enough by always using the dev version unless youre doing sh deply.sh prod, I just wanted to make sure the prod thing is working for everyone.

Please try it yourself

PeterGhimself commented 7 years ago

VERY NOICE!

Davidster commented 7 years ago

Related to #45