Merge pull request #703 from appirio-tech/readme-updates

Update readme for webpack

Author: nlitwin

README.md

@@ -2,55 +2,81 @@
 
 This repository houses any new topcoder pages or refactored Angular apps/pages from the tc-site repository.
 
-The technologies used are Jade, SCSS, Angular, and Gulp.
+The technologies used are Jade, SCSS, Angular, and Webpack.
 
 ## Installation
 
-If you don't have compass installed, run the following:
- - Windows - gem install compass
- - Linux/OS X - sudo gem install compass
+We use node 5.x and npm 3.x, so you may need to download a new version of node. The easiest way is to download [nvm](https://github.com/creationix/nvm). We have a `.nvmrc` file in the root of the project, so you can just run `nvm use` to switch to the correct version of node.
 
 Install dependencies by running the following in the root of the project:
- - npm install
- - bower install
+ - `npm i`
+ - **Note:** You must use npm 3. Type `npm -v` to ensure you have a 3.x version.
+ - bower i
 
 In order to test a logged in user, you must make an entry in your /etc/hosts file, pointing local.topcoder-dev.com to localhost. For example, open your /etc/hosts file with something like `vim /etc/hosts` and add `127.0.0.1 local.topcoder-dev.com`. After you run `gulp serve`, which launches a new window or tab, change `http://localhost:3000/sample/` to `http://local.topcoder-dev.com:3000/sample/`. You will then be able to login and pick up information from the cookies with `.topcoder-dev.com` as the domain.
 
-## Gulpfile Commands
-- To run locally without minification: `gulp serve`
-- To create the build: `gulp build:topcoder`
-- To run the test runner and view specs.html: `gulp serve-specs`
+## NPM Commands
+- To run locally: `npm run dev` and head to `local.topcoder-dev.com:3000/my-dashboard`
+- To create the build: `npm run build`
+- To run the tests: `npm test`
+
+## Recommended Developer Tools
+
+Syntax highlighting for ES6 and React JSX
+- Install [babel](https://packagecontrol.io/packages/Babel) via the package manager in Sublime Text
+  - **Note:** Sublime Text 3 is required for this plugin
+- Set the plugin as the default syntax for a particular extension
+  - Open a file with the `.js` extension
+  - Select `View` from the menu
+  - Then `Syntax -> Open all with current extension as...`
+  - Then `Babel -> JavaScript (Babel)`
+  - Repeat for any other extensions, e.g. `.jsx`
+
+Recommended Theme
+- Install [Oceanic Next Color Theme](https://github.com/voronianski/oceanic-next-color-scheme) via the Sublime Text package manager.
+- Add the following to `Sublime Text -> Preferences -> Settings-User` (`⌘ + ,` on Mac)
+```
+{
+  "color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
+  "theme": "Oceanic Next.sublime-theme"
+}
+```
 
-### Testing
+JavaScript linting
+- Install [ESLint](http://eslint.org/docs/user-guide/getting-started) with `npm i -g eslint`
+- For new projects, you can create a local `.eslintrc.json` file by running `eslint --init`
+  - **Note:** If you're using ES6, make sure you add `"modules": true` to `"ecmaFeatures"` and `"node": true` to `"env"` in your `.eslintrc.json` file
+  - **Note:** If you are using React, make sure you have `eslint` and `eslint-plugin-react` as `devDependencies` in your `package.json` file
+  - **Optional**: Add `"lint": "eslint ."` to your `package.json` file to run linting at any time via `npm run lint`
 
-Running `gulp test:topcoder` will perform a single run of the unit tests with Karma in the command line.
-Running `gulp autotest:topcoder` will keep the server running and watching files in the command line.
+Automatic JavaScript linting in Sublime Text
+- Install [SublimeLinter](http://sublimelinter.readthedocs.org/en/latest/installation.html) following the instructions under "Installing via Package Control"
+- Install [SublimeLinter-eslint](https://github.com/roadhump/SublimeLinter-eslint) with the package manager. The package is called `SublimeLinter-contrib-eslint`
+
+### Testing
 
 To read about the file and folder structure of tests, read [this section](https://github.com/appirio-tech/topcoder-app#tests)
 
 ### Description of Files and Folders
 
 #### app
-This folder holds all of our Angular JavaScript and Jade files. Here you'll find the top level Angular app in topcoder.module.js. It has all of our submodules as dependencies (tc.peer-review, tc.account, etc.). Each submodule has its own folder, including its own Angular module declaration, e.g. 'peer-review/peer-review.module.js'. All files are named according to their Angular component, e.g. review-status.controller.js, peer-review.routes.js.
+This folder holds all of our Angular JavaScript and Jade files. Here you'll find the top level Angular app in `topcoder.module.js`. It has all of our submodules as dependencies (tc.peer-review, tc.account, etc.). Each submodule has its own folder, including its own Angular module declaration, e.g. 'peer-review/peer-review.module.js'. All files are named according to their Angular component, e.g. review-status.controller.js, peer-review.routes.js.
 
 #### app/services
-Services live in their own folder. All services are part of the tc.services module, which is a dependency of topcoder.module.js.
+Services live in their own folder. All services are part of the tc.services module, which is a dependency of `topcoder.module.js`.
 
 #### assets
   - The assets folder contains CSS, fonts, images, and scripts
   - CSS
     - Each Angular submodule has a CSS folder with the same name
     - All files are in the `.scss` format
   - Scripts
-    - This folder contains any vendor JavaScript that does not come from bower. (Basically anything we've been using a CDN to get, but that we want to have a local copy of. This allows us to handle minification and concatenation ourselves and put it on our own CDN)
-
-#### build
-This is the optimized code ready for production. In here we have minified, concatenated vendor.js and app.js as well as minified and concatenated app.css. Running `grunt build:topcoder` also creates a templates.js file which stores all our HTML in Angular's $templateCache. This is created in .tmp, injected in the index.html, and concatenated with the rest of the app JavaScript. The last step in creating the build folder is that all of our files are revved and rewritten to have a unique filename, allowing us to put them on our CDN.
+    - This folder contains our analytics, e.g. Google, New Relic, etc.
 
 #### tests
-The tests folder contains mock data (tests/test-helpers/mock-data.js). It also has a file for integration tests down the road, but this is not currently wired up (server-integration/someDataService.spec.js). To run tests, use the `gulp serve-specs` task. This serves up specs.html, where you can see all the tests passing. It will watch files and reload as you work on code and save.
+The tests folder contains mock data (tests/test-helpers/mock-data.js). To run tests, use `npm test`.
 
-Spec files live alongside the code they are testing. For example, in peer-review you have review-status.controller.js and review-status.spec.js in the same review-status folder. If you want to see an example of tests, use review-status.spec.js as an example of controller tests and services/challenge.service.spec.js as an example of service tests.
+Spec files live alongside the code they are testing. For example, in peer-review you have review-status.controller.js and review-status.spec.js in the same review-status folder.
 
 ## UI-Router and States
 See any *.routes.js file as an example.
@@ -61,6 +87,10 @@ See any *.routes.js file as an example.
 
 ### Style Guide and Naming Conventions
 
+  - Please use ES2015 syntax whenever possible
+  - Do not use semicolons
+  - Use the Angular style guide mentioned below
+
 In general, follow this [AngularJS style guide](https://github.com/johnpapa/angular-styleguide), which covers JavaScript code style, JavaScript variable naming, and file naming conventions. One deviation is in the naming of services, where we follow the same pattern as controllers, e.g. UserService, ProfileService.
 
 ### Pull Requests
@@ -110,6 +140,7 @@ SCSS Files
   - This repository uses flexbox for arranging content. The use of any extra CSS libraries should be discussed with the team
 
 JavaScript
+  - Use ES2015
   - See this section on [naming conventions and style guide](https://github.com/appirio-tech/topcoder-app/blob/dev/README.md#style-guide-and-naming-conventions)
 
 Creating New Views/Pages