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

Рет қаралды 25,547

Күн бұрын

By the end of this video, you will understand and create a simple yet complete full stack app using the following:
Next.js 14 (TypeScript)
Tailwind CSS
Node.js
Express (JavaScript)
Prisma
PostgreSQL
Docker
Docker Compose
MANY technologies, but we'll keep the example as basic as possible to make it understandable.
We will proceed with a bottom-up approach, starting with the database and ending with the frontend.
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
KZfaq Membership:
/ @francescociulla
Github repository: github.com/FrancescoXX/fullst...

Пікірлер: 78

@francescociulla 7 ай бұрын

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

@sebastian-mitco 5 ай бұрын

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 5 ай бұрын

Thanks, I'm gonna try that aswell!

@adeyemiowolabi6062 3 ай бұрын

I like your intro already 👍

@francescociulla 3 ай бұрын

thank you!

@out-of-sight 7 ай бұрын

Perfection! 👌🏻👏🏻

@francescociulla 7 ай бұрын

Hey Thanks!

@MathsWithSatyamPandey 7 ай бұрын

Thank You so much sir ❤ specially for this video🙏

@francescociulla 7 ай бұрын

Appreciated

@Red.Killer 7 ай бұрын

You are very sympathetic, I like your accent

@francescociulla 7 ай бұрын

Thanks, I hope it was not too disturbing! 😂

@TheUIArchitect 7 ай бұрын

We have a full stack, maestro!!

@francescociulla 7 ай бұрын

trying my best!

@JaacielBrisenoEspinoza 7 ай бұрын

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 7 ай бұрын

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

@humblezeed 7 ай бұрын

Thanks you mr francesco

@francescociulla 7 ай бұрын

you are welcome Humblez!

@Jerac07 7 ай бұрын

Great tutorial!!!

@francescociulla 7 ай бұрын

Thank you Jerac!!

@Jerac07 7 ай бұрын

@@francescociulla looking forward to future content!

@francescociulla 7 ай бұрын

@@Jerac07 we have more coming soon!

@Pedro-Pontes 7 ай бұрын

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

@francescociulla 7 ай бұрын

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.

@dailydotdev 7 ай бұрын

🔥🔥

@francescociulla 7 ай бұрын

🚀🚀

@3IMAD69 5 ай бұрын

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 5 ай бұрын

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

@hoodapurvender 7 ай бұрын

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

@francescociulla 7 ай бұрын

Hi, the extension is called GitHub Copilot

@saharilarshad1628 7 ай бұрын

@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 6 ай бұрын

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

@MuhamadAzizPrasetyo 2 ай бұрын

@@francescociulla create a video, pleaseee

@user-tk3cd1ly7o 2 ай бұрын

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 2 ай бұрын

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

@hhkl3bhhksm466 5 ай бұрын

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

@francescociulla 5 ай бұрын

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

@Rider_12413 7 ай бұрын

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

@francescociulla 7 ай бұрын

yes I think that's fine too

@user-vy7cq7dk1v 4 ай бұрын

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

@francescociulla 4 ай бұрын

you are welcome!

@jsbr 6 ай бұрын

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

@francescociulla 6 ай бұрын

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

@kinjalnshah239 7 ай бұрын

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 7 ай бұрын

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

@shravan2891 7 ай бұрын

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

@francescociulla 7 ай бұрын

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

@shravan2891 7 ай бұрын

@@francescociulla Thank you brother!!

@Rider_12413 7 ай бұрын

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

@francescociulla 7 ай бұрын

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

@aakash2665 7 ай бұрын

great

@francescociulla 7 ай бұрын

you are welcome

@user-ml6he2yr3y 3 ай бұрын

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

@francescociulla 3 ай бұрын

yes, I think I did it in the video

@user-ml6he2yr3y 3 ай бұрын

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

@sunnyyasin2107 6 ай бұрын

should i install postgres in my terminal?

@francescociulla 6 ай бұрын

no, jsut use docker to use an instance of Postgres

@nguyenvuquang2670 7 ай бұрын

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

@francescociulla 7 ай бұрын

What do you mean? Requirements to follow along?

@nguyenvuquang2670 7 ай бұрын

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

@dumpster-jackson 6 ай бұрын

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

@francescociulla 6 ай бұрын

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

@dumpster-jackson 6 ай бұрын

@@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 6 ай бұрын

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

@francescociulla 6 ай бұрын

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

@francescociulla 6 ай бұрын

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

@treasuregiftedtv4240 3 ай бұрын

For bills

@francescociulla 3 ай бұрын

what?

@treasuregiftedtv4240 3 ай бұрын

@@francescociulla got school bills

@treasuregiftedtv4240 3 ай бұрын

Nice accent

@francescociulla 3 ай бұрын

lol thanks

@vanshvasishtha7082 6 ай бұрын

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 (kzfaq.info/get/bejne/hJNnqLyelrbXqoE.html).

@francescociulla 6 ай бұрын

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