Next.js, JavaScript, Docker: Build a fullstack REST API using Node.js, Express, Prisma, PostgreSQL

[@sebastian-mitco]

Hello guys, if you are facing problems on running the backend just change the first line in backend.dcokerfile FROM node:alpine I also add the line RUN npx prisma migrate dev --name init --preview-feature after the RUN npx prisma generate so the migrations is automatically made also on a new machine. After that you can run the project with just one command. Nice video & happy coding.

[@francescociulla]

Thanks, I'm gonna try that aswell!

[@cherribomb88]

@@francescociulla what a noob

[@myriaquekoko4758]

each time I add the line npx prisma migrate dev I get ERROR [7/8] RUN npx prisma migrate dev 6.1s ------ > 7/8] RUN npx prisma migrate dev: 0.972 Prisma schema loaded from prisma/schema.prisma 0.977 Datasource “db”: PostgreSQL database “postgres”, schema “public” at “db:5432”

[@francescociulla]

find Francesco: francescociulla.com 0:00 intro - Architecture, prerequisites, project initialization 2:47 Database 5:30 Backend 23:50 Frontend 38:12 Dockerize the frontend and final test

[@Red.Killer]

You are very sympathetic, I like your accent

[@francescociulla]

Thanks, I hope it was not too disturbing! 😂

[@TheUIArchitect]

We have a full stack, maestro!!

[@francescociulla]

trying my best!

[@adeyemiowolabi6062]

I like your intro already 👍

[@francescociulla]

thank you!

[@hhkl3bhhksm466]

Hey thanks for the tutorial. Do you setup everything from scratch for every project? This process seems very tedious, lol

[@francescociulla]

it's tedious but I want to give something as good as possible and that everyone can follow. I also provide the code if you want to just get that

[@JaacielBrisenoEspinoza]

Great video! I have a question, is there a way to build the frontend image with the database running in case you use prisma with server components ? So it build some pages at build time

[@francescociulla]

interesting concept, I think it's possible but I should double check that.

[@AlEgorova]

Thank for helpful explanation. I have question: when I change some code in my app how I update code in docker? Just docker compose build and docker compose up -d frontend (or backend)?

[@Pedro-Pontes]

what the difference between, server components for query and routes, and backend with node. We can do the backend in server components, right?

[@francescociulla]

yes you can, the point here is to show how you can connect a backend with a frontend. for example, next week we'll do something similar with rust and next js, so it will mke more sense.

[@powercircuitacademy]

Thank You so much sir ❤ specially for this video🙏

[@francescociulla]

Appreciated

[@saharilarshad1628]

@francescociulla, how to add volumes in frontend and backend? because when i make changes in code, its not reflected. i need to restart docker again. how to avoid to restart docker when i made changes?

[@francescociulla]

I can create a video about this, but it's deef possible

[@MuhamadAzizPrasetyo]

@@francescociulla create a video, pleaseee

[@BailinCAI]

Hi Francesco, i want to know more about the reason why don't put different .gitignore in frontend and backend and also a .gitignore in root directory, in the project i'm working on, i'm gonna use next.js as frontend and the python fastapi as backend, is there any particular reason why don't seperate them? can you explain deeper about it?

[@francescociulla]

Ineanted to have a single repository on GitHub for both of the projects, that's the main reason

[@alvinchristianto-p2d]

did prisma or express have ability to migrations like laravel(php artisan migrate:...) ?

[@francescociulla]

yes, I think I did it in the video

[@alvinchristianto-p2d]

@@francescociulla another question francesco, when we use express js to connect to db. since next js also can directy (with prisma) connect to db ? need to convince myself the use of expressjs

[@Rider_12413]

Can't we simply install cors package to manage cors issue?

[@francescociulla]

yes I think that's fine too

[@3IMAD69]

Thanks For the video m i have a problem building the frontend , cuz it depends on the backend to make some requests to cache them the problem is the frontend get builded before the server ? which is necessary to build my nextjs app (im using a diffrent project structure frontend nextjs 14 backend express js)

[@francescociulla]

you can put depends_on in teh docker compose or adding a restart policy

[@code_cn]

hey Brother thank you for sharing this totorial i'm from Cambodia i want become Fullstack developer

[@francescociulla]

you are welcome!

[@hoodapurvender]

which extension are you using for auto complete code in vscode?

[@francescociulla]

Hi, the extension is called GitHub Copilot

[@nikeboys3134]

what is autocomplite code?

[@francescociulla]

it's GitHub Copilot

[@sunnyyasin2107]

should i install postgres in my terminal?

[@francescociulla]

no, jsut use docker to use an instance of Postgres

[@shravan2891]

damn, seriously you read my mind i am building a project using same techstack, you saved my time for configuration

[@francescociulla]

thank you. your comment has been featured here twitter.com/FrancescoCiull4/status/1738272313173307822

[@shravan2891]

@@francescociulla Thank you brother!!

[@jsbr]

Hi, do I need to have WSL 2 on windows to use Docker ? Or I can just use docker desktop ?

[@francescociulla]

what I'd recommend is to install docker desktop and check the WSL checkbox, so you will have it both on windoes and on wsl

[@Rider_12413]

I noticed that you ran prisma migrate command from within docker container itself. Why not in dockerfile?

[@francescociulla]

I want the process at runtime and not at build time, so the 2 procedures are not tightly coupled (and you could ideally make the migration in anotehr moment, not every time you build the image). but it depends on your requirements

[@nguyenvuquang2670]

pl share video how to setup windows tool for develop in this video

[@francescociulla]

What do you mean? Requirements to follow along?

[@nguyenvuquang2670]

i do not know how to setup terminal. code vs. docker. i mean all tool you use to develop like you in video

[@out-of-sight]

Perfection! 👌🏻👏🏻

[@francescociulla]

Thank you!!

[@kinjalnshah239]

Dear Francesco.. this is fantastic. Thank you so much, SIR!! :) Requesting additional guidance. I was trying to deploy this app on Azure (migrating to Azure Cloud), so that I can access it via a public facing internet URL. I went thru a lot of tutorials on moving container images to Azure, and I have not yet successfully cracked it. Esp. examples cover use-cases where entire app is a single image - unlike the case here where we have a frontend image, a backend image, and a postgres image, all under full-stack. Kindly guide please. Once again, thank you! Your tutorials are superb :)

[@francescociulla]

First, thanks for your kind words. I am planning to do this in the future, so stay tuned!

[@Jerac07]

Great tutorial!!!

[@francescociulla]

Thank you Jerac!!

[@Jerac07]

@@francescociulla looking forward to future content!

[@francescociulla]

@@Jerac07 we have more coming soon!

[@humblezeed]

Thanks you mr francesco

[@francescociulla]

you are welcome Humblez!

[@dumpster-jackson]

Hi. Great video! But when I try to dockerize frontend, it is running into multiple errors. Did anyone else face this problem?

[@francescociulla]

are you using the default dockerfile from vercel and changing the next.config.js?

[@dumpster-jackson]

@@francescociulla Thank you so much for this amazing tutorial! I had to rename the file from config.tjs to config.js and change the content and it worked Cheers!

[@dumpster-jackson]

@@francescociulla Will this be considered as a good project for a fresher entering software development after Uni?

[@francescociulla]

@@dumpster-jackson it's a good one imo

[@francescociulla]

@@dumpster-jackson was it called config.js in my project?

[@treasuregiftedtv4240]

For bills

[@francescociulla]

what?

[@treasuregiftedtv4240]

@@francescociulla got school bills

[@vanshvasishtha7082]

You are using Typescript for frontend and in the title it is mentioned Javascript. but this video is the exactly same with the You Uploaded For typescript Prisma App (kzbin.info/www/bejne/hF6apoyjZrWmsK8).

[@francescociulla]

you linked this same exact video. I usually make a livestream and this is the editev version of that

[@dailydotdev]

🔥🔥

[@francescociulla]

🚀🚀

[@treasuregiftedtv4240]

Nice accent

[@francescociulla]

lol thanks

[@aakash2665]

great

[@francescociulla]

you are welcome

[@pripri-h4d]

super job thx

[@francescociulla]

Thank you!!

[@pripri-h4d]

you're welcome@@francescociulla

[@out-of-sight]

Perfection! 👌🏻👏🏻

[@francescociulla]

Hey Thanks!