apress / modern-full-stack-development Goto Github PK

View Code? Open in Web Editor NEW

84.0 8.0 51.0 254 KB

Source code for 'Modern Full-Stack Development' by Frank Zammetti

Home Page: https://www.apress.com/9781484257371

License: Other

TypeScript 81.42% CSS 2.70% HTML 7.35% JavaScript 8.40% Dockerfile 0.13%

modern-full-stack-development's Introduction

Apress Source Code

This repository accompanies Modern Full-Stack Development by Frank Zammetti (Apress, 2020).

Download the files as a zip using the green button, or clone the repository to your machine using Git.

Releases

Release v1.0 corresponds to the code in the published book, without corrections or updates.

Contributions

See the file Contributing.md for more information on how you can contribute to this repository.

modern-full-stack-development's People

Contributors

Stargazers

Watchers

modern-full-stack-development's Issues

Error on the Add Contact worker

modern-full-stack-development/mailbag/server/src/Contacts.ts

Line 72 in 085ddc0

public addContact(inContact: IContact): Promise<IContact> {

I get an error for the add contact worker. Does anybody know what the issue might be?
I take all the steps based on the textbook and source code, but the error still persist.
You can see the error on this screenshot:
https://ibb.co/PDX2kYv

Return of getMessageBody() in IMAP.ts is not respecting the Promise

In the file: https://github.com/Apress/modern-full-stack-development/blob/master/mailbag/server/src/IMAP.ts

I think the code for the last line of getMessageBody() should be something like:

return parsed.text !== void 0 ? parsed.text : "";

instead of just

return parsed.text;

That's because we are promising a <string>, but parsed.text is a <string?>, causing warnings that we are not returning what we are promising, as the undefined possibility is not being covered.

Type 'string | undefined' is not assignable to type 'string'

modern-full-stack-development/mailbag/server/src/IMAP.ts

Line 189 in 085ddc0

return parsed.text;

Screenshot:
https://ibb.co/T8GmVLF

Error on delete contact worker

modern-full-stack-development/mailbag/server/src/Contacts.ts

Line 100 in 085ddc0

public deleteContact(inID: string): Promise<string> {

Screenshot:
https://ibb.co/kchtS1z

Page constantly refreshing

For the mailbag assignment, I cloned the source code and ran the server code as well as the client code. For the client code, it seems to load in the mailboxes, load in the contacts, and after the contacts are loaded in, the window is refreshed and this cycle just continues. The window is loaded over and over again after the contacts are loaded in. If I were to comment out the contact get axios request in the client folder then the page won't have that issue but then it's an issue of being able to get the clients.

Client package.json should include node version 16.14.2

Newer versions of node will cause a loader-runner error i.e. 18.1.0 in the mailbag client:

Error: callback(): The callback was already called.

I think the node version should be specified in the package.json file in the client under dependencies since there's no README with dependencies listed for the client:

"dependencies": {
  ...
  "node": "16.14.2",
  ...
}

16.14.2 is LTS.

Not sure if it's needed, but I ran npm install [email protected] --save-exact before putting it in package.json as well.

I can do a PR if you want and it checks out.

Docker build gets stuck web running: 'RUN npx webpack' — doesn't move to next step in dockerfile

I am trying to build my project into a container for Docker with the following dockerfile:

FROM node:10
WORKDIR /usr/app/battlejong
COPY client ./client
COPY BattleJongServer ./BattleJongServer
WORKDIR /usr/app/battlejong/client
RUN npm install
RUN npx webpack
WORKDIR /usr/app/battlejong/BattleJongServer
RUN npm install
RUN npx tsc
EXPOSE 80
CMD ["node","./dist/main.js"]

The docker build runs and completes the webpack step but does not continue onto the next step of changing the directory.

Here is the output here:

Step 1/12 : FROM node:10
 ---> 1e318dc8ae6f
Step 2/12 : WORKDIR /usr/app/battlejong
 ---> Using cache
 ---> c004d781a932
Step 3/12 : COPY client ./client
 ---> 955204bda599
Step 4/12 : COPY BattleJongServer ./BattleJongServer
 ---> 6c692d4c4bad
Step 5/12 : WORKDIR /usr/app/battlejong/client
 ---> Running in 662e29660e6c
Removing intermediate container 662e29660e6c
 ---> 3ce3c61bf582
Step 6/12 : RUN npm install
 ---> Running in 808724a44e9b
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 678 packages from 430 contributors and audited 684 packages in 12.37s

29 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Removing intermediate container 808724a44e9b
 ---> 0dc996f51895
Step 7/12 : RUN npx webpack
 ---> Running in bd591d5fc8f8

webpack is watching the files…

ℹ ｢atl｣: Using [email protected] from typescript
ℹ ｢atl｣: Using tsconfig.json from /usr/app/battlejong/client/tsconfig.json
ℹ ｢atl｣: Checking started in a separate process...
ℹ ｢atl｣: Time: 1712ms
Hash: 99e556545c8a1a30d23c
Version: webpack 4.44.1
Time: 9256ms
Built at: 09/15/2020 12:10:54 AM
       Asset       Size  Chunks                          Chunk Names
./index.html  241 bytes          [emitted]               
     main.js    276 KiB       0  [emitted]        [big]  main
 main.js.map    508 KiB       0  [emitted] [dev]         main
Entrypoint main [big] = main.js main.js.map
 [4] ./src/code/main.tsx 550 bytes {0} [built]
 [7] ./src/css/main.css 524 bytes {0} [built]
 [8] ./node_modules/css-loader/dist/cjs.js!./src/css/main.css 3.39 KiB {0} [built]
[17] ./src/img/tile101.png 5.59 KiB {0} [built]
[18] ./src/img/tile102.png 3.15 KiB {0} [built]
[19] ./src/img/tile103.png 2.58 KiB {0} [built]
[20] ./src/img/tile104.png 1.14 KiB {0} [built]
[21] ./src/img/tile105.png 2.39 KiB {0} [built]
[22] ./src/img/tile106.png 2.1 KiB {0} [built]
[23] ./src/img/tile107.png 3.49 KiB {0} [built]
[24] ./src/img/tile108.png 2.53 KiB {0} [built]
[25] ./src/img/tile109.png 2.53 KiB {0} [built]
[26] ./src/img/tile110.png 2.29 KiB {0} [built]
[27] ./src/img/tile111.png 1.58 KiB {0} [built]
[59] ./src/code/state.tsx 12.9 KiB {0} [built]
    + 46 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 287 bytes {0} [built]

And then the build doesn't proceed from here onto line/step 8 in the dockerfile and will sit here until I force stop the build.

Any help would be appreciated :)

Expected union of types in Contacts.ts - listContacts()

In Contacts.ts, in the body of the listContacts() function, line 51 has:

(inError: Error, inDocs: IContact[]) => { ...

This gives me an error, because this.db.find seems to expect the inError to be a union of Error and null.

For the error to disappear, I had to change my code to this:

(inError: Error | null, inDocs: IContact[]) => { ...

Unable to connect to server? How do you setup SMTP and IMAP? Gmail?

I think it should change to: Promise<string | undefined>

modern-full-stack-development/mailbag/server/src/IMAP.ts

Line 172 in 270a829

public async getMessageBody(inCallOptions: ICallOptions): Promise<string> {