This Docker guide and configuration is specifically designed for students of Tech Elevator's Java Cohort.

If you didn't make any changes to the default project structure provided by your Java instructor, and didn't make changes to the vite.config.js and application.properties you could skip all the way to the Installation section.

1. Download and install and run Docker Desktop
2. cd into your capstone repo, type pwd in the Terminal and copy your capstone repo directory.
3. cd back into the dockerizeyourcapstone repo and run:

sh autoinstall.sh

4. Follow the prompts to the end where it will start Docker for you.
5. (Optional) Run the installer in test mode to see what it does without copying any files.

sh autoinstall.sh -test

1. cd into your capstone project
2. Run the command docker compose up
3. After it finishes building, go to http://localhost:5173 in your browser to view your project running.
4. When finished, run the command docker compose down
5. If you make any edits to your code and docker compose up still shows your old page, you may need to run docker compose up --build instead.

This Dockerfile and docker-compose.yml solution was created with a very specific environment in mind: Java final capstone for Tech Elevator Cohort 21 students. It could work with your project as long as the assumptions below are true.

Before manually installing this solution, verify that your project contains these files in this directory structure:

/your-capstone-directory
├── java
│   ├── database
│   │   ├── create.sh
│   │   ├── data.sql
│   │   ├── schema.sql
│   │   ├── drop.sql
│   │   └── user.sql
│   └── src
│       └── main
│           └── resources
│               └── application.properties
├── vue
│   ├── vite.config.js
│   ├── package.json
│   ├── package-lock.json

The Dockerfile files will also verify and modify the contents of these 2 files below:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

# datasource connection properties
spring.datasource.url=jdbc:postgresql://localhost:5432/final_capstone
spring.datasource.name=final_capstone
spring.datasource.username=postgres
spring.datasource.password=postgres1

//jwt properties

server.error.include-stacktrace=never

server.port=9000

Finally, in the /java/database directory, verify that presence of these 4 files and their functionality

1. Download and install Docker Desktop
2. Clone this repo
3. Move the files into your project using the guide below. See: Moving files

/
├── docker-compose.yml 
├── java/
│   └── database/
│       └── DatabaseDockerfile
│   └── JavaDockerfile
├── LICENSE
├── README.md
└── vue/
    └── VueDockerfile

Take the following files in this git project and move them as follows below:

This section was written with the assistance of ChatGPT

Docker Compose orchestrates the setup and interconnection of three main services: the database, Java backend, and Vue frontend. It defines the network (capstone-network), volumes for data persistence, and the configuration for each service.

• Services:
  • Database: Built from DatabaseDockerfile, sets environment variables, maps port 5433, and uses postgres-data volume.
  • Java Backend: Built from JavaDockerfile, exposes port 9000, and connects to the database service.
  • Vue Frontend: Built from VueDockerfile, this service maps port 5173 for web access. It utilizes the vue-node_modules volume, which stores Node.js dependencies separately from the container's filesystem. This approach improves build performance and ensures consistency across development environments. The environment is set to development mode for optimal debugging and live reloading features.
• Network: capstone-network connects all services.
• Volumes: Named volumes like postgres-data and vue-node_modules for data persistence and dependencies.

• Base Image: postgres:12-alpine.
• Initialization: During this phase, SQL files are copied into the container. The dropdb.sql and create.sh files are removed to prevent unwanted execution. The remaining SQL files are then strategically renamed, following a numeric prefix system (01schema.sql, 02data.sql, 03user.sql). This renaming ensures their execution in a specific order, replicating the sequence originally managed by the create.sh script. This ordered execution is crucial for setting up the database schema, inserting initial data, and configuring user permissions correctly.
• Docker Compose Integration: This configuration exposes port 5433 on the host machine, which is mapped to the default PostgreSQL port 5432 inside the container. By mapping to port 5433 externally, it ensures there is no conflict with any existing PostgreSQL server running on the host machine's default port (5432). Additionally, it sets necessary environment variables for the database and utilizes the postgres-data volume for persistent storage of database data.

• Base Image: openjdk:11-slim.
• Setup: Installs Maven, copies project files. Uses sed to dynamically alter application.properties inside the container, replacing the hardcoded database URL with environment variables (${DB_HOST:db} and ${DB_PORT:5432}) for flexible database connectivity.
• Execution: Downloads dependencies, exposes port 9000, and runs the application with Maven.

• Base Image: node:alpine.
• Setup: This step involves installing project dependencies first. Then, it modifies the vite.config.js file using the sed command. Specifically, sed is used to insert a configuration snippet that sets the server host to 0.0.0.0. This adjustment is crucial because, without it, the Vite server would default to localhost, making the website inaccessible from the host machine. Setting the host to 0.0.0.0 ensures the Vite development server can be accessed externally, allowing you to view and interact with your Vue application from your computer's browser.
• Execution: Exposes port 5173 and runs the Vite development server.

This setup guarantees that each part of your application operates independently in a controlled environment, ensuring uniform behavior across different systems and enhancing the ease of transferring and deploying your application to various platforms.

No, it is completely nondestructive and leaves your capstone files alone. After running docker compose up run git status in your repo to verify nothing was edited.

This Docker solution does not require IntelliJ, VS Code, npm, Postgres, or anything else to be installed on your computer. Postgres is not fun to install and setup locally.

Yes and no. Because it is nondestructive, any edits you make to your code won't be reflected on the web browser until you docker compose down and docker compose up again. If you are actively working on the project, you are better off running IntelliJ and npm run dev. This Docker solution is best for showcasing and viewing your project, especially after Tech Elevator where you lose access to your development machine.

In theory, yes, but there would need to be modifications to make it production ready. You'd need to use environment variables and store secrets like usernames and passwords in the cloud provider. You'd also need to rebuild the web application so that it's ready for production. In other words, this Docker setup is designed to let you view and run your capstone project on any machine, but it's not strictly designed for cloud deployment.

Somehow your directory structure is not matching what is expected. It's recommended that you use the autoinstall.sh which will check your directory structure and assumptions prior to copying the Docker files for you.

You may have to rebuild the container and/or delete volumes. Try them one at a time to see if it fixes anything.

docker compose down

docker compose up --build

docker volume ls

docker volume rm [image name]

You have the IntelliJ server running which is preventing Docker from binding to that same port. Stop the server in IntelliJ in addition to stopping the npm server before starting up docker compose.

Please open an issue! I'd love to take a look and problem-solve. Be sure to include what the logs from docker are saying.