No video

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

  Рет қаралды 19,697

Francesco Ciulla

Francesco Ciulla

Күн бұрын

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...

Пікірлер: 69
@devardilshad3944
@devardilshad3944 27 күн бұрын
thanks for the great tutorial, buttery smooth pace and loved that you were laughing when things worked
@francescociulla
@francescociulla 26 күн бұрын
thnak you for your comment. It has been featured here x.com/FrancescoCiull4/status/1816773321578389517
@ksivasuriyaprakash9976
@ksivasuriyaprakash9976 8 ай бұрын
Thanks for this video, really brush up my docker memory from past!
@francescociulla
@francescociulla 8 ай бұрын
Nice, more are coming!
@chnkrydv
@chnkrydv 3 ай бұрын
@@francescociulla thanks a lot. Needed exactly this stack tutorial.
@ayushshende4290
@ayushshende4290 5 ай бұрын
Monorepo setup with this one would have been a bonus. Still an amazing tutorial.
@francescociulla
@francescociulla 5 ай бұрын
Thanks
@PeriklesPeriklesoglu
@PeriklesPeriklesoglu 9 күн бұрын
thank you
@francescociulla
@francescociulla 8 күн бұрын
you are welcome
@Bitfumes
@Bitfumes 8 ай бұрын
very nice explanation bhai Keep doing amazing work
@francescociulla
@francescociulla 8 ай бұрын
more stuff is coming...hint: 🦀
@Bitfumes
@Bitfumes 8 ай бұрын
@@francescociulla excited
@VikasWakdeIDK
@VikasWakdeIDK 4 ай бұрын
thank you loving it
@francescociulla
@francescociulla 4 ай бұрын
you are welcome
@fujimotorenato
@fujimotorenato 5 ай бұрын
perfect video! thank for this
@francescociulla
@francescociulla 5 ай бұрын
You are welcome
@rajneeshhtml1
@rajneeshhtml1 8 ай бұрын
Amazing fran
@francescociulla
@francescociulla 8 ай бұрын
let's go Rajneesh 🔥🔥
@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 kzfaq.info/get/bejne/hJNnqLyelrbXqoE.htmlsi=u8nZ5mTVIJQ5n62v
@ossurf
@ossurf 8 ай бұрын
Grande Francesco!
@francescociulla
@francescociulla 8 ай бұрын
Mitico!!
@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
@Amy-gt5jw
@Amy-gt5jw 2 ай бұрын
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 2 ай бұрын
Ciao, e prego!
@RazorBack-ps3cy
@RazorBack-ps3cy 8 ай бұрын
I have a question, Is not possible to do backend with Next.js? Instead of Express? and have "all in one" ?
@francescociulla
@francescociulla 8 ай бұрын
yes. check this kzfaq.info/get/bejne/fcxphc6SrdTXgmw.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 21 күн бұрын
If i make a backend project in Typescript. What changes fo i need to do ?
@francescociulla
@francescociulla 21 күн бұрын
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 8 ай бұрын
useful video
@francescociulla
@francescociulla 8 ай бұрын
an edited version is coming up next week
@MuhamadAzizPrasetyo
@MuhamadAzizPrasetyo 5 ай бұрын
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 5 ай бұрын
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 5 ай бұрын
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?
@ogunleyeoluwafemi7243
@ogunleyeoluwafemi7243 8 ай бұрын
Hi there, is there a way to get the sourcecode to follow along properly? 🙏🏾
@francescociulla
@francescociulla 8 ай бұрын
yes, the code is available in the video description
@Tajdev
@Tajdev 8 ай бұрын
NextJss', Node.jss', Express', Prisma', Postgress', Dockerr'
@sai9692
@sai9692 7 ай бұрын
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 7 ай бұрын
I made a video about this: kzfaq.info/get/bejne/fqiRnqqJ1bvSmoE.html
@Mossarell
@Mossarell 2 ай бұрын
what copilot did you use??
@francescociulla
@francescociulla 2 ай бұрын
GitHub Copilot
@rusdeexii
@rusdeexii 3 ай бұрын
What extension in vscode word auto
@francescociulla
@francescociulla 3 ай бұрын
that's github copilot
@bryllejhonyatong
@bryllejhonyatong Ай бұрын
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 Ай бұрын
have you tried to clone the project and run it?
@bryllejhonyatong
@bryllejhonyatong Ай бұрын
@@francescociulla I did not clone the project from the nextjs. I just copied the dockerfile they have
@bryllejhonyatong
@bryllejhonyatong Ай бұрын
@@francescociulla I already fix the issue
@francescociulla
@francescociulla Ай бұрын
@@bryllejhonyatong nice to know!
@Bobovino
@Bobovino 3 ай бұрын
Hi, thank you for this video! How would you add sso authentication with this stack?
@francescociulla
@francescociulla 3 ай бұрын
thanks! good idea!
@vanshvasishtha7082
@vanshvasishtha7082 7 ай бұрын
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 7 ай бұрын
Is the database schema there?
@vanshvasishtha7082
@vanshvasishtha7082 7 ай бұрын
@@francescociulla Yes it is there.
@vanshvasishtha7082
@vanshvasishtha7082 7 ай бұрын
@@francescociulla Well i figured out the error and now it is working Fine, Thanks for the Help though
@francescociulla
@francescociulla 7 ай бұрын
glad you fixed it@@vanshvasishtha7082
@DevDhyGolang
@DevDhyGolang Ай бұрын
Can I deploy it on netilify?
@francescociulla
@francescociulla 29 күн бұрын
yes you can
@zoki5388
@zoki5388 8 ай бұрын
⚠ 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 8 ай бұрын
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 😊
Build a Rest API using Node.js, Express, Sequelize, Postgres, Docker
1:59:00
Next.js with a separate server - good idea?
22:53
ByteGrad
Рет қаралды 57 М.
CHOCKY MILK.. 🤣 #shorts
00:20
Savage Vlogs
Рет қаралды 29 МЛН
Logo Matching Challenge with Alfredo Larin Family! 👍
00:36
BigSchool
Рет қаралды 21 МЛН
Can This Bubble Save My Life? 😱
00:55
Topper Guild
Рет қаралды 67 МЛН
Why I'm Using Express Instead of NextJS
5:23
Josh tried coding
Рет қаралды 107 М.
Конфигурация Docker для разработки | Next.js 13.4, Postgresql, strapi cms
46:19
Евгений Паромов | Front-end
Рет қаралды 11 М.
How This New Battery is Changing the Game
12:07
Undecided with Matt Ferrell
Рет қаралды 174 М.
Payload: The Complete Backend for NextJS
27:10
Jack Herrington
Рет қаралды 31 М.
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 204 М.
Using docker in unusual ways
12:58
Dreams of Code
Рет қаралды 439 М.
Understanding an OPEN source codebase LIVE
29:40
Harkirat Singh
Рет қаралды 63 М.
How to connect Next.js to a database (in 5 minutes)
5:04
Web Dev Cody
Рет қаралды 10 М.