Full Stack Development Flashcards
Express
Fast, unopinionated, minimalist web framework for Node.js
With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.
But First
Blast To The Past
Fast, unopinionated, minimalist web framework for Node.js
With a myriad of HTTP utility methods and middleware at your disposal, creating a robust API is quick and easy.
But First
Blast To The Past
Express
CRUD
Create (post) - Make something
Read (get) - Get Something
Update (put) - Change something
Delete (delete) - Remove something
Create (post) - Make something
Read (get) - Get Something
Update (put) - Change something
Delete (delete) - Remove something
CRUD
EJS (Embed Javascript Templates)
EJS
(Embedded Javascript Templates)
<h1>Current Rappers</h1>
<ul class="rappers">
<% for(let i=0; i < info.length; i++) {%>
<li class="rapper">
<span><%= info[i].stageName %></span>
<span><%= info[i].birthName %></span>
<span class="del">delete</span>
</li>
<% } %>
</ul>
<h2>Add A Rapper:</h2>
<h1>Current Rappers</h1>
<ul class="rappers">
<% for(let i=0; i < info.length; i++) {%>
<li class="rapper">
<span><%= info[i].stageName %></span>
<span><%= info[i].birthName %></span>
<span class="del">delete</span>
</li>
<% } %>
</ul>
<h2>Add A Rapper:</h2>
EJS (Embed Javascript Templates)
Setting Up The Project
mkdir api-project
cd api-project
npm init
npm install express –save
npm install mongodb –save
npm install ejs –save
npm install dotenv –save
mkdir api-project
cd api-project
npm init
npm install express –save
npm install mongodb –save
npm install ejs –save
npm install dotenv –save
Setting Up The Project
let db,
dbConnectionStr = ‘mongodb+srv://demo:demo@cluster0
.2wapm.mongodb.net/rap?retryWrites=true&w=majority’,
dbName = ‘rap’
MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
.then(client => {
console.log(Connected to ${dbName} Database)
db = client.db(dbName)
})
Connected To DB
Connect to DB
let db,
dbConnectionStr = ‘mongodb+srv://demo:demo@cluster0
.2wapm.mongodb.net/rap?retryWrites=true&w=majority’,
dbName = ‘rap’
MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
.then(client => {
console.log(Connected to ${dbName} Database)
db = client.db(dbName)
})
use .env
DB_STRING =
mongodb+srv://demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority
Use .env
.env file
add .env to .gitignore
.env
node_modules
In terminal, add var to Heroku
heroku config:set DB_STRING =
mongodb+srv://demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority
DB_STRING =
mongodb+srv://demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority
Use .env
.env file
add .env to .gitignore
.env
node_modules
In terminal, add var to Heroku
heroku config:set DB_STRING =
mongodb+srv://demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority
use .env
Connect to DB
let db,
dbConnectionStr = process.env.DB_STRING,
dbName = ‘rap’
MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
.then(client => {
console.log(Connected to ${dbName} Database)
db = client.db(dbName)
})
let db,
dbConnectionStr = process.env.DB_STRING,
dbName = ‘rap’
MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })
.then(client => {
console.log(Connected to ${dbName} Database)
db = client.db(dbName)
})
Connect to DB
app.set(‘view engine’, ‘ejs’)
app.use(express.static(‘public’))
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.listen(process.env.PORT || PORT, ()=>{
console.log(Server running on port ${PORT})
})
Setup Server
app.set(‘view engine’, ‘ejs’)
app.use(express.static(‘public’))
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.listen(process.env.PORT || PORT, ()=>{
console.log(Server running on port ${PORT})
})
Setup Server
Create EJS File
<h1>Current Rappers</h1>
<ul class="rappers">
<% for(let i=0; i < info.length; i++) {%>
<li class="rapper">
<span><%= info[i].stageName %></span>
<span><%= info[i].birthName %></span>
<span class="del">delete</span>
</li>
<% } %>
</ul>
<h2>Add A Rapper:</h2>
<h1>Current Rappers</h1>
<ul class="rappers">
<% for(let i=0; i < info.length; i++) {%>
<li class="rapper">
<span><%= info[i].stageName %></span>
<span><%= info[i].birthName %></span>
<span class="del">delete</span>
</li>
<% } %>
</ul>
<h2>Add A Rapper:</h2>
Create EJS File
API GET
app.get(‘/’,(request, response)=>{
db.collection(‘rappers’).find().toArray()
.then(data => {
response.render(‘index.ejs’, { info: data })
})
.catch(error => console.error(error))
})
app.get(‘/’,(request, response)=>{
db.collection(‘rappers’).find().toArray()
.then(data => {
response.render(‘index.ejs’, { info: data })
})
.catch(error => console.error(error))
})
API GET
API POST
app.post(‘/addRapper’, (request, response) => {
db.collection(‘rappers’).insertOne(request.body)
.then(result => {
console.log(‘Rapper Added’)
response.redirect(‘/’)
})
.catch(error => console.error(error))
})
app.post(‘/addRapper’, (request, response) => {
db.collection(‘rappers’).insertOne(request.body)
.then(result => {
console.log(‘Rapper Added’)
response.redirect(‘/’)
})
.catch(error => console.error(error))
})
API Post
API PUT
app.put(‘/addOneLike’, (request, response) => {
db.collection(‘rappers’).updateOne({stageName: request.body.stageNameS,
birthName: request.body.birthNameS,
likes: request.body.likesS},{
$set: {
likes:request.body.likesS + 1
}
},{
sort: {_id: -1},
upsert: true
})
.then(result => {
console.log(‘Added One Like’)
response.json(‘Like Added’)
})
.catch(error => console.error(error))
})
app.put(‘/addOneLike’, (request, response) => {
db.collection(‘rappers’).updateOne({stageName: request.body.stageNameS,
birthName: request.body.birthNameS,
likes: request.body.likesS},{
$set: {
likes:request.body.likesS + 1
}
},{
sort: {_id: -1},
upsert: true
})
.then(result => {
console.log(‘Added One Like’)
response.json(‘Like Added’)
})
.catch(error => console.error(error))
})
API Put
API - DELETE
app.delete(‘/deleteRapper’, (request, response) => {
db.collection(‘rappers’).deleteOne({stageName: request.body.stageNameS})
.then(result => {
console.log(‘Rapper Deleted’)
response.json(‘Rapper Deleted’)
})
.catch(error => console.error(error))
})
app.delete(‘/deleteRapper’, (request, response) => {
db.collection(‘rappers’).deleteOne({stageName: request.body.stageNameS})
.then(result => {
console.log(‘Rapper Deleted’)
response.json(‘Rapper Deleted’)
})
.catch(error => console.error(error))
})
API Delete
heroku login -i
heroku create simple-rap-api
echo “web: node server.js” > Procfile
git add .
git commit -m “changes”
git push heroku main
Push to Heroku
Push to Heroku
heroku login -i
heroku create simple-rap-api
echo “web: node server.js” > Procfile
git add .
git commit -m “changes”
git push heroku main
npm i express mongoose connect-mongo express-session express-handlebars dotenv method-override moment morgan passport passport-google-oauth20
Code to set up beginning of app
mkdir todo-mvc-auth-microsoft
cd todo-mvc-auth-microsoft
npm init
npm i connect-mongo dotenv ejs
express express-session mongodb mongoose
nodemon passport passport-azure-ad –save
DB_STRING =
mongodb+srv://demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority
Using .env
.env file
add .env and config to .gitignore
.env
node_modules
config/config.js
exports.destroySessionUrl = ‘http://localhost:2121’
exports.databaseUri = ‘mongodb://localhost/OIDCStrategy’
Using config
config.js file
const mongoose = require(‘mongoose’)
const connectDB = async () => {
try {
const conn = await mongoose.connect(process.env.DB_STRING, {
useNewUrlParser: true,
useUnifiedTopology: true,
useFindAndModify: false,
})
console.log(`MongoDB Connected: ${conn.connection.host}`) } catch (err) {
console.error(err)
process.exit(1) } }
module.exports = connectDB
DB Setup
const express = require(‘express’)
const app = express()
const mongoose = require(‘mongoose’)
const passport = require(‘passport’)
const session = require(‘express-session’)
const MongoStore = require(‘connect-mongo’)(session)
const connectDB = require(‘./config/database’)
const authRoutes = require(‘./routes/auth’)
const homeRoutes = require(‘./routes/home’)
const todoRoutes = require(‘./routes/todos’)
require(‘dotenv’).config({path: ‘./config/.env’})
require(‘./config/passport’)(passport)
Setup Server
DB_STRING = mongodb+srv: //demo:demo@cluster0.2wapm.mongodb.net/rap?retryWrites=true&w=majority Using .env .env file add .env and config to .gitignore .env node_modules config/config.js exports.destroySessionUrl = ‘http://localhost:2121’ exports.databaseUri = ‘mongodb://localhost/OIDCStrategy’ Using config config.js file
const authRoutes = require(‘./routes/auth’)
const homeRoutes = require(‘./routes/home’)
const todoRoutes = require(‘./routes/todos’)
app.use(‘/’, homeRoutes)
app.use(‘/auth’, authRoutes)
app.use(‘/todos’, todoRoutes)
API Get
app.get(‘/’,(request, response)=>{
db.collection(‘rappers’).find().toArray()
.then(data => {
response.render(‘index.ejs’, { info: data })
})
.catch(error => console.error(error))
})
API NEW GET
//Routes File
app.use(‘/todos’, todoRoutes)
//Route to Controller
router.get(‘/’, ensureAuth, todosController.getTodos)
//Controller talking to model
getTodos: async (req,res)=>{
console.log(req.user)
try{
const todoItems = await Todo.find()
const itemsLeft = await Todo.countDocuments(
{microsoftId: req.user.microsoftId, completed: false}
)
res.render(‘todos.ejs’,
{todos: todoItems,
left: itemsLeft,
user: req.user}
)
}catch(err){
console.log(err)
}
}
Find the hiring manager:
Add them to the hitlist
Follow them on Twitter
Find their email (hunter.io)
Ask for a coffee chat
Send a thank you
Get the recommendation
