Node Flashcards
initialize N project with standard defaults
npm init -y
initialize N project step by step
npm init
install W for a N server
npm i -D webpack webpack-cli _webpack-dev-server
run W in specific mode
webpack –mode=«mode»
» mode: none, developmen, production
name of standard W config file
webpack.config.js
minimum W config
» webpack.config.js:
module.exports = {
entry: '«entry filename/path»',
mode: '«mode»',
output: {
filename: «output filename»,
_path: «absolute output path»,
_publicPath: «relative public path»
}
}
» !module.exports
» mode: development, production, none
» path: path.resolve(__dirname, ‘«folder»’)
» dev server: needs both output AND public path
use current work directory path in N
import path from ‘path’
path.resolve(__dirname, ‘«relative path»’)
set path for public/asset and output bundle folder in W config
» output: {
publicPath: «path»
}
» path: relative to server root: ‘/«folder»/’
» path: relative to index.html: ‘«folder»/’, ‘../«folder»/’
» from index.html to output script
set serving root of development server in W config
» devServer: {
contentBase: «server root»
}
run W development server
webpack-dev-server
setup loader in W
» npm i -D «_package» «package loader»
» module > rules: [{
test: «test regex»,
use: ['«loader2»', '«loader1»']
}]
» right loader is first
show W dev server error in browser window
» devServer: {
overlay: true
}
setup CSS in W
» npm i -D css-loader style-loader
» module > rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]setup HTML in W
» npm i -D html-loader extract-loader file-loader
» module > rules: [{
test: /\.html$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].html'
}
}, // resolves import/require
'extract-loader', // resolves urls
'html-loader' // loads raw html
]
}]setup image load in W
» module > rules: [{
test: /\.(jpg|jpeg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '«images folder»/[name].[ext]'
}
}
}]
» configured html-loader required
name of Babel configuration file
.babelrc
» is JSON file
setup Babel in W
» npm i -D @babel/core @babel/preset-env babel-loader
» module > rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
},
exclude: /node_modules/
}]setup minimal Express server in N
import express from ‘express’
const app = express()
app.listen(«port», () => {
console.log(Server is listening on port {«port»})
})
setup SASS in W
» npm i -D sass(/node-sass) sass-loader
» module > rules: [{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}]setup TypeScript in W
» npm i -D typescript ts-loader
» entry: './src/index.ts'
» resolve > extensions: [ _'.tsx', '.ts', '.js' ]
» module > rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}]setup plugin in W
» npm i -D «plugin»
» const «plugin» = require('«plugin»');
» plugins: [
new «plugin»()
]setup code splitting in W
» optimization > splitChunks: {
chunks: ‘all’,
_minSize: 0
}
» reduces duplicate code and libraries
setup webpack-dev-server with hot reloading in W
» npm i -D webpack-dev-server
» const webpack = require('webpack')
» devServer: {
hot: true
}
» plugins: [
new webpack.HotModuleReplacementPlugin()
]setup source mapping to original code for webpack-dev-server
» devtool: ‘(inline-)source-map’
» inline-: works in production
ES6 import of element from other file in N
import «default element alias» from ‘./«file path»’
import * as «alias» from ‘./«file path»’
import _«default element alias», { «element1», «_element2», _… } from ‘./«file path»’
access file system in N
import fs from ‘fs’
ES6 export of element from file in N
export _default «element»
export {«element» _as default, «_other element», _… }
install specific version of N package
npm i «package»@«version»
setup hot reloading on save of N
» npm i -D nodemon
» package.json > scripts:
nodemon «entry point»
get terminal arguments in N
process.argv
» is JS array
transform buffer to string in N
«buffer».toString()
debug N in VSC and Chrome
» put «debugger» in code
» run: node inspect «entry point»
» restart application with «restart» in terminal
compare dart-sass to node-sass
» dart gets new features earliest
» dart > node on cross platform
» dart installs faster than node
» dart runs slower than node
setup static assets folder in Express
app.use(express.static(«public folder path»))
set server setting in Express
app.set(«key», «value»)
create a mongodb client in N
import { MongoClient } from ‘mongodb’
MongoClient.connect(«url», «_options», (error, client) => {
client…
})
connect to a database with a mongodb client in N
const db = client.db(«database name»)
setup parsing of incoming json in Express
app.use(express.json())
access request parameters in Express
app.«http method»(‘«url»/:«param1»’, (req, res) => {
req.params.«param1»…
})
setup get route in Express
app.get(‘«url»’, (req, res) => {
…
})
setup post route in Express
app.post(‘«url»’, (req, res) => {
…
})
setup router in Express
const router = express.Router()
router. «route handler1»
router. «route handler2»
app.use(‘/«pre route»’, router)
» route handler: «http method»(‘«url»’, (req, res) => { … })
add middleware to Express server
app.use(«middleware»)
add middleware to Express route
app.«http method»(
'«url»',
«middleware»,
(req, res) => { ... }
)access query parameters in Express
app.«http method»(‘«url»’, (req, res) => {
req.query…
})
setup error handling for route in Express
app.«http method»('«url»', (req, res) => {
// handle success
}, (err, req, res, next) => {
// handle error
}uninstall package in N
npm r «package»
» also: remove, rm, un, uninstall, unlink
setup Socket.io on an Express server in N
import http from ‘http’
import express from ‘express’
import socketio from ‘socket.io’
const app = express() const server = http.createServer(app) const io = socketio(server)
server.listen(«port», «callback»)
listen for Socket.io connection in N
io.on(‘connection’, «callback»)
setup Socket.io in the client in N
≤body≥
...
≤script src="/socket.io/socket.io.js"≥≤/script≥
≤script≥
io()
≤/script≥
≤body≥send Socket.io event to »the« connected client in N
socket.emit(«event», «payload»)
listen for Socket.io events of a connection in N
socket.on(«event», «callback»)
send Socket.io event from server to »all« connected clients in N
io.emit(«event», «payload»)
send Socket.io event to »all« connected clients »except« the current ones in N
socket.broadcast.emit(«event», «payload»)
listen for when a Socket.io connection ends in N
socket.on(‘disconnect’, «callback»)
acknowledge event in Socket.io in N
» sender:
«io/socket».emit(«event», «payload», «ack callback»)
----------
» receiver:
«io/socket».on(«event», («payload», ack) => {
...
ack()
}setup Babel script without Webpack in N
» npm i -D @babel/core @babel/preset-env
» .babelrc: {
"presets": ["@babel/preset-env"]
}
» package.json > scripts:
"start": "babel-node «path to entry point»"setup GQL API server with graphql-yoga in N
import { GraphQLServer } from ‘graphql-yoga’
» import context: db, …
» import resolvers: Query, Mutation, custom types
const server = new GraphQLServer({
typeDefs: '«path to schema»',
resolvers: { «resolvers» },
context: { «context» }
})
server.start(«_options», «callback»)
what are the 5 scalar types in GQL?
» Boolean » Int » Float » String » ID
setup nodemon script with Babel in N
» package.json > scripts:
nodemon «entry point» –exec babel-node
setup plugin for Babel in N
» npm i -D «plugin»
» .babelrc: {
“plugins”: [“«plugin»”]
}
set input or return value to required in GQL schema in N
» schema.graphql:
…«value»!
what are the 4 GQL resolver arguments?
» parent: parent element
» args: client data
» ctx: universal elements like db, …
» info: query fileds/path, fragments, …
query data from GQL API
query {
«object to return» {
«_fields to return»
}
}setup create, update or delete operation in GQL schema in N
» schema.graphql:
type Mutation {
«operation»(
_id: ID!,
«_payload label»: «payload type»!
): «return type»!
}create data with GQL API
mutation {
«create function»(
id: «id»,
«payload label»: «payload»
) {
«values to return»
}
}setup input type in GQL schema in N
» schema.graphql:
input «input type» {
«field1»: «type1»,
...
}setup create, update or delete operation in GQL resolver in N
» resolvers > Mutation.js:
const Mutation = {
_async «operation»(parent, args, ctx, info) {
// create, update or delete element
return «element»
}
}delete data with GQL API
mutation {
«delete function»(id: «id») {
«values to return»
}
}update data with GQL API
mutation {
«update function»(
id: «id»,
«payload label»: «payload»
) {
«values to return»
}
}setup read operation in GQL schema in N
» schema.graphql:
type Query {
«element»(
«_query arg1»: «arg type1»,
«_query arg2»: «arg type2»
): «return type»!
}setup enum in GQL schema in N
» schema.graphql:
enum «name» {
«value1»
«value2»
...
}
» values are strings
» choose UPPERCASE values
setup server for GQL subscriptions with graphql-yoga in N
» index.js:
import { GraphQLServer, PubSub } from ‘graphql-yoga’
const pubsub = new PubSub()
const server = new GraphQLServer({
...,
context: {
pubsub
}
})
server.start(«_options», «callback»)
setup subscription in GQL schema in N
» schema.graphql:
type Subscription {
«subscription name»(
«_subscription arg»: «arg type»
): «return type»!
}setup resolver for GQL subscription in N
» resolvers > Subscription.js:
const Subscription = {
«subscription name»: {
subscribe(parent, args, { pubsub }, info) {
...
return pubsub.asyncIterator('«subscription channel»')
}
}
}publish to GQL subscription channel in N
» resolvers > Mutation.js:
const Mutation = {
«mutation function»(parent, args, { pubsub }, info) {
...
pubsub.publish('«subscription channel»', {
«subscription name»: {
«fields and payload»
}
})
}
}create hash in N
import bcrypt from ‘bcryptjs’
const hash = await bcrypt.hash(«input», «salt»)
» recommended salt: 14
create JWT in N
import jwt from ‘jsonwebtoken’
const token = jwt.sign( «input object», «secret», «_options», «_callback» )
» options: { expiresIn: ‘7d’, ‘10h’, ‘120’ } // ms
» options: { algorithm: ‘HS256’ } // is default
» callback: (err, token) => { … } // makes it async
decode JWT token in N
import jwt from ‘jsonwebtoken’
const content = jwt.decode(«token»)
verify JWT in N
import jwt from ‘jsonwebtoken’
const content = jwt.verify( «token», «secret», «_options», «_callback» )
» throws error if invalid
» options: { algorithms: [‘HS256’, ‘HS384’] }
» callback: (err, decoded) => { … } // makes it async
check hash in N
import bcrypt from ‘bcryptjs’
await bcrypt.compare(«input», «hash»)
» true or false
setup script using local environment variables in N
» npm i -D env-cmd
» package.json > scripts:
env-cmd _-f «_path to env file» «command»
» .env is default file
setup Jest test suite in N
» npm i -D jest
» tests > «suite name».test.js:
test(«test name», () => {
...
expect(«variable»).«assertion»_(«target value»)
})configure scripts to run before Jest test run in N
» package.json:
"jest": {
"globalSetup": "«path to setup file»"
"globalTeardown": "«path to teardown file»"
}setup start of db server before Jest test run in N
» global setup file:
_require(‘babel-register’)
_require(‘@babel/polyfill/noConflict’)
const server = «import db server»
module.exports = async () => {
global.«dbserver name» = await server.«start»( … )
}
» no ES6 syntax yet
» must be async function
» might need babel-register and polyfill
setup stop of db server after Jest test run in N
» global teardown file:
_require(‘babel-register’)
_require(‘@babel/polyfill/noConflict’)
module.exports = async () => {
global.«dbservername».«stop»()
}
» no ES6 syntax yet
» must be async function
» might need babel-register and polyfill
setup SASS to CSS compilation script in watch mode in N
» npm i -D node-sass
» package.json > scripts:
node-sass «input path» «output path» -w
setup SASS to CSS compilation script in N
» npm i -D node-sass
» package.json > scripts:
node-sass «input» «output»
setup CSS concatenation script in N
» npm i -D concat
» package.json > scripts:
concat -o «output» «input1» «input2» …
setup CSS autoprefixing script in N
» npm i -D autoprefixer postcss-cli
» package.json > scripts:
postcss -u autoprefixer -b ‘«browserslist»’ «input» -o «output»
» browserlist: defaults, last 2 versions, …
setup CSS compression script in N
» npm i -D node-sass
» package.json > scripts:
node-sass «input» «output» –output-style compressed
setup N scripts to run sequentially
» npm i -D npm-run-all
» package.json > scripts:
npm-run-all «script1» «script2» …
setup N scripts to run at the same time
» npm i -D npm-run-all
» package.json > scripts:
npm-run-all –parallel «script1» «script2» …
write middleware in Express in N
const «middleware» = (req, res, next) => {
…
next()
}
setup payload for query, mutation or subscription in GQL schema in N
» schema.graphql:
type «Query|Mutation|Subscription» {
«element»(
«payload label»: «payload type»
): «return type»
}access payload for query or mutation in GQL resolver in N
» resolvers > «Query|Mutation».js:
const «Query|Mutation» = {
_async «element»(parent, args, ctx, info) {
...args.«arg1»
...
}
}setup relationship in GQL schema in N
» schema.graphql:
type «custom type1» {
«field»: «custom type2»|[«custom type2»]
}
setup relationship in GQL resolver in N
» resolvers > «custom type1».js:
const «custom type1» = {
«field»(parent, args, ctx, info) {
...parent
return «custom type2»|[«custom type2»]
}
}setup custom type in GQL schema in N
» schema.graphql:
type «custom type» {
«field»: «type»
}
setup nodemon script to watch specific file extensions
» package.json > scripts:
nodemon «entry point» –ext js,«extention1»,…
use reusable field selection for GQL API
query/mutation/subscription {
«object to return» {
«_fields to return»
...«selection name»
}
}setup Apollo client in N
import { ApolloClient, InMemoryCache } from ‘@apollo/client’;
const client = new ApolloClient({
uri: '«host uri»',
_link: «_link array»,
cache: new InMemoryCache()
})
run Jest test suite in N
jest _–watch
query/mutate data with external variables from GQL API
query/mutation «operation name»(
$«variable»: «var type», ...
){
«object to return»(«arg name»: $«variable», ...) {
«_fields to return»
}
}write GQL query for Apollo client in N
import { gql } from ‘@apollo/client’
const query = gql
«GQL query»
execute GQL query in Apollo client in N
_await client.query({ query: «GQL query» })
execute GQL query with variable(s) in Apollo client in N
_await client.query({
query: «GQL query»,
variables: { «var1»: «val1» }
})
execute GQL mutation in Apollo client in N
_await client.mutate({ mutation: «GQL query» })
execute GQL mutation with variable(s) in Apollo client in N
_await client.mutate({
mutation: «GQL query»,
variables: { «var1»: «val1» }
})
execute GQL subscription in Apollo client in N
_await client.subscribe({ query: «GQL query» })
non-ES6 import of element from other file in N
const «default element alias» = require(‘./«file path»’)
const «sub element alias» = require(‘./«file path»’).«sub element»
non-ES6 export of element from file in N
module. exports = «element»
module. exports = { «element1», «element2» }
transform buffer to json in N
«buffer».toJSON()
define reusable field selection for GQL API
fragment «selection name» on «custom type» {
«_field1»
«_relation1» { }
...
}run W compilation
webpack
run W compilation in watch mode
webpack –watch
setup hot reloading for N backend server
» npm i -D clean-webpack-plugin webpack-node-externals
» webpack.config.json:
entry: entry: [‘webpack/hot/poll?1000’, «entry point»],
externals: [
nodeExternals({ allowlist: [‘webpack/hot/poll?1000’] })
],
plugins: [
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin()
]
» node entry point:
if (module.hot) {
module.hot.accept()
module.hot.dispose(() => { /* stop server */ })
}
