- CSE 341 - Web Services - Winter 2024
- w01 - Introducing our tech stack
- w02 - REST Clients, GET Requests, Node Architecture
- w03 - HTTP Requests & Dev Tools (and, Linters and Formatters)
- w04 - API Documentation
- w05 - REST & JSON Alternatives
- w06 - Validation & Error Handling
- w07 - OAuth
- w08 - OAuth
- w09 - API Gateways and Managers
- w10 - API Gateways and Managers
- w11 - Testing
- w12 - Testing
- w13 - Wrap Up
- Resources
- PROJECT IDEA: CMS (Content Management System)
- User implementation πΊ
- Maphnew/node_andrew/README.md β
- Node Architecture and API Organization:
- Lesson 01 π
- Videos:
- Intro: https://youtu.be/bUKgMUl5JyU
- VS Code: https://youtu.be/5FE7L8syBm4
- How to Install GIT on Windows, MacOS and ChromeOS: https://youtu.be/idN0wJqVTyo
- CSE 341 MongoDB setup (January 2023): https://youtu.be/g4V7n86mMr0
- Deploy Node js API with Env Variables on Render Automatically with GitHub Deploys: https://youtu.be/68ubggfsQlE
- Create Github Repository and save all your code there: https://youtu.be/bLPPQ0R5hj0
- Node and Express Tutorial: https://youtu.be/K00J87SofEc
- Visual Studio Code π
- Microsoft Teams π
- Node.js π
- YouTube Recorders: Zoom, Loom, Screencastify, screencast-o-matic, OBS Studio, best screen recorder for Windows π
- Git π
- Add to the PATH on Windows 10 and Windows 11 π
- GitHub π
- MongoDB Atlas π
- Building the API with Node.js
- (OPTIONAL) JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour π
- Node and Express Tutorial π
- Node docs π
- (OPTIONAL) YouTube: Node.js Tutorial for Beginners: Learn Node in 1 Hour π
- (OPTIONAL) YouTube search: nodejs for beginners π
- Even a simple web search like "nodejs web server example" can be extremely helpful. π
- Saving to GitHub
- What is API Deployment? A2 Hosting, Heroku, Amazon Web Services, DigitalOcean, Glitch, Google Cloud Platform, Microsoft Azure, Platform.sh, NodeChef, Render, Fly, Railway, Vercel, - Render
- Render π
- Testing your deployed API
- REST Client in VSCode π
- Connect to a MongoDB Database Using Node.js π
- (OPTIONAL) YouTube: MongoDB (Atlas) connection using Node π
- Moving nodejs MongoDB connection code to another file π
A REST client is a tool that allows us to invoke a REST service API. In lesson 1, we created our first GET request API and we actually ended up seeing that data directly in the browser. To an extent, our browser functioned as our REST client last week. However, there are many things that our browsers cannot do without some client-side code. For example, if I needed to make a GET request with any type of dynamic data, headers, authentication keys, or other similar pieces of data, I would not be able to unless I had a frontend project in place. REST clients on the other hand, will allow us to make all sorts of HTTP requests with all sorts of data in an environment that is intuitive and convenient.
The number of REST clients in production today is very great, with these programs coming and going like much of the software we see on a regular basis. Here are several REST clients being used widely in industry today:
- HTTPie π
- Postman π
- Swagger π
- Thunder Client (VS Code Extension) π
- Rest Client (VS Code Extension) π
- You can read about many others in this Google search. π
There are a lot of different ways to learn about GET requests, and you're likely already familiar with what they are from previous classes you've taken. For example, in WDD 230, you made several fetch requests (JavaScript client way of sending http requests to a server), to get temple data, or weather data...those were GET requests. Here are some resources below to learn more about these, and also to learn how to make them in Node.
- W3schools HTTP Methods π
- GET - What is the GET Method π
- Build Node.js RESTful APIs in 10 Minutes π
- (OPTIONAL) YouTube: Node.js + Express - Tutorial - GET and POST Requests π
- (OPTIONAL) YouTube: How to build a REST API with Node js & Express π
- What are query parameters? π
- How to access query string parameters π
- Stack Overflow: How to get GET (query string) variables in Express.js on Node.js? π
- Node Debugging Guide π
- The Absolute Easiest Way to Debug Node.js β with VS Code π
- (Optional) YouTube: Debug NodeJS Project in VS Code π
- Node.js project architecture best practices π
- Bulletproof node.js project architecture π
- Organizing your Express.js project structure for better productivity π
As you learn about these different HTTP methods, know that there are always other ways to do things. For example, MongoDB uses queries and functions to insert, update, delete and retrieve data. Technically, I could use a POST to get data, modify it, or even delete it. However, these HTTP methods are here to add clarity and consistency to applications, and will work with other databases that don't rely on functions as much as MongoDB does.
- Building a REST API with Node and Express π
- MongoDB http.post() π
- Building a RESTful API Using Node.JS and MongoDB π
- (OPTIONAL) YouTube: Build A Restful Api With Node.js Express & MongoDB | π
- Node JS Make HTTP Put Request Example π
- MongoDB Update Documents π
- Node.js, Express & MongoDb: Build a CRUD Rest Api example π
Here is a great article that sums up the CRUD (Create, Read, Update, Delete) process using Node.js and MongoDB.
Once you learn how to use code linters, you should never go back. When properly configured, they help keep your code, neat, clean, functional, and error-free. You should use a linter on your code for the remainder of this class.
- JavaScript Linters π
- The Top Five JavaScript Linting Tools π
- (OPTIONAL) YouTube: VSCode ESLint, Prettier & Airbnb Style Guide Setup π
Once you learn how to use code formatters, you should never go back. When properly configured, they help keep your code neat, consistent and clean. You should use a formatter on your code for the remainder of this class.
- Why You Should Use a Code Formatter π
- Top 10 VS Code Extensions π
- (OPTIONAL) YouTube: VS Code Autoformatter - Configuring Prettier π
More:
- VSCode ESLint, Prettier & Airbnb Style Guide Setup π
- eslint.org/docs/latest/ π
- VS Code Autoformatter - Configuring Prettier π
- Setup ESLINT and PRETTIER in React app π
The following article shows how to set up a linter and formatter with your project. Ignore the React stuff this time around and be sure to select Node instead of Browser when it prompts for where your code will run.
Once this is all set up, you can run commands from the terminal like: "npm run lint" or the others that we put into the package.json.
- (OPTIONAL) Youtube: Intro to API Documentation π
- What is API Documentation, and Why It Matters? π
- What is Swagger? π
- Create swagger.json from scratch (Design First) π
- Create swagger.json npm package (Development First) -
swagger-autogen
π- Swagger Autogen Docs π
- swagger-ui-express π
- Be aware that there are other resources for doing very similar types of API documentation. None of them appear to be as widely integrated with npm or as widely used in industry. Two other popular ones are Postman (which started off as just a rest client), and Readme. We will only use Swagger in this course.
- Repo: davibaltar/example-swagger-autogen π
- What is Data Validation? π
- A Clean Approach to Using
express-validator
π validatejs
- Validation in Node js Express Rest API π
- πΊ 7 - JOI Validation Schema to validate request body | Node JS API Authentication π
- Node.js Error Handling Made Easy: Best Practices On Just About Everything You Need to Know π
- Cleaner code in an Express REST API with unified error handling π
- πΊ Handling API Errors | RESTful API using NodeJS and MongoDB π
- From teacher:
- How to handle data validation in Node.js using validatorjs π
validation-express
- Lesson 7 π
- Class Solution π
- Website Authentication: The Complete Guide with FAQs π
- A Modern Password: 6 Top Tips for A Secure Login Process π
- RESTful API Authentication Basics π
- Authorization vs Authentication π
- OAuth 2.0 Playground π
- Whatβs the difference? OAuth 1.0 vs OAuth 2.0 π
- Differences Between OAuth 1 and 2 π
- OAuth 2.0: Benefits and use cases β why? π
- Simplified Oauth 2.0 Tutorial - Example with Node.js π πΊ ~11m
- Google OAuth Docs - Node.js quickstart π
- Node.js App From Scratch | Express, MongoDB & Google OAuth π πΊ 2h 28m
- OAuth (Passport.js) Tutorial #12 - Saving User to MongoDB π πΊ ~10m
- NodeJS & Express - Google OAuth2 using PassportJS π πΊ ~20m
- Lesson 7 Class Activity Walkthrough: Auth0 + Google π
User
model implementation:
- OAuth 2.0 π
- The OAuth 2.0 Authorization Framework - fc6749 π
- OAuth 2.0 configuration π
- Introduction to JSON Web Tokens π
- JSON Web Token (JWT) - fc7519 π
- What is JWT and how does it work? π
- (OPTIONAL) YouTube: What Is JWT and Why Should You Use JWT π πΊ ~15m
- OAuth vs JWT (JSON Web Tokens): An In-Depth Comparison π
- API Keys vs OAuth Tokens vs JSON Web Tokens π
- Top 3 Things You Should Know About Webhooks! π
- Passportjs:
- Lesson 9 π
- GitHub source code π
As your API scales, you start to run into questions like "How can I control who makes requests to it and how many requests can they make? How can I make sure the interface with the frontend stays the same while the backend is being updated? How can I handle influxes of requests?" API management tools exist to help with questions like these. One of these tools is an API gateway. API gateways serve as a middle layer to go between your API and the clients that use it.
- (OPTIONAL) YouTube: What is API gateway really all about? π
- Microsoft Tutorial: Hello World: API Management π
- 14 Open Source and Managed API Gateway for Modern Applications π
- Understanding the API Gateway: When You Need It and How to Implement It π
An API Gateway acts as a middle layer between your API services and the clients that use them. Here are some popular solutions out there today:
- WSO2 π
- Azure API Management π
- Amazon API Gateway π
- Kong π
- Tyk π
- KrakenD π
- Gloo Edge π
- Express Gateway π
This is an example that would walk you through setting up an API manager through Microsoft Azure.
- Create a new Azure API Management instance using Visual Studio Code π
- Once you import the backend API into API Management, your API Management API becomes a faΓ§ade for the backend API. You can customize the faΓ§ade π to your needs in API Management without touching the backend API.
- Import and publish your first API (first of a series of 10 tutorials) π
- Lesson 11 π
- Repository π
- Comparing Node.js unit testing frameworks π
- What Is the Best Unit Testing Framework for JavaScript? π
- Getting Started π
- Jest Tutorial for Beginners: Getting Started With JavaScript Testing π
- Debug Jest test files (look at Leigh Mathieson's answer) π
- (OPTIONAL) How to add unit testing to express using jest π
- Jest with Mockingoose Student Tutorial π
- Using Jest with MongoDb π
- Supertest(Library to use with another testing framework, for testing APIs.) π
Same content as Week 11.
- Additional content:
- Tags:
- How To Craft The Perfect Web Developer RΓ©ΒsuΒmΓ© π
- Sign up for a rΓ©sumΓ© review through Handshake. π
- Student Web Developer Resume Samples π
- BYU-Idaho Career Center Powerful Job Interviews π
- 19 Web Developer Interview Questions You Should Know π
- How to Ace the Web Developer Job Interview π
Here are some questions you should be prepared to answer for yourself:
- How do I schedule a practice or mock interview with the BYUI career center?
- What are the Wall Street Interviewing Strategies?
- What is your market value?
- How can you make a powerful introduction?
- How should you dress for interviews or career fairs? What does your appearance say about you?
Here are some questions you should be prepared to answer in an interview regarding the technologies taught in this class:
- T/F: NPM is a programming language.
- Node.js is a runtime for Javascript, NOT a Back End language.
- Node.js is a back end language, NOT a runtime for JavaScript.
- Node.JS allows JavaScript to be run outside of the browser.
- What does NPM stand for?
- What is the command to install the nodemon package globally?
- How do you initialize a Node.js project that creates a package.json and node_modules for you?
- What is the method to set up a server and make it run in a certain port?
- What Node.JS code is compiled into?
- What are Middleware functions?
- What is Express.js?
- What does MVC stand for?
- How do you make use of an express router for your requests?
- What is the responsibility of the Model?
- What is the responsibility of the Controller?
- How do you make relations in a NoSQL database such as MongoDB?
- What are the most important pieces of the structure of a MongoDB database?
- How do you find the id of a MongoDB document?
- What is a Cookie?
- What is a real disadvantage of using cookies on the client-side?
- What is a CSRF attack?
- The 300β399 range of http response status codes are for what?
- The 200β299 range of http response status codes are for what?
- The 400β499 range of http response status codes are for what?
- The 500β599 range of http response status codes are for what?
- What is the synchronous way of handling errors?
- What does the term βSanitizingβ refer to in Node.js?
- Where exactly do you inject your dependencies?
- Is Node.js recommended for heavy calculations and 3D rendering?
- What is risk?
- What are the tasks of risk management?
- When identifying and classifying risks, what are the 5 main risk impact areas?
- Why isnβt it possible to pass images/files with the file picker through the body of the request?
- What do the skip( ) and limit( ) methods do and where do you use them?
- Which is the HTTP verb that should be used with client-side JavaScript in order to delete something upon request?
- T/F: When performing an asynchronous request, the server has to send a response without reloading/re-rendering the page.
- T/F: Because every companyβs needs are unique, the payment process should not be outsourced and the development team should develop its own.
- GitHub OAuth Apps - https://github.com/settings/developers
supertokens/supertokens-core
- https://github.com/supertokens/supertokens-core- OpenAPI Guide - https://swagger.io/docs/specification/basic-structure/
- A CMS software application allows users to create, manage, and publish digital content like articles, images, and videos.