Web Development Essentials: Frontend Backend Database in LDE

Name: Web Development Essentials: Frontend Backend Database in LDE
Rating: 4.1 (128 reviews)

Use Postman, Postbird and Chrome Developer Tools in a Docker Virtual Environment with a Postgres Database in locale

Created byLuca Nigido

Last updated 9/2022

English

English [Auto],

What you'll learn

To get a development environment ready for development in few minutes instead of hours
To use the instructions of an open source project as a template for all your future projects
To configure and run one or more Postgres databases in a local environment
To run a local development environment with virtual machines, and run the frontend, the backend and the database on those virtual machines
To create your own editable copy of the frontend and backend open source projects in your own gitlab repository
To use the open source repositories of this course as a template for your projects

Course content

7 sections • 16 lectures • 1h 56m total length

Welcome to the course3:41
Learn to run a frontend, backend, and a database in a local environment using open source repositories, with React front-end, Node.js, Apollo GraphQL, Prisma, PostgreSQL, Docker, and Kubernetes-ready deployment.
About the series1:31
Explore the full stack mindset championed by the Fullstack Unicorn School, detailing how front end, backend, database, and deployment work together to deploy, monitor, scale, test, and secure applications.
Overview of the Project of the course10:02
Explore an open source template app illustrating a frontend, backend, and database architecture, with localhost ports and hostnames, GraphQL mutations, authentication tokens, and Prisma with Postgres.
The plan for the course0:25
Divide the workload into two parts: developer essential and local environment, cover theory first, then show steps with explanations, and repeat the steps without explanation for reference.

Theory11:48
Explore essential developer tools for testing frontend, backend, and database, including Google Chrome, Postman, and password, plus virtualization with Docker and Vagrant, and code editing with Voice Code and GitLab.
Practice: All the steps6:41
Set up the Fullstack Unicorn ecosystem locally by navigating the GitLab project, installing essential apps and extensions, organizing folders, creating a GitLab account, and configuring push-pull access via terminal.

Theory10:16
Explore local and virtual environments, showing how to run front-end and back-end apps with Docker, Vagrant, and SSH setups, ensuring identical software across machines for deployment.
Practice: Local Environment2:07
Practice local environment setup by downloading the ecosystem local environment project from GitLab, unzipping it, renaming it (for example to Facebook), and configuring the frontend, backend, and deployment folders.
Practice: Backend19:31
Configure and run a backend development stack with Vagrant and Docker, set up databases and migrations with yarn migrate, and test the API on localhost 4000 using Postman.
Practice: Frontend14:43
Configure the frontend environment, including port mapping and vm name, then clone a private GitLab project, install dependencies with yarn, and run the app at localhost 3000.
Practice: Switch Off1:16
Switch off the front end, then the back end containers, halt the docker containers with Vagrant Halt, and close the secure shell session to return to the laptop.

Do the procedure a step at a time1:34
Do the procedure step by step on your laptop using the provided starting links, keep the intro video open, and check for typos in configuration files with GitLab local environment.
Do the procedure over and over3:42
Practice makes a pro by repeating the local environment cleanup: purge Docker containers and images, reset GitLab projects, and re-run the frontend and backend procedures within a 30-minute time cap.

Requirements

The only requisite is to be able to download and install software on your laptop

Description

In this course I show you how to run a frontend, a backend and a PostgreSQL database on your laptop, in a Docker Virtual Environment made of two containers, one for the frontend, one for the backend and the local database.

I assume you have a new laptop with nothing installed, so we start from the very beginning, installing Google Chrome, Docker Desktop, Vagrant, Postman, Postbird and VsCode.

I show you how to create a Gitlab account for the source code.

I show you a few schemas about how Google Chrome, Postman and Postbird are essential tools to ensure that the code you are writing is working, and then we use this tools to test the project on your laptop.

We use as project for the course an open source template project with a frontend, a backend and database that is ready to be run on a Docker Virtual Environment and is also ready to be deployed online with Kubernetes.

The frontend uses React, React Router, Recoil and Apollo GraphQL.
The backend uses NodeJs, Apollo GraphQL, and Prisma.
The database is a PostgreSQL

The template open source code project is the extreme simplification of a bigger and extreme complex project, and for this reason is fully featured and includes Single Sign On Authentication.

The open source project is from the public fullstackunicorn gitlab account and you can use it as a template for any of your future projects.

Who this course is for:

To a developer that wants a local development environment easy to setup and kubernetes ready
To any team that has experienced the issue “It works on my laptop, why is it not working on yours?”
To the windows user that wants to follow instructions using linux commands
To the frontend or backend developers that want a professional template that is not so easy to figure out and configure from scratch (It took us few days and few projects)
To anyone that wants a professional environment ready in less than 10 minutes
To anyone that was struggling to configure a virtual environment
To anyone that is experiencing issues with Virtualbox and vagrant (especially on a laptop with Apple chips)
To anyone that tried to have a Postgres database in locale but didn’t manage to make it work
To the complete beginner that is struggling to have his laptop ready for development
To anyone that wants to make his environment portable, and recreate it from scratch in less than 10 minutes on a new laptop

Web Development Essentials: Frontend Backend Database in LDE

What you'll learn

Explore related topics

Course content

Intro4 lectures • 16min

Watch Web Developer Essentials: Theory and Practice2 lectures • 18min

Watch Web Developer Essentials: All the steps in a row1 lecture • 5min

Watch Local Environment: Theory and Practice5 lectures • 48min

Watch Local Environment: All the steps in a row1 lecture • 22min

Do the procedure2 lectures • 5min

Record a video1 lecture • 2min

Requirements

Description

Who this course is for: