Building a Full Stack Web App with Javascript API
When it comes to building a full stack web app, there are a lot of technologies to consider. In this article, we will discuss how to build a full stack web app using Javascript API, Next.js 14, Node.js, Express, Prisma, Postgres, and Docker.
Getting Started
First, you will need to have Node.js installed on your machine. You can download it from the official website and follow the installation instructions. Once you have Node.js installed, you can create a new project folder and initialize it with a package.json file.
npm init -y
Next, you will need to install Next.js 14, which is a popular framework for building React web applications. You can do this by running the following command in your terminal:
npm install next@14
Setting up the Backend
For the backend of our web app, we will be using Node.js and Express. Node.js is a runtime environment that allows you to build server-side applications using Javascript, while Express is a web application framework for Node.js. You can install both of these using the following command:
npm install express
Next, we will be using Prisma as our database toolkit and Postgres as our database. Prisma is an open-source database toolkit that provides type-safe database access and migrations for Typescript and Javascript. You can install Prisma and Postgres using the following commands:
npm install @prisma/cli @prisma/client
npm install pg
Building the Frontend
Now that we have set up our backend, we can start building the frontend of our web app using Next.js. Next.js provides a great developer experience with features like automatic code splitting, static site generation, and server-side rendering. You can create the frontend of your web app using the following command:
npx create-next-app@latest
Containerizing with Docker
Finally, we can containerize our full stack web app using Docker. Docker is a platform for developing, shipping, and running applications in containers. You can create a Dockerfile in the root of your project and define your container configuration.
FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
Once you have defined your Dockerfile, you can build a docker image and run your full stack web app in a container:
docker build -t my-fullstack-app .
docker run -p 3000:3000 my-fullstack-app
Conclusion
In this article, we have discussed how to build a full stack web app using Javascript API, Next.js 14, Node.js, Express, Prisma, Postgres, and Docker. By following these steps, you can create a powerful and scalable web app that can be easily deployed and managed using containerization. Happy coding!
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
I noticed that you ran prisma migrate command from within docker container itself. Why not in dockerfile?
what the difference between, server components for query and routes, and backend with node. We can do the backend in server components, right?
Great tutorial!!!
Can't we simply install cors package to manage cors issue?
We have a full stack, maestro!!
Thank You so much sir ❤ specially for this video🙏
find Francesco: https://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
🔥🔥