This content originally appeared on DEV Community and was authored by NordicBeaver
What is this
So I'm making a series of videos on how to build a very basic website for a local business. In my case it's a website for a barbershop with an admin panel and a reservation booking form. And today I released the first part.
This video is a bit different from others, since it's not really a follow along tutorial with explanations for every single line. My goal was more to show how different technologies work together. And I only tried to explain stuff that I find interesting or things that are not usually in the docs or not that easy to google.
The other reason for that is I'm myself is getting a bit tired of those 4000hrs videos of people making typos. So the main goal of this video was to be slightly more fun, even if it was at the cost of being less informative.
Anyway, you can find the video here:
I hope some of you will enjoy it.
Stack
For people that are interested in particular technologies/libraries, here is the tech stack i used so far:
- Typescript
- NodeJs
- NestJs
- Prisma
- PostgreSQL
- React
- Styled-components.
- React-query
- Formik
Promo tips
A couple of tips from the video with a hope of making you curious enough to watch it.
Debugging NestJs app in VS Code
If you try to debug a NestJs app in VS Code just by pressing the Debug button (or F5), you might run into some issues, since it may conflict with how the app is supposed to be built.
There is much easier way. You just need to set the Auto Attach option to Smart (you can do this with the Command Palette), and then run the app with yarn start:debug (npm run start:debug). And that's it, when the application starts, the magic of VS Code will show itself and debugger will run and attach itself to the process.
Thunder Client
If you're a bit tired of how bloated Postman may feel sometimes, there is a VS Code extension called Thunder Client. It supports pretty much all you need for testing your APIs.
Readable class names with styled-components
By default the class names generated by styled-components are gibberish like .frh743-Wrapper. If you want them to be more meaningful, you can update your babel configuration according to the docs.
The problem is, you can't really do this if you use something like create-react-app. Luckily, there is another solution. You just import the library a bit different and it should work.
import styled from 'styled-components/macro'
This content originally appeared on DEV Community and was authored by NordicBeaver
NordicBeaver | Sciencx (2021-09-19T19:28:35+00:00) Making the most boring website ever with TypeScript, NestJs, React and others.. Retrieved from https://www.scien.cx/2021/09/19/making-the-most-boring-website-ever-with-typescript-nestjs-react-and-others/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.