I have been updating a react app that I 'inherited' and decided to use vite, vitest and eslint. I read through countless articles, all saying different things, all configuring their apps slightly differently. Then I found this video .... a presenter that speaks clearly, presents the content at a comfortable pace to follow along, doesn't rush or skip over important bits. One of the best coding tutorials I have come across. Thanks to this video, i was easily able to re-configure the app. Great job.
Thank you CJ for the super helpful video. If someone get error when accessing `toHaveTextContent` when writing tests add `import '@testing-library/jest-dom/vitest' ` in setupTest.ts file
8:32 to 8:37 is charming. I've seen this whole video 3 times now. It's really helped me get a firm sense of what eslint actually is and how to get a good ts environment. This is one of the best tutorials I've seen in a long time!
Now that was a good tutorial! No point in excusing yourself for setting up tests the way you did. It's exactly what one would need to get started. I'd also add that one shouldn't get too obsessed with the designations of test types, you'll need those terms to keep some structure in your zoo of tests, eventually. Primarily, the set of all tests serves as cleverly laid out tripwires that keep us informed about unintentional changes, which helps our(future)selfes and anyone else getting on the project to make changes confidently.
Long time angular dev here. Was looking for a good tutorial on how to set up a real react project that I would actually use to build a professional (linted/formatted/tested) project from. This is that tutorial. A-ma-zing!!! Thank you so much!
This video was very helpful for me. And there were no hiccups. I was able to code properly without any problems or weird bugs getting in my way. Thank you very much!
I have set up my own boilerplate in the past using also vite and some linting packages. But this video is complete that it includes test packages for testing. Love it.
This was by far one of the most amazing videos I have ever seen. Setting up ESLint has been so foreign and walking through a good set up is much appreciated. I will say I had a lot of trouble configuring ESLint with Prettier This was because I had Prettier Extension installed as well as ESLint. I followed your steps but something was conflicting. I ended up turning off my Prettier Extension. Come to find out my formatting was not working and my prettier config file was not being recognized. I really do not know what. Everything worked when I added the prettier rules from my config file into my eslint config file, which according to docs, overrides prettier config file. So I ended up removing prettier config file, extended the prettier recommended as the video shown and any rules I did not like from the default linting rules for prettier formatting I added inside the prettier rules in the eslint file and everything worked as expected. For example JSX attributes would have double quotes fixed on save and js would allow single quotes. I know this was long but hope you read it and provide any insight you might have. Thnks again for the video
Hey CJ, we don't need Auto Rename Tag extension anymore! The setting is Enable Linked Editing. Same with Bracket Pair Colorizer, the setting is Bracket Pair Colorization. Cheers!
thank you for this video, really appreciate you taking the time to walk through everything! I'm working through The Odin Project and am currently on the React testing lessons. They teach you how to use create-react-app to build applications (which has Jest and the react testing library configured out of the box), but I much prefer Vite. This video includes everything that I need to know to still follow the curriculum despite the differences in tech used.
This video was extremely helpful to me. Thank you for the great content man, you covered a lot of stuff and explained it all in a way that it was easy to understand!
nice! actually I came here to check my eslint config, but I'm vitesting now :D . I've never used testing libraries before, but man I'm hours just looking at dom checking accesibility and stuff. Thanks!! you improved my workflow :)
If anyone runs into an error (related to expect.extend(matchers);) in your jest setup upon running a test, change your matchers import to "import * as matchers from '@testing-library/jest-dom/matchers';"
I like almost everything about this but I feel like the WrappedApp thing is not efficient or necessary. Otherwise BIG PROPS to you for putting this all together. I'm integrating much of this into my own boilerplate setup. 👍👍
You can definitely use eslint and prettier with next.js, but not vite (next.js uses swc under the hood - swc.rs/). You should also be able to use vitest and test-library with next.js
Ohh so the public is like a place for images, videos audio etc… so that when when you build your files they are safe. If you were to put images in the assets folder they would get deleted every time during build time… I deleted that public folder… wonder if there is way to just ignore folders or files… in your assets folder so it doesn’t get deleted..
Personally not a huge fan of Prettier. Quite a few of the opinions in it don't match my preferred eslint configs, so format on save always ends up making eslint complain if I use Prettier, especially for stuff like arrow functions or ternaries (when to line break, place ? and : at start or end of line, use or don't use extra indent when nested, etc.). For that reason I've been using HookyQR's Beautify, but it hasn't been updated in over 3 years (so I've largely just been using the built-in formatter, since vscode 1.63.2 in Nov 2021 with the multi-language syntax) - I really wish there was a beautify/prettier-type of extension that just used your eslint config rather than their own opinions and much smaller list of options. There is Prettier ESLint, which just runs prettier and then eslint --fix, but that seems like a poor workaround for something that should just be built into the base formatting extension itself, using the actual eslint config for the formatting, rather than needing to format it twice. I'd essentially want the opposite of eslint-config-prettier, instead of disabling eslint rules to fit prettier, I'd want to override prettier rules to match eslint. The built-in formatter's been doing alright for me though.
Hey there! I watched your video and it is awesome . Now i am using the Vitest in my project but I am getting this error : ( Not implemented: window.computedStyle(elt, pseudoElt) at module.exports (C:\Users\Faizan\Desktop\full-stack ode_modules\jsdom\lib\jsdom\browser ot-implemented.js:9:17) )
I have type error on my vite react app but still working, how can I make it throw an error like CRA ? I followed your steps but I don't know how s supposed to work. Thanks
Hey, thank you so much for the video, it's amazing. I'm having some trouble on this part 14:24 when we add the eslint parse option project: './tsconfig.json' In the same file (.eslintrc) the module declaration on top of the file says: Parsing error: Cannot read file 'tsconfig.json', and in the every other file on the first line. But the tsconfig file is in the root folder of the project, I don't know what to do now, can you help? EDIT: Oops, just found the answer from another user on the comments below: replace the project key from parserOptions with: project: ...... for tsconfigRootDir: __dirname
Are you perhaps planning to release an edited version of 'Intro to React with TypeScript' on RUclips? I noticed that you jumped from "Intro to TypeScript + Express" directly to "Setting up vite..." Thanks!
I plan to re-do it sometime this week using this template as a starter. Last time I got a bit in the weeds. However, the VOD will be available on the archive channel soon.
2:04 ... By naming it react-ts-app it automatically created tsconfig for you and you weren't prompted if you wanted typescript or not? what sort of magic is this?
very usefull video thank you for makin it. I have question I feel like I am following each steps one by one but somehow I still can manage to miss something or I dunno at some point I have a different result than the video. Can it be because now the codes changes a little or my previous setting are not allowing it or I am really missing something. Who else had a same issue ?
Sorry for the late reply. There were some breaking changes in version 6 of @testing-library/jest-dom I updated the template to include the fixes: github.com/CodingGarden/react-ts-starter/commit/a1b2aa106cacd5f2377a4b1800879e058e3bfe25
most video i watch abt that they are using mac os but im using windows sometimes while following up like when i want to use vite some files are missing and aloot of errors appears any advice
You can click "use this template" on the github repo, or you can use a tool like degit. Repo is here: github.com/CodingGarden/react-ts-starter If you want to use degit, you can type "npx degit CodingGarden/react-ts-starter your-app-name", to create a folder with the base template.
Hi great video ! But am getting some error. I choosed React at the first input, but the second just propose me javascript and typescript. So I choosed Javascript as variant. But am getting error in loading page "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec." Plz help
eslint-plugin-prettier adds rules to your eslint config that correspond to prettier formatting rules, so when you run "eslint fix all auto fixable problems", it using prettier rules to auto fix things in a single command. prettier-eslint is separate from eslint and is a 2 part process. It first runs prettier to format your files and then "eslint fix all auto fixable problems". You can read more about this here: prettier.io/docs/en/integrating-with-linters.html
I have it as both a dependency and extension. The npm dependency is used in conjunction with eslint for "eslint fix all auto fixable problems". If I want to format files manually without eslint, I can run "Format Document With -> Prettier" in VS Code (this uses the prettier extension only).
I have been updating a react app that I 'inherited' and decided to use vite, vitest and eslint. I read through countless articles, all saying different things, all configuring their apps slightly differently. Then I found this video .... a presenter that speaks clearly, presents the content at a comfortable pace to follow along, doesn't rush or skip over important bits. One of the best coding tutorials I have come across. Thanks to this video, i was easily able to re-configure the app. Great job.
This is amazing! Quality content like this deserves so much more recognition.
Thank you CJ for the super helpful video.
If someone get error when accessing `toHaveTextContent` when writing tests add `import '@testing-library/jest-dom/vitest' ` in setupTest.ts file
8:32 to 8:37 is charming. I've seen this whole video 3 times now. It's really helped me get a firm sense of what eslint actually is and how to get a good ts environment. This is one of the best tutorials I've seen in a long time!
An amazing video for productivity .
Now that was a good tutorial!
No point in excusing yourself for setting up tests the way you did. It's exactly what one would need to get started. I'd also add that one shouldn't get too obsessed with the designations of test types, you'll need those terms to keep some structure in your zoo of tests, eventually. Primarily, the set of all tests serves as cleverly laid out tripwires that keep us informed about unintentional changes, which helps our(future)selfes and anyone else getting on the project to make changes confidently.
Long time angular dev here. Was looking for a good tutorial on how to set up a real react project that I would actually use to build a professional (linted/formatted/tested) project from. This is that tutorial. A-ma-zing!!! Thank you so much!
Yea not bad
What a video. Dude you are just amazing attention to the detail is awesome. Love the content keep it up my bro. Love from Sri Lanka.
Good work man, one of the best videos on setting up a Vite project with Vitest + RTL.
Thank you too much!
You helped me solving a problem, nobody says that we need to add the file information on tsconfig -> include, this helped me a lot
this is amazingly helpful setup tutorial, comfortable pace to follow alone!
You are so damn efficient at writing code! It's a pleasure to watch ;)
This video was very helpful for me. And there were no hiccups. I was able to code properly without any problems or weird bugs getting in my way. Thank you very much!
Amazing! This is the first time I have seen such a detailed video.
I have set up my own boilerplate in the past using also vite and some linting packages. But this video is complete that it includes test packages for testing. Love it.
This was by far one of the most amazing videos I have ever seen. Setting up ESLint has been so foreign and walking through a good set up is much appreciated. I will say I had a lot of trouble configuring ESLint with Prettier
This was because I had Prettier Extension installed as well as ESLint. I followed your steps but something was conflicting. I ended up turning off my Prettier Extension. Come to find out my formatting was not working and my prettier config file was not being recognized. I really do not know what. Everything worked when I added the prettier rules from my config file into my eslint config file, which according to docs, overrides prettier config file. So I ended up removing prettier config file, extended the prettier recommended as the video shown and any rules I did not like from the default linting rules for prettier formatting I added inside the prettier rules in the eslint file and everything worked as expected. For example JSX attributes would have double quotes fixed on save and js would allow single quotes.
I know this was long but hope you read it and provide any insight you might have. Thnks again for the video
High quality content, we are looking for the next: React-testing-library 😁
Hey CJ, we don't need Auto Rename Tag extension anymore! The setting is Enable Linked Editing.
Same with Bracket Pair Colorizer, the setting is Bracket Pair Colorization.
Cheers!
thank you for this video, really appreciate you taking the time to walk through everything! I'm working through The Odin Project and am currently on the React testing lessons. They teach you how to use create-react-app to build applications (which has Jest and the react testing library configured out of the box), but I much prefer Vite. This video includes everything that I need to know to still follow the curriculum despite the differences in tech used.
OMG! I tryied to set up jets for 2 days and now I found this video, thank you a lot!
amazing tutorial. pretty much going to use this as my default starting vite project
Thanks, I was struggling so much with the setup, you made it really easy
This video was extremely helpful to me. Thank you for the great content man, you covered a lot of stuff and explained it all in a way that it was easy to understand!
Thank you for this video - would love more on formatting and linting configuration, CI/CD automation tools, and more on testing.
nice! actually I came here to check my eslint config, but I'm vitesting now :D . I've never used testing libraries before, but man I'm hours just looking at dom checking accesibility and stuff. Thanks!! you improved my workflow :)
Reloading VS Code is so normal, Its now part of the development process 😂😂.
Great content though, Helped me migrate a codebase from webpage to vite.
This is gold. Excellent explanations. I love it.
If anyone runs into an error (related to expect.extend(matchers);) in your jest setup upon running a test, change your matchers import to "import * as matchers from '@testing-library/jest-dom/matchers';"
Tnx a lot man 🙏
Thank you so much
god is that you? came from the heavens to help us peasants???? love u
For some reason if you're wondering, expect.extend(matchers) doesnt work anymore. Instead in your setup.ts just import "@testing-library/jest-dom"
Thank you for this guide!
I found answers to some questions I had before.
Nice video !! It would have been great to see more examples with TypeScript and react-router (loaders, react-query, params, matches, ...) 😁
Thank you, I have been looking for this video for weeks.
Thank you a lot of for saving my time😅, this video help me a lot!
Big thanks for this! It would be nice do the same but with webpack. I mean React app from scratch, without CRA💫
Really great tutorial. You know your subject, you are cool and fun when you talk. Amazing, I recommend.
So glad you uploaded it can't wait to get my hands on it.
I'm happy I found your channel. Thank you for helpful videos
congrats for the video, so instructional. i was looking for something like this.
Amazing! I've already shared this video to my friends. Thank you for your excellent job!
I like almost everything about this but I feel like the WrappedApp thing is not efficient or necessary. Otherwise BIG PROPS to you for putting this all together. I'm integrating much of this into my own boilerplate setup. 👍👍
i am beginner. Thank you so much for sharing this useful knowledge. This is wonderfull
Great Video CJ, thank you for all the hard work!
That was amazing!! Thanks! Glad I found this channel
I was looking for that setup!! Thanks!!
This video is weasome, It has all the configurations that you always look for
jesus christ, it helped so much!
I really thank you a lot!!
Nice overview, thank you!
Love it! Great job, CJ!
Fantastic content with great instruction!
Thanks for this setup video!
this is gold!
I am use BrowserRouter to work at the browser because I put a specific path, for example path='/login'. And work my test too
sir i love your turorial am your follower from cameroon
This is just amazing. Thank you so much.
thanks for sharing, it's very helpful !
That was very informative. Thanks
Congratulations and thanks a lot! 👊👊👊
Great job!
Something I would add is the import order. It takes some time to be doing the imports order manually.
awesome tutorial!🔥
Thank you! so helpfull!
Thanks for your support! 💚
thank you for this kind vid
Nice! You're a life saver...
Thanks, helped me a lot
AYYY I LOVED THAT CATJAM
"This video is just starting, but you've probably been watching RUclips all day."
Based.
wow super wow really for such content ... wish this channel get bigger and bigger bist wishes for you really ... thank you so mush pro
Great job bro! video is liked.
Hi @Coding garden!
This is an amazing content. I have a question though, can we do this kind of config with a nexjts project too
You can definitely use eslint and prettier with next.js, but not vite (next.js uses swc under the hood - swc.rs/). You should also be able to use vitest and test-library with next.js
Thanks, dude!
You won me at: it is nice and ugly 💖
thank you
I 💌🍀Love Coding Garden!!
well done
Ohh so the public is like a place for images, videos audio etc… so that when when you build your files they are safe. If you were to put images in the assets folder they would get deleted every time during build time… I deleted that public folder… wonder if there is way to just ignore folders or files… in your assets folder so it doesn’t get deleted..
Amazing Video! Can you make a video about deploying vite app with react-router-dom 6.6+ to GitHub pages?
7:37 : Looks like the latest vite installer adds eslint by default.
Thank you!!!
Personally not a huge fan of Prettier. Quite a few of the opinions in it don't match my preferred eslint configs, so format on save always ends up making eslint complain if I use Prettier, especially for stuff like arrow functions or ternaries (when to line break, place ? and : at start or end of line, use or don't use extra indent when nested, etc.). For that reason I've been using HookyQR's Beautify, but it hasn't been updated in over 3 years (so I've largely just been using the built-in formatter, since vscode 1.63.2 in Nov 2021 with the multi-language syntax) - I really wish there was a beautify/prettier-type of extension that just used your eslint config rather than their own opinions and much smaller list of options. There is Prettier ESLint, which just runs prettier and then eslint --fix, but that seems like a poor workaround for something that should just be built into the base formatting extension itself, using the actual eslint config for the formatting, rather than needing to format it twice. I'd essentially want the opposite of eslint-config-prettier, instead of disabling eslint rules to fit prettier, I'd want to override prettier rules to match eslint. The built-in formatter's been doing alright for me though.
Hey there!
I watched your video and it is awesome . Now i am using the Vitest in my project but I am getting this error :
( Not implemented: window.computedStyle(elt, pseudoElt)
at module.exports (C:\Users\Faizan\Desktop\full-stack
ode_modules\jsdom\lib\jsdom\browser
ot-implemented.js:9:17) )
Valeu!
I have type error on my vite react app but still working, how can I make it throw an error like CRA ? I followed your steps but I don't know how s supposed to work. Thanks
cool, thanks
thanks
Hey, thank you so much for the video, it's amazing.
I'm having some trouble on this part 14:24 when we add the eslint parse option project: './tsconfig.json'
In the same file (.eslintrc) the module declaration on top of the file says: Parsing error: Cannot read file 'tsconfig.json', and in the every other file on the first line.
But the tsconfig file is in the root folder of the project, I don't know what to do now, can you help?
EDIT: Oops, just found the answer from another user on the comments below:
replace the project key from parserOptions with:
project: ......
for
tsconfigRootDir: __dirname
Are you perhaps planning to release an edited version of 'Intro to React with TypeScript' on RUclips?
I noticed that you jumped from "Intro to TypeScript + Express" directly to "Setting up vite..." Thanks!
I plan to re-do it sometime this week using this template as a starter. Last time I got a bit in the weeds. However, the VOD will be available on the archive channel soon.
@@CodingGarden Great news ✨
@@CodingGarden 😅 Hey CJ, is it safe to assume at this time that this episode is unlikely to appear? Greetings
great video for beginners like myself. i use prettier as extension in vscode, should i disable and use it as dependency?
I believe you need the extension installed for the eslint rules to work.
2:04 ... By naming it react-ts-app it automatically created tsconfig for you and you weren't prompted if you wanted typescript or not? what sort of magic is this?
very usefull video thank you for makin it. I have question I feel like I am following each steps one by one but somehow I still can manage to miss something or I dunno at some point I have a different result than the video. Can it be because now the codes changes a little or my previous setting are not allowing it or I am really missing something.
Who else had a same issue ?
Sorry for the late reply. There were some breaking changes in version 6 of @testing-library/jest-dom
I updated the template to include the fixes: github.com/CodingGarden/react-ts-starter/commit/a1b2aa106cacd5f2377a4b1800879e058e3bfe25
@@CodingGarden u d man. Tyvm
most video i watch abt that they are using mac os but im using windows sometimes while following up like when i want to use vite some files are missing and aloot of errors appears any advice
Very informative! Is there a way to automate all these initial setup steps?
You can click "use this template" on the github repo, or you can use a tool like degit.
Repo is here: github.com/CodingGarden/react-ts-starter
If you want to use degit, you can type "npx degit CodingGarden/react-ts-starter your-app-name", to create a folder with the base template.
@@CodingGarden Thank you so much.
Hi great video ! But am getting some error. I choosed React at the first input, but the second just propose me javascript and typescript. So I choosed Javascript as variant. But am getting error in loading page "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec." Plz help
Is there any reason for using function App () {} instead of the arrow function ?
Nope, only reason not to use an arrow function is when you're working with methods as using them would cause issues around the value of .this keyword
But what if I need to setup react app vite with only RTL, I mean without using vitest? How to bootstrap that in the config files?
eslint-plugin-prettier vs. prettier-eslint, which one is the best? another video about setting prettier-eslint?
eslint-plugin-prettier adds rules to your eslint config that correspond to prettier formatting rules, so when you run "eslint fix all auto fixable problems", it using prettier rules to auto fix things in a single command.
prettier-eslint is separate from eslint and is a 2 part process. It first runs prettier to format your files and then "eslint fix all auto fixable problems".
You can read more about this here: prettier.io/docs/en/integrating-with-linters.html
Just don't use prettier. Easy
where is placed expect() function
Help -> React router dom with vite project doesn't work on server when i refresh the page, it's shows me server 404 page
I wholeheartly love this guy, just starting this type of project and this tutorial actually made it more managable and fun. Thanks a bunch my guy!🥲
do you have pettier installed either like a dependency or as an extension as well?
I have it as both a dependency and extension. The npm dependency is used in conjunction with eslint for "eslint fix all auto fixable problems". If I want to format files manually without eslint, I can run "Format Document With -> Prettier" in VS Code (this uses the prettier extension only).
is this compatible with the add storybook command?
Good