The tutorial demonstrates how to update a codebase to work with the latest dependency versions. The process includes fixing NestJS type errors for JWT expiration, reconfiguring Tailwind CSS, updating server actions for cookies, and implementing Material UI grid system changes.
Length 4:03
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #typescript #nestjs #tailwindcss #nextjs #material-ui #programming #refactoring #web development #debugging #coding tutorial
0:00 So on the latest versions of NestJS, you may find 0:04 a type error inside of our auth service where we're extracting 0:08 our current JWT expiration using the config service 0:12 getOrThrow method here. Now, on the latest version of MS, 0:16 we actually need to explicitly tell 0:19 MS that this value here that we're extracting from our environment 0:23 variable is a string value that MS will accept. 0:27 So in order to fix this, we're gonna go ahead and simply make 0:31 sure that we go ahead and first cast the 0:35 value from the config service getOrThrow as unknown, 0:39 and then we recast it as ms.stringvalue here. 0:43 And so this tells MS that this value here is a valid 0:46 JWT expiration value, and that should resolve the type error 0:50 that we're 0:50 finding here. The latest versions of all of our 0:53 dependencies, there's a few changes 0:54 we'll have to make to our project. The first of which is with 0:58 Tailwind. So we can initialize Tailwind the old way 1:01 that we've 1:01 seen in this project before, and everything should still work 1:05 fine. But on newer versions of Tailwind, they recommend initializing a little 1:09 bit differently. So in order to do this, well, firstly, we're gonna go 1:13 ahead and rename our PostCSS config.js to a 1:17 .mjs file. 1:19 And in here, we're gonna go ahead and reconfigure the 1:22 PostCSS. So plugins object will now 1:25 contain a string 1:28 @TailwindCSS/postCSS, and set 1:32 this to an empty object. Additionally, we're gonna go into 1:36 our global CSS inside of app, and instead of 1:40 importing Tailwind three times here, we can go ahead and simply 1:44 go ahead and use one import now and use @import, 1:47 "TailwindCSS". Next up, if we 1:51 go into our authenticated 1:55 server action, which is reaching out to our current cookies to 1:58 get the 1:59 authentication cookie, this has changed to now be a
The rest of the transcript is for members.
Sign in 