Basic Full Stack App with Spring Boot, React, and MySQL, all running in Docker containers.
The goal of this project is to demonstrate how Docker can be used to run a full stack application, helping to avoid the "works on my computer" problem, and also to make it easier to test a full stack application without having to install all the dependencies or complex configurations.
Do you speak Español?: 👉 Léeme
The app is a simple full stack application that saves a user's name and email address to a MySQL database.The backend is a Spring Boot application that exposes a REST API. The frontend is a React application that uses the backend API to save and retrieve data from the database.
- Programming Language: Java, JavaScript
- Frameworks: Spring Boot, React
- Database: MySQL
- Database Management: phpMyAdmin
- Containerization: Docker
- Dev Environment: VSCode with dev containers in Zorin OS
You need to have installed Docker, the most easy way to install it is using the Docker Desktop application.
- Clone this repository and enter the folder
git clone [email protected]:jhordyess/dockerized-spring-react-mysql.git
-
Create a
.env
file in the root folder by copying the example from the.env.example
file. -
Then, run the following command:
make
# If you don't have 'make' installed, use:
docker compose up -d
-
After that, open the browser and visit http://localhost/.
-
To remove the containers, use the following commands:
make clean
# If you don't have 'make' installed, use:
docker compose down
Take note that this production configuration is just for testing purposes, and maybe need some changes to be used in a real production environment.
You can use the VSCode dev containers to run the project in a containerized environment.
You need to have installed Docker and VSCode, and the Dev Containers extension.
- Clone this repository
git clone [email protected]:jhordyess/dockerized-spring-react-mysql.git
- Open the project in VSCode
code dockerized-spring-react-mysql
-
Create a
.env
file in the root folder by copying the example from the.env.example
file. -
Open the integrated terminal (Ctrl+Shift+`) and run the following command:
docker compose -f docker-compose.dev.yml up -d
-
Open the command palette (Ctrl+Shift+P) and select the option
Dev Containers: Open folder in Container
. -
Select the folder
backend
and wait for the container to be built. -
Open the integrated terminal (Ctrl+Shift+`) and run the following command:
mvn spring-boot:run
-
For the frontend, open the command palette (Ctrl+Shift+P) and select the option
Dev Containers: Open folder in Container
. -
Select the folder
frontend
and wait for the container to be built. -
Open the integrated terminal (Ctrl+Shift+`) and run the following command:
npm run dev
-
Open the browser and visit http://localhost:5173/
-
Also you can visit http://localhost:81/ to manage the database with phpMyAdmin.
- Add CSS styles to the frontend
If you would like to contribute to the project, open an issue or make a pull request on the repository.
© 2023 Jhordyess. Under the MIT license. See the LICENSE file for more details.
Made with 💪 by Jhordyess