Info Web Tech Course Web Programming Anselm Spoerri
Info + Web Tech Course Web Programming Anselm Spoerri Ph. D (MIT) SC&I @ Rutgers University aspoerri@rutgers. edu Web Programming Course © Anselm Spoerri
Lecture 13 - Overview 1 st Graded Discussion "Learning How to Interact with Other Developers. . . " Due May 2 2 nd Graded Discussion "Reflections on Learning How to Create Web Applications " Due May 2 Ex 5 Revision Due May 5 Full Stack React. js | Node. js + Express. js | Mongo. DB Project Lab Due Fri May 7 What to Do BEFORE Next Class ‒ Videos in Week 14 (in green) Web Programming Course © Anselm Spoerri
Install React: Creating and Hosting a Full Stack Site https: //files 3. lynda. com/secure/courses/5035829/exercises/Ex_Files_React_Creating_Hosting_Full_Stack. zip Ch 1: Front-end = my-blog Create folder for project = project_demo Command Line (Terminal 1): cd project_demo npx create-react-app my-blog --use-npm cd my-blog $ npm start 01_03 in my-blog folder npm install --save react-router-dom Web Programming Course © Anselm Spoerri
Install React: Creating and Hosting a Full Stack Site https: //files 3. lynda. com/secure/courses/5035829/exercises/Ex_Files_React_Creating_Hosting_Full_Stack. zip Ch 2: Back-end = my-blog-backend Create folder for backend = my-blog-backend Command Line (Terminal 2): cd my-blog-backend npm init -y npm install --save express es 6 support npm install -save-dev @babel/core @babel/node @babel/preset-env $ npx babel-node src/server. js 02_08: localhost: 8000/hello npm install --save body-parser 02_06: server automatically update. . . nodemom npm install --save-dev nodemon $ npx nodemon --exec npx babel-node src/server. js package. json: aliases for nodemon command $ npm start npm install mongodb --save Web Programming Course © Anselm Spoerri
Install React: Creating and Hosting a Full Stack Site https: //files 3. lynda. com/secure/courses/5035829/exercises/Ex_Files_React_Creating_Hosting_Full_Stack. zip Ch 2: Back-end = testing Express server using Postman 02_03: Download Postman: https: //www. postman. com/ In Postman: Get Request = http: //localhost: 8000/hello In Postman: Post Request = http: //localhost: 8000/hello Create simple JSON file in Body { "name": "Anselm" } In my-blog-backend: npm install --save body-parser 02_04: URL parameters In Postman: Get Request = http: //localhost: 8000/hello/Anselm 02_05: In Postman: Post Request = http: //localhost: 8000/api/articles/learn-node/upvote 02_07: comments and create route In Postman: Post Request = http: //localhost: 8000/api/articles/learn-node/add-comment Body (raw): JSON = { "username": "abcd", "text": "Comment. . . " } Web Programming Course © Anselm Spoerri
Install React: Creating and Hosting a Full Stack Site https: //files 3. lynda. com/secure/courses/5035829/exercises/Ex_Files_React_Creating_Hosting_Full_Stack. zip Mongo. DB – https: //www. mongodb. com/ Download Community Server https: //www. mongodb. com/download-center/community | Port 27017 Use Files Explorer to navigate to bin folder MAC users: use Homebrew. . . brew install mongodb $ sudo mkdir -p /data/db $ sudo chown -R `id -un` /data/db Windows: https: //docs. mongodb. com/manual/tutorial/install-mongodb-on-windows/ * Community Server | Complete | no Compass Create data/db folder in C: Edit Environment Variables > Path > C: Program FilesMongo. DBServer4. 2bin 3 rd Command line: $ mongod => waiting for connection on port 27017 4 th Command line: $ mongo Create new mongo db: use my-blog Initialize my-blog db watch: Ch 3 Installing Mongo. DB Back-end = my-blog-backend: npm install mongodb --save Web Programming Course © Anselm Spoerri
Recap Mongo. DB – https: //www. mongodb. com/ Port 27017 Use Terminal #1 (navigate to bin folder if needed) To run Mongo. DB $ mongod Use Terminal #2 (navigate to bin folder if needed) To run Mongo Shell $ mongo my-blog-backend Use Terminal #3 to navigate to my-blog-backend folder $ npm start (since we created aliases for nodemon command in package. json) my-blog Use Terminal #4 to navigate to my-blog folder $ npm start (should launch browser : 3000) Web Programming Course © Anselm Spoerri
- Slides: 7