Тёмный

Full Stack App: Next.js 14, Node.js , Express, Prisma, Posgres, Docker (PERN) 

Francesco Ciulla
Подписаться 265 тыс.
Просмотров 21 тыс.
50% 1

Let's create a very minimalistic Full Stack App, with these technologies:
- Next.js 14
- Node.js
- Express
- Prisma
- Docker
- Docker Compose
We will not focus on the actual application, but on the connection between these 3 services.
Github repository: github.com/Fra...
find Francesco: francescociull...

Опубликовано:

 

8 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 74   
@devardilshad3944
@devardilshad3944 Месяц назад
thanks for the great tutorial, buttery smooth pace and loved that you were laughing when things worked
@francescociulla
@francescociulla Месяц назад
thnak you for your comment. It has been featured here x.com/FrancescoCiull4/status/1816773321578389517
@ksivasuriyaprakash9976
@ksivasuriyaprakash9976 9 месяцев назад
Thanks for this video, really brush up my docker memory from past!
@francescociulla
@francescociulla 9 месяцев назад
Nice, more are coming!
@chnkrydv
@chnkrydv 4 месяца назад
@@francescociulla thanks a lot. Needed exactly this stack tutorial.
@ayushshende4290
@ayushshende4290 6 месяцев назад
Monorepo setup with this one would have been a bonus. Still an amazing tutorial.
@francescociulla
@francescociulla 6 месяцев назад
Thanks
@Bitfumes
@Bitfumes 9 месяцев назад
very nice explanation bhai Keep doing amazing work
@francescociulla
@francescociulla 9 месяцев назад
more stuff is coming...hint: 🦀
@Bitfumes
@Bitfumes 9 месяцев назад
@@francescociulla excited
@VikasWakdeIDK
@VikasWakdeIDK 4 месяца назад
thank you loving it
@francescociulla
@francescociulla 4 месяца назад
you are welcome
@senhor_lucao
@senhor_lucao 8 месяцев назад
Amazing video! Thank you!
@francescociulla
@francescociulla 8 месяцев назад
you are welcome. here is an edited and shorter version in case you didn't see it all ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-N-7uYm1PszM.htmlsi=u8nZ5mTVIJQ5n62v
@fujimotorenato
@fujimotorenato 6 месяцев назад
perfect video! thank for this
@francescociulla
@francescociulla 6 месяцев назад
You are welcome
@rajneeshhtml1
@rajneeshhtml1 9 месяцев назад
Amazing fran
@francescociulla
@francescociulla 9 месяцев назад
let's go Rajneesh 🔥🔥
@PeriklesPeriklesoglu
@PeriklesPeriklesoglu 28 дней назад
thank you
@francescociulla
@francescociulla 27 дней назад
you are welcome
@abujayed8999
@abujayed8999 3 месяца назад
Just what i need, Now i am at intro point of this video. let's see if I can finish the video.
@francescociulla
@francescociulla 3 месяца назад
lmk if you need help
@MitkoGeorgiev-re5xg
@MitkoGeorgiev-re5xg 7 дней назад
@francescociulla One question, do we need somewhere to define this DB migration, that you do manually ?
@francescociulla
@francescociulla 7 дней назад
it can be done with a spearate script and executed in the docker compose command, or in the app itself.
@ossurf
@ossurf 9 месяцев назад
Grande Francesco!
@francescociulla
@francescociulla 9 месяцев назад
Mitico!!
@Amy-gt5jw
@Amy-gt5jw 3 месяца назад
Grazie mille per questo tutorial, sto imparando next e mi preoccupava la parte serverless/hosting e possibili costi e stavo proprio cercando di capire come usare express e docker con next, è il video che stavo cercando
@francescociulla
@francescociulla 3 месяца назад
Ciao, e prego!
@RazorBack-ps3cy
@RazorBack-ps3cy 9 месяцев назад
I have a question, Is not possible to do backend with Next.js? Instead of Express? and have "all in one" ?
@francescociulla
@francescociulla 9 месяцев назад
yes. check this ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Gf9RkaHnsR8.html
@MrRicardosgeral
@MrRicardosgeral 4 месяца назад
Why didn`t you put the "npx prisma migrante dev --name init" instruction índice the docker file. Any inconvenience?
@francescociulla
@francescociulla 4 месяца назад
I dont' want to do it when I build the image, but rather when the app is running
@primeshheshan3662
@primeshheshan3662 Месяц назад
@@francescociulla what is the reason for that?
@IrfanAnsari-g8k
@IrfanAnsari-g8k Месяц назад
If i make a backend project in Typescript. What changes fo i need to do ?
@francescociulla
@francescociulla Месяц назад
that's a whole refactoring, but for sure it can be done. If you are rewriting it froms cratch, you can select "TS" when creating the ent project. otherwise, you can start refactoring file by file, by renaming them to .ts and start applying TS rules to make it work
@techandstream
@techandstream 9 месяцев назад
useful video
@francescociulla
@francescociulla 9 месяцев назад
an edited version is coming up next week
@myriaquekoko4758
@myriaquekoko4758 17 дней назад
every time i do RUN npx prisma migrate dev --name init --preview-feature it works and yet everything is correct. i get the error Error: P1001: Can't reach database server at `db:5432`
@francescociulla
@francescociulla 16 дней назад
how did you name your container for postgres and how are you accessing it? it seems a network issue. Containers need to stay in the same network to find each other
@MuhamadAzizPrasetyo
@MuhamadAzizPrasetyo 6 месяцев назад
Thanks for this video! But i have an issue called error "Prisma Client Error" when opening Prisma Studio in the browser (after command: npx prisma studio) What do I have to do?
@francescociulla
@francescociulla 6 месяцев назад
what is the error? are you sure you are running the command on the right folder and that the port is not in use? I never had problems with it
@MuhamadAzizPrasetyo
@MuhamadAzizPrasetyo 6 месяцев назад
I've made sure all the code follows what you wrote, but it looks like I'll have to double check everything...@@francescociulla
@ander-pgl
@ander-pgl Месяц назад
I have the same problem, when executing the npx prisma studio command, a prisman client error appears, how to solve it?
@Mossarell
@Mossarell 3 месяца назад
what copilot did you use??
@francescociulla
@francescociulla 3 месяца назад
GitHub Copilot
@ogunleyeoluwafemi7243
@ogunleyeoluwafemi7243 9 месяцев назад
Hi there, is there a way to get the sourcecode to follow along properly? 🙏🏾
@francescociulla
@francescociulla 9 месяцев назад
yes, the code is available in the video description
@rusdeexii
@rusdeexii 4 месяца назад
What extension in vscode word auto
@francescociulla
@francescociulla 3 месяца назад
that's github copilot
@bryllejhonyatong
@bryllejhonyatong 2 месяца назад
Really amazing video but I encountered this error after running the "docker compose build" in the frontend directory: "failed to solve: process "/bin/sh -c if [ -f yarn.lock ]; then yarn run build; elif [ -f package-lock.json ]; then npm run build; elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; else echo \"Lockfile not found.\" && exit 1; fi" did not complete successfully: exit code: 1" I also copied the dockerfile in the docs of next js, is there any way to resolve this issue? Thanks
@francescociulla
@francescociulla 2 месяца назад
have you tried to clone the project and run it?
@bryllejhonyatong
@bryllejhonyatong 2 месяца назад
@@francescociulla I did not clone the project from the nextjs. I just copied the dockerfile they have
@bryllejhonyatong
@bryllejhonyatong 2 месяца назад
@@francescociulla I already fix the issue
@francescociulla
@francescociulla 2 месяца назад
@@bryllejhonyatong nice to know!
@Tajdev
@Tajdev 9 месяцев назад
NextJss', Node.jss', Express', Prisma', Postgress', Dockerr'
@Bobovino
@Bobovino 4 месяца назад
Hi, thank you for this video! How would you add sso authentication with this stack?
@francescociulla
@francescociulla 4 месяца назад
thanks! good idea!
@sai9692
@sai9692 8 месяцев назад
What's the advantage of using docker for both frontend and backend? Can I host the frontend on vercel if it's implemented inside docker container as in your video?
@francescociulla
@francescociulla 8 месяцев назад
I made a video about this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HBakGXpUnjM.html
@DevDhyGolang
@DevDhyGolang Месяц назад
Can I deploy it on netilify?
@francescociulla
@francescociulla Месяц назад
yes you can
@vanshvasishtha7082
@vanshvasishtha7082 8 месяцев назад
When i am trying to fetch the data, it is giving me server error 500, with Axios error , i tried checking the api again on postman (as i had a break in between), Docker Desktop is running, backend server is running and frontend is running, but the data is not getting fetched, can anyone please assist
@francescociulla
@francescociulla 8 месяцев назад
Is the database schema there?
@vanshvasishtha7082
@vanshvasishtha7082 8 месяцев назад
@@francescociulla Yes it is there.
@vanshvasishtha7082
@vanshvasishtha7082 8 месяцев назад
@@francescociulla Well i figured out the error and now it is working Fine, Thanks for the Help though
@francescociulla
@francescociulla 8 месяцев назад
glad you fixed it@@vanshvasishtha7082
@zoki5388
@zoki5388 9 месяцев назад
⚠ I don't know if it's about me but if you try to run docker compose up it will work but there won't be any relations in db because prisma migration wasn't performed. if you try to add npx prisma migrate dev --name init to backend.dockerfile it will also fail because db is not initiated before backend. I've tried fix it health check (pg_isready) but it didn't workout. So if anyone is having trouble running this you should define .env file in backend then run docker compose up, then run this (docker exec -it backend npx prisma migrate dev --name init) then you will have tables and relations in DB, and app will be fully functional. Thanks for stream.
@francescociulla
@francescociulla 9 месяцев назад
Yes that's what I do in the video, if I find a more efficient way I will share it ofc.
@vimalsonara2819
@vimalsonara2819 8 месяцев назад
Hey, I'm facing same issue.Did you find solutions?
@zoki5388
@zoki5388 8 месяцев назад
@@vimalsonara2819 I wrote in my comment how to do it, it's basically what Francesco wrote himself
@vimalsonara2819
@vimalsonara2819 8 месяцев назад
@@zoki5388 Oh I didn't notice that. Will check is that works for me. Thanks 😊
Далее
Next.js with a separate server - good idea?
22:53
Просмотров 60 тыс.
IT'S MY LIFE + WATER  #drumcover
00:14
Просмотров 22 млн
🛑 ты за кого?
00:11
Просмотров 114 тыс.
Прохожу маску ЭМОЦИИ🙀 #юмор
00:59
Я ЖЕ БЕРЕМЕННА#cat
00:13
Просмотров 543 тыс.
Payload: The Complete Backend for NextJS
27:10
Просмотров 35 тыс.
Dockerize Next.js 14+ App in 2024
4:20
Просмотров 2,1 тыс.
Why I'm Using Express Instead of NextJS
5:23
Просмотров 110 тыс.
Docker container for your fullstack NextJS project
8:41
10 common mistakes with the Next.js App Router
20:37
Просмотров 210 тыс.
How to Do 90% of What Plugins Do (With Just Vim)
1:14:03
Просмотров 893 тыс.
Dockerize Your Next.js 14 App in 2024!
7:41
Просмотров 15 тыс.
IT'S MY LIFE + WATER  #drumcover
00:14
Просмотров 22 млн