https://textbooks.cs.ksu.edu/extras/02-full-stack/index.html A full stack web application from scratch! Deprecated This tutorial has been superseded by the new CIS 526 Example Project in that textbook. The material covered in this tutorial was the original inspiration that was expanded upon to create the current work in CIS 526. Most of the information in this tutorial is now outdated but may still be relevant for some users. Hugo en-us https://textbooks.cs.ksu.edu/extras/02-full-stack/01-intro/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://textbooks.cs.ksu.edu/extras/02-full-stack/01-intro/index.html This is a brief guide to building a framework for a full-stack web application from scratch. Features Express.js Backend React Frontend Can easily substitute Vue or other frontends Postgres Database Can easily substitue MySQL or other databases Full Docker Setup for Development You don’t have to install Node or a database locally - it all runs in Docker! Docker Deployment GitHub Actions What this is: this guide will give you the steps to build the framework, including links to associated resources and tutorials. Basically, it will show you what to do. https://textbooks.cs.ksu.edu/extras/02-full-stack/02-setup/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://textbooks.cs.ksu.edu/extras/02-full-stack/02-setup/index.html Prerequisites The basic environment required for this setup: A Linux/Unix system Ubuntu/Debian is preferred. Mac OS X (Darwin) should also work. Docker Desktop Visual Studio Code Git and GitHub This guide will use the following environment: Windows 10 Host OS (should work on Windows 11 as well) Windows Subsystem for Linux WSL 2 Ubuntu LTS on WSL 2 You do not need to install a GUI package as described in this guide Git installed on Ubuntu in WSL 2 You may also wish to either set up Git Credential Manager to share Git credentials with Windows or set up SSH Keys to communicate with GitHub Docker Desktop with WSL 2 Backend Visual Studio Code and WSL Extension You may also wish to install the Dev Containers extension. This guide will not use it, but that is an alternative way to develop within a container. Optional To match the environment seen in the screenshots/videos, you can install these optional items: https://textbooks.cs.ksu.edu/extras/02-full-stack/03-initial/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://textbooks.cs.ksu.edu/extras/02-full-stack/03-initial/index.html Create Repository Start by creating a new GitHub repository. We’ll let it initialize the repository using a README file, and also select the .gitignore file for a Node project. If you’ve already created the repository, you can get the .gitignore file for Node projects from GitHub’s gitignore repository Check out Repository Next, check out the repository: # Terminal git clone git@github.com:russfeld/fullstack.git cd fullstack code . Tip Change the repository URL to match your repository! https://textbooks.cs.ksu.edu/extras/02-full-stack/04-docker/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://textbooks.cs.ksu.edu/extras/02-full-stack/04-docker/index.html Note If you have already created projects locally, skip down to the Remove Node Modules section below. You can Dockerize existing projects as well! Get Effective IDs First, we need to make a note of our effective user ID and group ID in the terminal: # Terminal id You should get output that begins with something similar to this: uid=1000(youboon2) gid=1000(youboon2) Remember those two numbers for later! https://textbooks.cs.ksu.edu/extras/02-full-stack/05-working/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://textbooks.cs.ksu.edu/extras/02-full-stack/05-working/index.html Now that the project is running in Docker, let’s review some helpful commands we can use to interact with the Docker containers. Docker Status Query running container status # Terminal docker ps Sample output: CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 119d2cc1ae20 fullstack-project-client "docker-entrypoint.s…" 2 minutes ago Up 2 minutes 3000/tcp project-client b5c0853fa8b2 fullstack-project-server "docker-entrypoint.s…" 2 minutes ago Up 2 minutes project-server Software Output You can view the output of programs running in a container using this command: https://textbooks.cs.ksu.edu/extras/02-full-stack/06-nodemon/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://textbooks.cs.ksu.edu/extras/02-full-stack/06-nodemon/index.html At this point we probably want to install the Nodemon tool in our backend. Install Nodemon First, we’ll get a terminal inside of the container # Terminal docker exec -it project-server bash Then we can use the usual process to install Nodemon using npm. Make sure this is done inside of the /app/server directory: # Docker project-server Terminal npm install nodemon Once Nodemon is installed, we can close the terminal connected to the container using the exit command. https://textbooks.cs.ksu.edu/extras/02-full-stack/07-database/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://textbooks.cs.ksu.edu/extras/02-full-stack/07-database/index.html Now let’s add a database to our project. Postgres Container First, we can add an entry to our Docker Compose file to create a Postgres database, and also an entry for the volume to store the data: # docker-compose.yml services: # database project-db: # Use an existing image from DockerHub image: postgres:15 container_name: project-db # Automatically restart the container as needed restart: unless-stopped networks: - project-network volumes: # Persist database data in a Docker volume - project_db_data:/var/lib/postgresql/data:rw environment: # Configure environment using .env file POSTGRES_USER: POSTGRES_PASSWORD: POSTGRES_DB: healthcheck: # check if database is running and healthy test: ["CMD-SHELL", "pg_isready -d $${POSTGRES_DB} -U $${POSTGRES_USER}"] interval: 30s timeout: 5s retries: 5 start_period: 10s # server project-server: build: # location of Dockerfile context: ./server container_name: project-server # set the user ID to match our user user: "1000" depends_on: # requires database to start - project-db networks: - project-network # allow external connections (remove this in production) - default volumes: # mount code into container - ./server:/app/server # maintain existing node_modules in container - /app/server/node_modules # client project-client: build: # location of Dockerfile context: ./client container_name: project-client # set the user ID to match our user user: "1000" depends_on: # requires server to start - project-server networks: - project-network # allow external connections - default volumes: # mount code into container - ./client:/app/client # maintain existing node_modules in container - /app/client/node_modules volumes: project_db_data: networks: # internal Docker network for project project-network: name: project-network internal: true Refer to the Postgres Docker Image documentation for more details. https://textbooks.cs.ksu.edu/extras/02-full-stack/08-knex/index.html Mon, 01 Jan 0001 00:00:00 +0000 https://textbooks.cs.ksu.edu/extras/02-full-stack/08-knex/index.html We’re going to use the Knex library to connect to our database from the server. We’ll also use it to handle database migrations and seeding. Install Knex We can install Knex using npm inside the server container: # Terminal docker exec -it project-server bash Then we can use npm to install the knex library, along with the pg library for connecting to Postgres databases. This should be done in the /app/server directory inside the container: