SLIDE 1
TODAY
MP1 Overview Setting up a development environment Setting up a server Brief overview of important tools
DEV LAB 1 TODAY MP1 Overview Setting up a development environment - - PowerPoint PPT Presentation
DEV LAB 1 TODAY MP1 Overview Setting up a development environment - - PowerPoint PPT Presentation
CS 498RK FALL 2016 DEV LAB 1 TODAY MP1 Overview Setting up a development environment Setting up a server Brief overview of important tools MP 1 was released yesterday. http://uiuc-web-programming.github.io/sp2016/MP-1/ MP 1 Setup
SLIDE 2
SLIDE 3
MP 1 was released yesterday.
http://uiuc-web-programming.github.io/sp2016/MP-1/
SLIDE 4
MP 1 Setup
http://uiuc-web-programming.github.io/sp2016/Lab-1/
SLIDE 5
SETUP AND WORKFLOW
http://webdesign.about.com/od/servers/qt/web-servers-and-workflow.htm
Development Machine Server
Web applications end up on a server Development is generally done on a local machine
SLIDE 6
SETUP AND WORKFLOW
http://codehenge.net/blog/2013/02/automate-your-development-environment-with-vagrant/
Development Machine Server
Push Pull
SLIDE 7
VAGRANT
https://www.vagrantup.com/
Tool for creating virtual development environments A Vagrantfile contains all the information about the environment All developers on a project use the same exact environment for development
SLIDE 8
GITHUB
https://github.com/uiuc-web-programming
Everyone should have an account Pointers to tutorials on Resources page Apply for student developer pack Watch important class related repositories
SLIDE 9
ADDITIONAL WORKFLOW OPTIONS
Add a staging environment Have a development git branch Example of a fairly elaborate git branching model Use git-hooks for automation Use git-hooks for deployment to server
SLIDE 10
TOOLS
SLIDE 11
WEBSTORM
https://www.jetbrains.com/webstorm/
Powerful IDE for JavaScript Free for students Alternative: Sublime Text 3 Learn to use Emmet - Demo
SLIDE 12
NODEJS
http://nodejs.org/
Platform that enables server side JavaScript Built on Chrome's JavaScript runtime Event-driven, non-blocking I/O model
SLIDE 13
EXPRESS
http://expressjs.com/
Web server for Nodejs We use express to serve static files for MP 1 Details in app.js in MP1 starter code
SLIDE 14
NPM
https://www.npmjs.com/
Node package manager package.json file contains list of packages needed for a project npm install <package_name> npm install -g <package_name> npm install --save <package_name> npm install
SLIDE 15
BOWER
http://bower.io/
Package manager for front-end packages bower.json file contains list of packages needed for a project bower install <package_name> bower install --save <package_name> bower install
SLIDE 16
GRUNT
http://gruntjs.com/
JavaScript task runner Define tasks in Gruntfile.js grunt <task>
SLIDE 17