Kickstart your full stack side-project with a Java Spring web server, Postgres database and Vue.js multi-container setup.
- Download and install Docker for your operating system from the Docker Downloads page.
- You can test that docker was successfully installed by opening your Terminal and typing
docker -vand it should tell you the version.
- Click on
Use this templateand clickCreate a new repository - Choose any name for your project repo, or
sideprojectby default git cloneyour new side project repo- Optionally, if you prefer to download this repo as a zip file, click here.
Change your working directory to the new project folder name:
cd [ProjectFolderName]
You can verify you are in the correct location by typing ls and it should be this:
README.md docker-compose.yml vue database java
Start the Docker containers using docker compose:
docker compose up --build
Once the containers are up and running, your Vue.js project should be accessible at http://localhost:5173 in your web browser. You can also view the website on another device on your network, such as a phone, by going to the local IP of your computer. For example http://192.168.100.4:5178.
Now, you have successfully set up your full stack side project with Spring Boot, PostgreSQL, and Vue.js using Docker containers. You can start developing your application by editing the code in the project directory.
Stage all your changes
git add -A
Commit all your changes
git commit -m "Your commit message"
Push your changes to GitHub
git push origin main
Start the containers in detached mode, where it won't take over your terminal. Remove the -d to view the output and run the containers in the foreground.
docker compose up -d
Rebuild the images due to config changes and start the containers.
docker compose up --build
Stop and remove the containers
docker compose down
If you didn't use the -d flag, press Ctrl+C in your terminal to stop the containers.
Restart the containers
docker compose restart
View logs
docker compose logs
List docker services running
docker compose ps
Start a specific service
docker compose up -d <service_name>
Restart a specific service
docker compose restart -d <service_name>
Force containers to be recreated even if their configuration and image haven't changed.
docker compose up -d --force-recreate
Delete all docker images, great for debugging and troubleshooting npm dependencies. Warning, this will delete any custom Postgres data, such as user data.
docker volume prune -a
The data in your Postgres database will persist between docker container restarts and rebuilds. The .sql files in the /database directory will be run only once if no Postgres storage volume is detected.
If you want to change the table structure and publish those in your repo, and have those persist through container rebuilds, you will need to delete the Postgres volume. Warning, this will delete any custom Postgres data, such as user data. To list the volumes:
docker volume ls
To remove the Postgres volume, delete the one with the name postgres-data in it. For example:
docker volume rm sideprojectstarter_postgres-data
You could also just run the prune command to delete all named and anonymous docker images.
docker volume prune -a
The next time you run docker compose up it will rebuild your database structure according to the contents of your .sql files in the /database directory.
The username/password combo for Postgres is initialized in two locations:
./docker-compose.yml
./java/src/main/resources/application.properties
You can change the database name, user and password in these two files:
# application.properties
spring.datasource.url=jdbc:postgresql://${DB_HOST:localhost}:${DB_PORT:5433}/sideprojectdb
spring.datasource.username=postgres
spring.datasource.password=sideprojectpassword
spring.datasource.driver-class-name=org.postgresql.Driver
# docker-compose.yml
environment:
POSTGRES_DB: sideprojectdb
POSTGRES_USER: postgres
POSTGRES_PASSWORD: sideprojectpassword
If you make any changes to the above, you must refer to the instructions above on removing the Postgres volume and starting over. All user data will be deleted.
To connect to the database with PgAdmin, right-click on Server, Register - Server.
| "General" tab | |
| Name | Docker Database |
| "Connection" tab | |
| Host name/address: | localhost |
| Port: | 5433 |
| Username: | postgres |
| Password: | sideprojectpassword |
The database is called sideprojectdb by default, unless you change the name in the instructions above. Make sure to use that instead of postgres.
If you add dependencies to the Vue.js portion of the project, you may have to delete the Docker image and rebuild it.
To list the volumes:
docker volume ls
To remove the node volume, delete the one with the name web-node_modules in it. For example:
docker volume rm sideprojectstarter_vue-node_modules
You could also just run the prune command to delete all named and anonymous docker images.
docker volume prune -a
The next time you run docker compose up it will run npm install and ensure that the new dependencies are included in your node_modules directory.
If you are actively developing a project, you will likely want to only use Docker for Postgres and Vue, and actively develop the Java application in a dedicated IDE.
To start your db and vue-web services only without Java, use this command:
docker compose up db vue-web
This will start the database and Vue containers, leaving you to develop and run the Java service in a dedicated IDE like IntelliJ.
The IntelliJ IDEA Community Edition is free to download and recommended for actively developing this side project.
- Open IntelliJ and go to File -> Open
- Select
pom.xmlin the to open the project - Navigate to
/src/main/java/com.sideproject.starter/and double clickSideProjectApplicationto open it. - If it says "Project JDK is not defined" then click on "Setup SDK", click Download JDK... and select version 11.
- Click on the run button in the top right corner to run the Java server.