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

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ธ.ค. 2024

ความคิดเห็น • 86

  • @ksivasuriyaprakash9976
    @ksivasuriyaprakash9976 ปีที่แล้ว +2

    Thanks for this video, really brush up my docker memory from past!

    • @francescociulla
      @francescociulla  ปีที่แล้ว +1

      Nice, more are coming!

    • @chnkrydv
      @chnkrydv 7 หลายเดือนก่อน +1

      @@francescociulla thanks a lot. Needed exactly this stack tutorial.

  • @devardilshad3944
    @devardilshad3944 4 หลายเดือนก่อน +1

    thanks for the great tutorial, buttery smooth pace and loved that you were laughing when things worked

    • @francescociulla
      @francescociulla  4 หลายเดือนก่อน +1

      thnak you for your comment. It has been featured here x.com/FrancescoCiull4/status/1816773321578389517

  • @ayushshende4290
    @ayushshende4290 9 หลายเดือนก่อน +1

    Monorepo setup with this one would have been a bonus. Still an amazing tutorial.

  • @Bitfumes
    @Bitfumes ปีที่แล้ว +1

    very nice explanation bhai Keep doing amazing work

    • @francescociulla
      @francescociulla  ปีที่แล้ว +1

      more stuff is coming...hint: 🦀

    • @Bitfumes
      @Bitfumes ปีที่แล้ว

      @@francescociulla excited

  • @fujimotorenato
    @fujimotorenato 9 หลายเดือนก่อน +1

    perfect video! thank for this

  • @senhor_lucao
    @senhor_lucao 11 หลายเดือนก่อน +1

    Amazing video! Thank you!

    • @francescociulla
      @francescociulla  11 หลายเดือนก่อน

      you are welcome. here is an edited and shorter version in case you didn't see it all th-cam.com/video/N-7uYm1PszM/w-d-xo.htmlsi=u8nZ5mTVIJQ5n62v

  • @rajneeshhtml1
    @rajneeshhtml1 ปีที่แล้ว +2

    Amazing fran

  • @abujayed-dot-com
    @abujayed-dot-com 6 หลายเดือนก่อน +1

    Just what i need, Now i am at intro point of this video. let's see if I can finish the video.

  • @VikasWakdeIDK
    @VikasWakdeIDK 7 หลายเดือนก่อน +1

    thank you loving it

  • @ossurf
    @ossurf ปีที่แล้ว

    Grande Francesco!

  • @roseklaynk3087
    @roseklaynk3087 หลายเดือนก่อน +1

    Hey Francesco amazing video the way you explained it put so simple just what i needed but i am having a problem with prisma studio it's not letting me add the new user on there for some reason i am getting an error any idea how i can go about it?

    • @francescociulla
      @francescociulla  หลายเดือนก่อน +1

      not sure why, did you mnage to launch it?

    • @roseklaynk3087
      @roseklaynk3087 27 วันที่ผ่านมา

      @@francescociulla No i wasn't able to use the prisma studio but i am extremely grateful for the video it helped me grasp docker much better and i was able to utilize this for my own project you are a life savior

  • @marlonlr63
    @marlonlr63 หลายเดือนก่อน +1

    Hi Francesco, great video! A quick one, POST endpoints (create user) are not working with the backend is running with Docker. I've got this error message "Cannot read properties of undefined (reading 'name')": I stopped the backend container and ran the app locally and it works. Have you faced this issue before? My express version is ^4.21.1 btw.

    • @francescociulla
      @francescociulla  หลายเดือนก่อน +1

      I will check it thank you

  • @MrRicardosgeral
    @MrRicardosgeral 7 หลายเดือนก่อน +2

    Why didn`t you put the "npx prisma migrante dev --name init" instruction índice the docker file. Any inconvenience?

    • @francescociulla
      @francescociulla  7 หลายเดือนก่อน

      I dont' want to do it when I build the image, but rather when the app is running

    • @primeshheshan3662
      @primeshheshan3662 4 หลายเดือนก่อน

      @@francescociulla what is the reason for that?

  • @RazorBack-ps3cy
    @RazorBack-ps3cy ปีที่แล้ว +3

    I have a question, Is not possible to do backend with Next.js? Instead of Express? and have "all in one" ?

    • @francescociulla
      @francescociulla  ปีที่แล้ว

      yes. check this th-cam.com/video/Gf9RkaHnsR8/w-d-xo.html

  • @tonyvito5062
    @tonyvito5062 หลายเดือนก่อน

    Can you please disable github copilot in your tutorials? It's so annoying to see auto completion when you're explaining. Thanks for the tutorial Francesco

    • @francescociulla
      @francescociulla  หลายเดือนก่อน +1

      it's a style, someone likes it, someone doesn't. I prefer to not spend hours typing but rather explaining what happened. If there is anything that is not clear just let me know. You are welcome.

  • @MuhamadAzizPrasetyo
    @MuhamadAzizPrasetyo 9 หลายเดือนก่อน +2

    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  9 หลายเดือนก่อน +1

      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 9 หลายเดือนก่อน

      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 4 หลายเดือนก่อน +1

      I have the same problem, when executing the npx prisma studio command, a prisman client error appears, how to solve it?

    • @asyraf454
      @asyraf454 3 วันที่ผ่านมา

      @@ander-pgl i had that too, my solution was to recheck DATABASE_URL in .env file inside backend (wrong username) and rebuild

  • @MitkoGeorgiev-re5xg
    @MitkoGeorgiev-re5xg 3 หลายเดือนก่อน +1

    @francescociulla
    One question, do we need somewhere to define this DB migration, that you do manually ?

    • @francescociulla
      @francescociulla  3 หลายเดือนก่อน +1

      it can be done with a spearate script and executed in the docker compose command, or in the app itself.

  • @PeriklesPeriklesoglu
    @PeriklesPeriklesoglu 3 หลายเดือนก่อน +1

    thank you

  • @ogunleyeoluwafemi7243
    @ogunleyeoluwafemi7243 ปีที่แล้ว +1

    Hi there, is there a way to get the sourcecode to follow along properly? 🙏🏾

    • @francescociulla
      @francescociulla  ปีที่แล้ว

      yes, the code is available in the video description

  • @IrfanAnsari-g8k
    @IrfanAnsari-g8k 4 หลายเดือนก่อน +1

    If i make a backend project in Typescript. What changes fo i need to do ?

    • @francescociulla
      @francescociulla  4 หลายเดือนก่อน

      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

  • @Tajdev
    @Tajdev ปีที่แล้ว +3

    NextJss', Node.jss', Express', Prisma', Postgress', Dockerr'

  • @Amy-gt5jw
    @Amy-gt5jw 6 หลายเดือนก่อน +1

    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

  • @myriaquekoko4758
    @myriaquekoko4758 3 หลายเดือนก่อน

    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  3 หลายเดือนก่อน

      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

  • @Howdyhowthis
    @Howdyhowthis 6 หลายเดือนก่อน +1

    what copilot did you use??

  • @bryllejhonyatong
    @bryllejhonyatong 5 หลายเดือนก่อน

    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  5 หลายเดือนก่อน

      have you tried to clone the project and run it?

    • @bryllejhonyatong
      @bryllejhonyatong 5 หลายเดือนก่อน +1

      @@francescociulla I did not clone the project from the nextjs. I just copied the dockerfile they have

    • @bryllejhonyatong
      @bryllejhonyatong 5 หลายเดือนก่อน +1

      @@francescociulla I already fix the issue

    • @francescociulla
      @francescociulla  5 หลายเดือนก่อน

      @@bryllejhonyatong nice to know!

  • @Dev-Phantom
    @Dev-Phantom หลายเดือนก่อน +1

    cool

  • @Bobovino
    @Bobovino 7 หลายเดือนก่อน

    Hi, thank you for this video! How would you add sso authentication with this stack?

  • @rusdeexii
    @rusdeexii 6 หลายเดือนก่อน +1

    What extension in vscode word auto

  • @vanshvasishtha7082
    @vanshvasishtha7082 11 หลายเดือนก่อน

    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  11 หลายเดือนก่อน

      Is the database schema there?

    • @vanshvasishtha7082
      @vanshvasishtha7082 11 หลายเดือนก่อน

      @@francescociulla Yes it is there.

    • @vanshvasishtha7082
      @vanshvasishtha7082 11 หลายเดือนก่อน +1

      @@francescociulla Well i figured out the error and now it is working Fine, Thanks for the Help though

    • @francescociulla
      @francescociulla  11 หลายเดือนก่อน

      glad you fixed it@@vanshvasishtha7082

  • @techandstream
    @techandstream ปีที่แล้ว +1

    useful video

    • @francescociulla
      @francescociulla  ปีที่แล้ว

      an edited version is coming up next week

  • @sai9692
    @sai9692 11 หลายเดือนก่อน +1

    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  11 หลายเดือนก่อน

      I made a video about this: th-cam.com/video/HBakGXpUnjM/w-d-xo.html

  • @zoki5388
    @zoki5388 ปีที่แล้ว +1

    ⚠ 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  ปีที่แล้ว

      Yes that's what I do in the video, if I find a more efficient way I will share it ofc.

    • @vimalsonara2819
      @vimalsonara2819 11 หลายเดือนก่อน

      Hey, I'm facing same issue.Did you find solutions?

    • @zoki5388
      @zoki5388 11 หลายเดือนก่อน

      @@vimalsonara2819 I wrote in my comment how to do it, it's basically what Francesco wrote himself

    • @vimalsonara2819
      @vimalsonara2819 11 หลายเดือนก่อน

      @@zoki5388 Oh I didn't notice that. Will check is that works for me.
      Thanks 😊

  • @DevDhyGolang
    @DevDhyGolang 4 หลายเดือนก่อน

    Can I deploy it on netilify?

  • @Dev-Phantom
    @Dev-Phantom หลายเดือนก่อน +2

    cool