Restful API with NodeJS, Express & Typescript [2020]

[@TheNerdyCanuck]

Hey guys! Thanks for watching. Just a small FYI: I missed an important part of logging, in the current example, the logging on the server will only log the req before the response is returned, so I fixed it in the repo to listen for the response to end. Please take a look at: github.com/joeythelantern/Typescript-Quickstart-Projects/blob/main/typescript-mysql-quickstart/source/server.ts

[@anselmleo4146]

Nice.. I was wondering why you didn't go with Winston or other loggers out there. Is this the best approach with Typescript?

[@TheNerdyCanuck]

@@anselmleo4146 Nope, just an easy way to do it on your own.

[@TheNerdyCanuck]

Hola, también estoy usando un traductor. Muchas gracias, estoy feliz de que te gusten mis videos.

[@ProximityGM]

Why do you want the request to log after the response is returned? I don't see how this is a mistake. Can you please explain?

[@brennonwilliams9181]

Seriously, one of the best tutorial videos I have seen in a very long time. Your delivery of the content is perfect because you're not showing things that make you look smart and nobody needs or the context is a distraction - you're showing exactly the content needed, with a great cadence, enough detail without getting stuck in the weeds, and showing a logical path to constructing the solution. Well done sir.

[@janlestermallari]

This is so far the *EASIEST* and *STRAIGHTFORWARD* TS setup I've ever watched. Thanks for this short tutorial.

[@TheNerdyCanuck]

No problem. I goal is always to be thorough and as accurate as possible.

[@johnnydriesen7575]

This channel is far underrated. Thanks for this great vid, @Canuck.

[@TheNerdyCanuck]

No problem! It's not even that it's underrated, I've just been away from KZbin for a long time and couldnt concentrate on it before. Hopefully my releasing of a video once or twice a week from here on out brings people back :)

[@IkraamDev]

First time I’ve seen someone do logging like this in a tutorial.

[@TheNerdyCanuck]

Is that a good thing?

[@IkraamDev]

@@TheNerdyCanuck Yeah, it's something different.

[@NikhilAdiga]

Yes! Usually people use libraries like Morgan. This is something different.

[@PovilasCiplis]

very efficient, no bs, straight to the point. loving this. see you at 100k subscribers very soon.

[@TheNerdyCanuck]

I hope so

[@derik4622]

Had such a fun time with this! Really great content!

[@walid7189]

This is one of the best tutorials I have ever come across. Thanks.

[@TheNerdyCanuck]

No problem! Like and share my friend :)

[@dahutt]

Thank you for this! I've been beating my head at the wall for the past week trying to learn how to set something like this up this and this finally did it.

[@TheNerdyCanuck]

I got u!

[@sivak7183]

This is the best explanation I have ever found, Keep going well done.

[@AnsiString]

Just awesome! That was exactly that, I was looking for. Thousand thanks to you. Greetings from Germany.

[@mishasawangwan6652]

first: thank you for taking the time to share your knowledge. it’s clear from the comments this video is helpful for many just getting started. and that’s great but .. the video title is misleading: there’s basically no usage of typescript in this video. yes there are maybe 2 examples where you use type hints in some function signatures but aside from that, this is just vanilla javascript.

[@TheNerdyCanuck]

That's because for a basic example like this, there isn't much difference

[@Jason-yr6fy]

Do you have adjusted or know a template that uses more typescript? Would be interesting to see :)

[@ulana1189]

Clear, nice and informative. You should make proper video tutorial with React+Redux, Node+Express+Mongo with typescript. I am sure it would be one of the best tuts. Looking forward 😎

[@TheNerdyCanuck]

I'm actually doing on with mongo right now, should be out within a few days 🤓

[@ulana1189]

@@TheNerdyCanuck cool👍👍👍

[@TheNerdyCanuck]

@@ulana1189 It's up, let me know what you think!

[@djmous5367]

Well organized and to the point. How can I have VSCode stop at breakpoints? extensions needed? launch.json configuration? please specify or point me to an actual example. Thank you.

[@phamvanhan7037]

The best video I could found! Thank you.

[@madhand1472]

great video! could you explain soft delete with node js

[@RushabhWadkar]

This was so great. Perfect! Exactly what I needed.

[@TheNerdyCanuck]

:)

[@juanchox0929]

What an excellent explanation!! Thanks for sharing your knowledge, I'll put it on practice right now

[@supa1009]

Bro you are a legend, like really thank you for your help!

[@KuRoiBatusai]

Hello, looking for a node + typescript tutorial, I found your video, by the way TOO good, I am a Spanish language, so if something is a little strange it is because of the translator ajja, this time I wanted to write more than necessary, because I see that you Programming logic is similar to mine, that's why I loved your video a lot and I always wondered can I do this, how is it done, and you just leave your log for future use for monitoring (DevOps), etc. Then I see the github and you have the same thing in mongoose, I learned more things by watching your video and you earned a subscriber, continue like this, good material and now I'm watching all the videos, thanks for your hard work. By the will it was that he used a translator. Greetings from Chile

[@KrisFoster1]

Great video, thank you! Any reason why you don't use a popular middleware logging package like morgan?

[@TheNerdyCanuck]

You can totally use any logger you want! I prefer to do simple things myself to not bloat my libraries, but a logging library wouldn't really bloat anything. It's just personal preference on small projects :)

[@tamarperetz9641]

Thank you so much! really informative and helpful

[@SuperZartok]

Thanks a lot for this tutorial

[@leonardo.cardoso]

really good tutorial!

do you have a continuation of this tutorial on how to store stuff on mongo or something?

[@TheNerdyCanuck]

Yes, if you go to my recent uploads, I have a video similar to this about mongo.

@@TheNerdyCanuck Thanks

[@giovannipizzato6888]

Dude you are awesome, thanks!

[@TheNerdyCanuck]

no you are!

[@ShinYo627]

Can you elaborate the purpose of logging functions from /source/logging bit more please? I get that they are reusable functions that are supposedly used for loggings when having different situations like logging infos inside error handlers or just infos on every request.... (hope I'm getting right so far here) . Then, how can you use the debug function from logging.ts in future? I'm just asking because it's just fascinating to find some different working method/pattern than I'm used to.

[@TheNerdyCanuck]

I use logging like this as it's lightweight and I'm just interesting in console logging, however you could expand those functions for sure

[@SpencerDavis2000]

great tutorial thanks

[@TheNerdyCanuck]

No problem!

[@isidme]

Awesome tutorial, thanks.

[@jotube6204]

Hey Nerdy Canuck, your tutorials a awesome. How can I contact you for further payed support? Greetings Jo

[@TheNerdyCanuck]

How can I help you? What kind of support do you need.

[@aleksandarhristov2918]

Great tutorial. Much appreciated!

[@TheNerdyCanuck]

No problemo!

[@manthanpatel779]

Love this Tutorial

[@prakharkapoor2572]

how i deploy build folder to heroku or somewhere else?pls make a video on it

[@TheNerdyCanuck]

I have made a video for you

[@rushabhmehta9458]

Amazing video, thanks - I'll admit I did a double take at const router = express(); -> much more used to people doing app = express();

[@TheNerdyCanuck]

Yeah me too! Even when I name it router sometimes I do the same thing haha!

[@AnkurJhavery]

My node installation never gives a summary after installing packages like shown in the video: body-parser@1.19.0 + express@4.17.1; how do I get this?

[@TheNerdyCanuck]

Do you want specific versions or more console output?

[@Nico-zl8cf]

great tutorial, thank you!

[@TheNerdyCanuck]

no problem :) .. Any other tutorials you would like to see?

[@ashiqsultanmohamed9765]

Can I know why you are not using a pre build npm package for logging? like Morgan

[@TheNerdyCanuck]

Just personal preference, you can use any logging you want

[@CalumNoade]

So helpful, thank you!

[@donmikele07]

Recommendations: /** Packages, configs, utils */ import express from 'express' import logging from './config/logging' import config from './config/config' /** Import controllers */ import errorController from './controllers/errorController' /** Types */ import { Application, Request, Response, NextFunction } from 'express' /** Constants */ const NAMESPACE: string = 'Server' const app: Application = express() const PORT: number | string = config.server.port /** Logging the request */ app.use((req: Request, res: Response, next: NextFunction) => { logging.logging(NAMESPACE, req, res) res.on('finish', () => { logging.logging(NAMESPACE, req, res, true) }) next() }) /** Parse the request */ app.use(express.urlencoded({ extended: false })); app.use(express.json()) /** Routes */ /** Error handling */ app.use(errorController.get404); app.listen(PORT, () => console.log(`Server running on the port ${PORT}`)) const NAMESPACE: string = 'logging' const logging = ( namespace: string, req: Request, res: Response, status: boolean = false, logType: string = 'INFO', object?: any ): void => { const logInfo = lagData(namespace, req, res, status, logType) ..... }

[@princekelsey2931]

love this. Thanks

[@TheNerdyCanuck]

Thank you! Let me know a topic you'd like me to cover in the future!

[@IkraamDev]

Would you keep the logging in production?

[@TheNerdyCanuck]

In production, I would log to a file using a log library that has some sort of log rotation.

[@spottedZebra07]

Hi, what is the resolution of your monitor? Video looks crisp on mine at 1440p

[@TheNerdyCanuck]

I do my videos in 2K (1440p)

[@d-one-and-only]

Just wondering why would you split up the controller and the rouites into two separate files? Would it have not been a bit more unified if the 'controller' would include the router and export the router?

[@TheNerdyCanuck]

When API's get large it's better to have things separated as when you scale up it can get chaotic in the code. That's my personal opinion anyways, I like to compartmentalize things.

[@usmanmughal5916]

Hey use typegoose with typegraphql

[@mehmetaltinsoy525]

Nice video.Thanks.

[@TheNerdyCanuck]

No problem! Please like and share :)

[@СаидТашманов]

Спасибо!

[@TheNamesJT]

This timestamp section is out of my scope of understanding what hes doing 10:50 do you have a video teaching headers, responce and request? like the rules of the api commented section would have never of known to do that. Even tutorials teaching restapi don't include the header rules. Update: Alright 18:36 can't seem to run server.ts it says my logging.info isn't a function on line 50 also added a .env file and added those 2 variables in it SERVER_PORT - SERVER_HOSTNAME and then deleted the config.ts script and just added process.env.SERVER_HOSTNAME and the other one to the functions that was using the config because for some reason was getting undefined for my env's so that fixed those error but now my logging functions aren't being recognized as functions line 50 even though everything is spelt right and did exactly what you did at 18:35

[@TheNerdyCanuck]

I find that if I'm having issues with ENV vars I just hard code them first in the config (without using dotenv) to make sure they are working properly first. Once I get the API running, then I would go back and try and fix em.

[@TheCstriker]

Also, maybe I'm wrong (as I'm not a backend developer but trying to learn), but shouldn't next be called on the sampleHealthCheck controller function?

[@TheNerdyCanuck]

The reason we don't call next is because that function is the last stop before we return a response to the user. Once you return a response, the next function has nothing to pass the request to.

[@TheCstriker]

@@TheNerdyCanuck so that means only middleware functions should call next in order to cascade into each other right? And if that’s true, can’t we just don’t declare that parameter and live with req and res only?

[@TheNerdyCanuck]

@@TheCstriker Correct. Next is used if you need to continue with the request. Technically you could not declare 'next' on the function, but I like to put them in because I think it's good coding practice to always know the parameters available to you even if you are not using them. :)

[@newstuff0629]

design code so great men, thanks!

[@johnkarippery9919]

why i get this error after npm run build > api@1.0.0 build > rm -rf build/ && prettier --write source/ && tsc 'rm' is not recognized as an internal or external command, operable program or batch file.

[@TheNerdyCanuck]

Thats because you aren't running it on a compatable terminal. rm -rf is meant for bash. If you are using powershell or something like that, you have to change it to that terminals command

[@aram5642]

I find coding to be not as much challenge as getting eslint to work in vscode the way I want. What a nightmare!

[@josuequinteros3789]

thanks, so time booster

[@TheNerdyCanuck]

No problem! If you have any requests let me know :)

[@spaghettispaghetto]

great video

[@TheNerdyCanuck]

Thanks. Any specific topic you want covered in the future?

[@hiepnguyen1774]

amazing, good job (y)

[@TheNerdyCanuck]

No problem! If you have any requests let me know :)

[@tauseefanwardo]

why do your req, res and next not asking for type, as we are developing in typescript in the server.ts file?

[@TheNerdyCanuck]

When using a router, express automatically injects them / knows the types. When you define it separately, then you must define them like in the controller

[@tauseefanwardo]

@@TheNerdyCanuck Good Stuff! Thanks!

[@nect3276]

can someone tell me why i get always an empty json back

[@TheNerdyCanuck]

What does your controller function look like?

[@touhidulshawan96]

How to logout user from this implementation?

[@TheNerdyCanuck]

No need for this implementation

[@zainjahangir296]

hi im facing an error when i try to run the server Unknown file extension ".ts"

[@TheNerdyCanuck]

What command are you using

[@tristheflash6928]

this is the frist i try with node js and express js , i feel config really complex with me :(

[@TheNerdyCanuck]

What can I do to help?

[@roshanchauhan2057]

Getting error while build the app "Error: Cannot find module 'express'

[@TheNerdyCanuck]

What folder are you trying to run from? Did you import at the top?

[@roshanchauhan2057]

@@TheNerdyCanuck I run this folder and command nodemon source/server.ts

[@TheNerdyCanuck]

@@roshanchauhan2057 perhaps you forgot the type definitions?

[@sourabhvaishnav8235]

app.use(cors()); could have shorten the video by a minute.

[@TheNerdyCanuck]

Probably

[@siphenathindabazonke8895]

why is it complaining about import statement outside a module and pointing to the HTTP import?

[@TheNerdyCanuck]

Where is the error in your code (paste it here)

[@dharmarajr24]

Ts-node 😭

[@TheNerdyCanuck]

Yeah I've had my issues with it as well haha

[@dharmarajr24]

@@TheNerdyCanuck Finally managed to run my node server. The issue was 'tsc src/index.ts' wasn't running.. but only 'tsc' did. Maybe specifying filename ignores tsconfig

[@TheNerdyCanuck]

@@dharmarajr24 you mean in your package.json file? Yeah if index is in there it'll fail 🤦

[@IPhonixI]

npm run build > api@1.0.0 build D:\Projects\Routin\typscript-express-nodejs-quickstart > rm -rf build && prettier --write source/ && tsc 'rm' is not recognized as an internal or external command, operable program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! api@1.0.0 build: `rm -rf build && prettier --write source/ && tsc` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the api@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\MyCroft\AppData\Roaming pm-cache\_logs\2020-12-12T19_40_12_114Z-debug.log

[@TheNerdyCanuck]

What shell are you using?

[@IPhonixI]

@@TheNerdyCanuck VSCode Powershell

[@IPhonixI]

@@TheNerdyCanuck i tested on git shell too

[@IPhonixI]

$ npm run build > api@1.0.0 build D:\Projects\Routin\typscript-express-nodejs-quickstart > rm -rf build && prettier --write source/ && tsc source\config\config.ts 307ms source\config\logging.ts 62ms source\controllers\sample.ts 23ms source outes\sample.ts 7ms source\server.ts 50ms Version 1.0.3.0 Syntax: tsc [options] [file ..] Examples: tsc hello.ts tsc --out foo.js foo.ts tsc @args.txt Options: --codepage NUMBER Specify the codepage to use when opening source files. -d, --declaration Generates corresponding .d.ts file. -h, --help Print this message. --mapRoot LOCATION Specifies the location where debugger should locate map files instead of generated locations. -m KIND, --module KIND Specify module code generation: 'commonjs' or 'amd' --noImplicitAny Warn on expressions and declarations with an implied 'any' type. --out FILE Concatenate and emit output to single file. --outDir DIRECTORY Redirect output structure to the directory. --removeComments Do not emit comments to output. --sourcemap Generates corresponding .map file. --sourceRoot LOCATION Specifies the location where debugger should locate TypeScript files instead of source locations. -t VERSION, --target VERSION Specify ECMAScript target version: 'ES3' (default), or 'ES5' -v, --version Print the compiler's version: 1.0.3.0 @ Insert command line options and files from a file.

[@IPhonixI]

it could not create build folder