Modern Full-Stack Development

Index
A
addContact() method, 
243
addContactToList() state mutator  
method, 
237
addMailboxToList() method, 
235
AJAX, 
238
alert() message, 
89,
 
91,
 
157
anyMovesLeft() function, 
340
app.delete() method, 
184
Async_hooks module, 
40
Axios, 
240
B
BattleJong
BaseLayout component, 
313–316
building, 
305,
 
306
ControlArea component
defining, 
316
gameState property, 
318,
 
319
React.Fragment, 
316,
 
317
scores property, 
317,
 
318
index.html, 
312
libraries, adding, 
311
Mahjong Solitaire, 
284
main.tsx file, 
313
node modules, adding, 
289
PlayerBoard component, 
319,
 
320
noImplicitAny check, 
321,
 
322
ReactElement, 
322
project, setting up, 
307
TypeScript config file, 
308,
 
309
Webpack, 
309,
 
310
render process
CSSProperties, 
324
highlightTile style, 
324,
 
325
onClick handler, 
325
xOffset and yOffset, 
323
requirements, 
285,
 
306,
 
307
server, socketComm.ts source file
sending messages, to server, 
329
sent messages, 
327,
 
329
WebSockets, 
326,
 
327
setting up project, 
286
source file, 
311
state.ts
anyMovesLeft() function, 
340–344
canTileBeSelected (), 
336–339
IScores interface, 
330
message handler methods, 
334
properties, 
332,
 
333
socketComm, 
330
tileClick(), 
336
TypeScript-type assertions, 
331,
 
332
tsconfig.json file, 
287–289
types, adding, 
311
Bookmark component, 
55

---

368
C
canTileBeSelected() function, 
336,
 
341
clearMessages() method, 
266
client.connect() method, 
199
collapseToBlackHole(), 
116
componentDidMount() method, 
84
componentDidUpdate() method, 
85
contacts.ts file
addContact(), 
211
deleteContact(), 
211,
 
212
listContacts(), 
210
NeDB, 
207,
 
208
NoSQL, 
204–207
server
adding contacts, 
243
deleting contacts, 
244
listing contacts, 
243
Contacts.Worker.deleteContact()  
method, 
272
Containers/Containerization
function, 
348
hypervisors, 
347
VM, 
347,
 
348
COPY commands, 
358
createServer() method, 
18,
 
233,
 
326
Cross-Origin Resource Sharing  
(CORS), 
179
D, E
dedup command, 
27
deleteContact() method, 
211,
 
272,
 
280
deleteMessage() method, 
249,
 
279
descriptionValidator() function, 
83
devServer property, 
156
Dist directory, 
163
Docker
commands
attaching to container, 
356
container logs, view, 
356
containers and image, remove, 
355
listing containers, 
354
listing images, 
353
pulling images, 
355
searching for images, 
355
starting and stopping  
containers, 
354
components, 
349,
 
350
creating own image
CMD command, 
359
COPY commands, 
358
Dockerfile, 
357,
 
358
dockernode, 
357,
 
360,
 
361
WORKDIR command, 
358
deploying Hub, 
362,
 
363
installing, 
350,
 
351
MailBag and BattleJong, wrapping up, 
363,
 
364
F
fieldChangeHandler() method, 
278
filter() method, 
272
fs.copyFileSync() method, 
30
fs.mkdir() method, 
31
fs.rmdir() method, 
31
fs.unlink() method, 
31
G
getDerivedStateFromProps()  
method, 
84,
 
85
getMessages() method, 
265,
 
266
getSnapshotBeforeUpdate() method, 
85
greet() function, 
120
Index

---

369
H
hideShowPleaseWait() state mutator 
method, 
255
http.createServer() method, 
32
http.request() method, 
33,
 
34
I
IMAP.Worker.getMessageBody()  
method, 
274
IMAP.ts file
Contacts.ts file, 
198
deleteMessages() method, 
204
emailjs-imap-client module, 
195,
 
196
getMessageBody() method, 
203
import, 
196
listMessages() method, 
201,
 
202
logLevel property, 
199
Worker.listMailboxes(), 
199–201
server
deleting message, 
246
getting body message, 
246
IMessage interface, 
244
listing mail, 
245
listing message, 
245
Immediately Invoked Function 
Expressions (IIFEs), 
142
INinja interface, 
124
InputProps prop, 
269
Internet Engineering Task Force (IETF) 
standard, 
291
J, K
JavaScript
APIs, 
4
asynchronous and event-driven 
model, 
2
HTTP requests, 
3
node installation, 
5,
 
6
single-threaded, 
2
source file execution, 
7,
 
8
join() method, 
179
L
listContacts() method, 
210
listen() method, 
32
listMailboxes() method, 
181,
 
245
listMessages() method, 
245
logConstructorFactory() function, 
134
logConstructor() function, 
132
M
Mailbag
AJAx
Axios, 
240–242
definition, 
238
XMLHttpRequest object, 
238–240
client, 
219–222
client project, setting up
index.html, 
230
npm init, 
224
performance attribute, 
228
src directory, 
228,
 
229
TypeScript, 
226,
 
227
Webpack, 
226
configuration, 
237
contacts.ts (see contacts.ts file)
full-stack development, 
163
IMAP (see IMAP.ts file)
main.ts (see main.ts file)
project, set up, 
163
adding dependencies, 
166,
 
167
adding modules, 
165
Index

---

370
development environment,  
168,
 
169
source files, 
164,
 
165
redux, main.tsx
BaseLayout component, 
231–233
normalize.css, 
231
state mutator methods, 
234,
  
236,
 
237
requirements, 
223,
 
224
scope, 
162
ServerInfo.ts file, 
187,
 
189
SMTP.ts file, 
189,
 
190
generics, 
190–193
nodemailer module, 
190
sendMessage() method, 
193–195
testing
curl, 
213,
 
214
holistic, 
212
JSON, 
214
optional tooling, 
215,
 
216
webmail system, 
161
main.ts file
Content-Type header, 
180
CORS, 
179,
 
180
data format, 
173,
 
174
express, 
176,
 
177
HTTP methods, 
172,
 
173
imports, 
178
response status code, 
175,
 
176
REST, 
170
RESTful endpoints, 
178,
 
179
URL, 
171
Material-UI component library
BaseLayout
Dialog, 
253–255
MessageList component, 
257
MessageView component, 
258
Toolbar component, 
256
ContactList. tsx file, 
266,
 
268
ContactView component
deleteContact(), 
272
InputProps prop, 
269
onChange handler, 
269
setState(), 
271
TextField, 
268,
 
270
CSS Grid, 
249,
 
251,
 
253
functional syntax, 
260
MailboxList.tsx file, 
264–266
Material Design, 
248,
 
249
MessageList.tsx file, 
273,
 
274
MessageView
InputBase component, 
275,
 
276
onClick prop, 
278–280
Tollbar.tsx file, 
261–263
WelcomeView, 
280
module property, 
155
N
Node
modules, 
40–41
file system (fs), 
30,
 
31
HTTP and HTTPS, 
32,
 
33
OS, 
34
path, 
35,
 
36
process access, 
36
query string, 
37–38
URL, 
38
utilities, 
39
node_modules directory, 
159
Node Package Manager (NPM)
commands, 
10,
 
11
auditing package security, 
26
Mailbag (cont.)
Index

---

371
deduplication and pruning, 
26,
 
27
packages, searching, 
27
packages, updating, 
28
publishing/unpublishing  
packages, 
28,
 
29
dependencies, add, 
13,
 
14
node-modules, 
9
package.json file, 
21–25
project initializing, 
11–13
semantic versioning, 
14,
 
15
web server, 
16,
 
17
npx command, 
69
O
onClick event handler function, 
58
on() method, 
292
P
path.join() method, 
35,
 
179
plugins property, 
155
Polyfill, 
68
PropTypes, 
82
Q
querystring.escape() method, 
38
querystring.parse() method, 
37
querystring.stringify() method, 
38
querystring.unescape() method, 
38
R
React
components
action, 
49,
 
50
HTML document, 
48
lifecycle events, 
84,
 
85
memory state, 
57–59
props, 
55,
 
56
React.createElement(), 
51
ReactDOM.render(), 
52
render(), 
54,
 
55
style, 
60–62
definition, 
43
FaxJs, 
44,
 
45
JSX
compile, 
71,
 
72
main.js file, 
73,
 
75,
 
76
MaterialButton component,  
66,
 
67
npx command, 
69
polyfill, 
68
ReactDOM.render(), 
74
transpile, 
69–71
Props
defaultProps property, 
78,
 
79
MaterialButton component, 
77
PropTypes, 
80,
 
82,
 
83
simplicity, 
62,
 
63
sizeable corporate backing, 
63
virtual DOM, 
47
XHP, 
44
React.createElement() method,  
51,
 
55,
 
66
ReactDOM.render() method, 
52
reduce() method, 
107
remove() method, 
212
render() method, 
54,
 
62,
 
83,
 
268,
 
316
REpresentational State Transfer  
(REST), 
170
require.ensure() statements, 
148
require() function, 
17,
 
40
Index

---

372
REST Endpoint
add contact, 
186
delete contact, 
187
deleting messages, 
184
getting messages, 
183
list contacts, 
185
list mailboxes, 
181,
 
182
list messages, 
182
sending messages, 
184
S
sayHi() function, 
89,
 
90
Secure Socket Layer (SSL), 
41
sendMessage() state method, 
278
send() method, 
293,
 
329
setState() method, 
58,
 
234
shouldComponentUpdate() method, 
85
showHidePleaseWait() method, 
234
shuffle() function, 
300–302,
 
304
Spaceship function, 
132
splitChunks optimization, 
155
state.fieldChangeHandler() method, 
277
string_decoder module, 
41
super() reference, 
111
T
Test property, 
145
tileClick() method, 
325,
 
336
Transport Layer Security (TLS), 
41
transport.sendmail() method, 
194
Tunnel vision approach, 
163
TypeScript, 
87,
 
157–159
advantages, 
88
any type, 
95
arrays, 
95
boolean type, 
95
classes
getters/accessor methods, 
113,
 
115
inheritance, 
111–113
member visibility, 
110
properties, 
109
setters/mutator methods, 
113,
 
115
code execution, 
89
custom type aliases, 
101,
 
102
decorators
factory, 
134,
 
135
logConstructor (), 
132
Spaceship function, 
132
types, 
133
destructuring, 
107,
 
108
development-time construct, 
88
enums, 
97–98
ES6 feature
arrow functions, 
104,
 
105
block scope, 
103
default parameter, 
105
let and const keywords, 
103
template literals, 
105
flag type-related errors, 
88
function type, 
98
humanName argument, 
90
index.html, 
91
init comment, 
93
installation, 
91
interfaces
argument/object, 
120–122
classes, 
123
INinja, 
124
methods, 
122,
 
123
JavaScript, 
88
modules, 
129–131
namespaces, 
125–128
null, void, and undefined number  
type, 
94
Index

---

373
object, 
99
source maps, 
137,
 
139,
 
140
spread operator, 
106,
 
107
string, 
94
third-party libraries, 
135,
 
136
tsconfig.json file, 
92
tuples, 
96–97
union type, 
102,
 
103
U, V
updateContact() function, 
216
url.parse() method, 
37,
 
38
Use property, 
145
W, X, Y
Webpack
alert(10) message, 
152
browser compatibility, 
148
bundle, 
142–143
configuration, 
153–156
dependency graph, 
144
entry point, 
144
initialization process, 
151
loaders, 
145
main.js file, 
152
modes, 
147
modules, 
141,
 
156,
 
157
NPM package.json file, 
152
src directory, 
149
webpack-cli module, 
149
WebSocket
definition, 
291
express server, 
294
JavaScript API, 
292
protocol, 
291
server and game design
BattleJong work, 
294,
 
295
connection event, 
296
layout construct, 
300,
 
301
message “done”, 
298
message “match”, 
297
players object, 
299,
 
300
shuffle(), 
302,
 
303
timeout(), 
293
WORKDIR command, 
358
Worker.listContacts() method, 
243
Z
zlib module, 
42
Index

---