Skip to main content

Command Palette

Search for a command to run...

development setup

Published
3 min read
A

I'm a DevOps Engineer

Install Dependencies

Run these commands ek hi baar:

sudo apt update
sudo apt install openjdk-17-jdk mysql-server git -y
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

Check karlo versions:

java -version
node -v
mysql --version

Prerequisites

Make sure you have the following installed:

  • Java 17+ (for Spring Boot backend)

  • Maven (for building Spring Boot backend)

  • Node.js 18+ and npm (for React frontend)

  • MySQL 8+ (or any compatible database)

  • Docker & Docker Compose (optional for containerized setup)

  • Git

Check installation:

java -version
mvn -v
node -v
npm -v
mysql --version
docker -v
docker-compose -v
git --version

2️⃣ Clone the Repository

Fork and clone the project:

git clone https://github.com/YOUR_USERNAME/chattingo.git
cd chattingo

Project structure:

chattingo/
├── backend/
├── frontend/
└── README.md

3️⃣ Backend Setup (Spring Boot)

3.1 Navigate to backend

cd backend

3.2 Environment Variables

Copy example environment file:

cp .env.example .env

Edit .env with your database and server port settings:

DB_URL=jdbc:mysql://localhost:3306/chattingo
DB_USERNAME=root
DB_PASSWORD=your_password
SERVER_PORT=8081

Note: Spring Boot reads SERVER_PORT from .env.

3.3 Run Backend

Option 1: Load .env and run

export $(grep -v '^#' .env | xargs)
./mvnw spring-boot:run

Option 2: Command line override (no need to change .env)

./mvnw spring-boot:run -Dspring-boot.run.arguments="--server.port=8081"

Backend should now run on:

http://localhost:8081

4️⃣ Frontend Setup (React)

4.1 Navigate to frontend

cd ../frontend

4.2 Environment Variables

Copy .env.example to .env and update API URL:

REACT_APP_API_URL=http://localhost:8081

4.3 Install Dependencies

npm install

4.4 Run Frontend

npm start

Frontend should now run on:

http://localhost:3000

5️⃣ Database Setup

Make sure your MySQL database is running. Create a database:

CREATE DATABASE chattingo;

Spring Boot will automatically create tables via Hibernate when the backend runs.


6️⃣ Common Issues & Fixes

IssueSolution
Port 8080 already in useUse SERVER_PORT=8081 in .env or --server.port=8081 in command line
Frontend can't reach backendCheck REACT_APP_API_URL matches backend URL & port
MySQL connection errorVerify username, password, and database URL in .env

7️⃣ Optional: Dockerized Setup

If you want to run the full project in Docker, use Docker Compose:

docker-compose up --build

It will start frontend, backend, and database automatically.


8️⃣ Tips for Development

  • Always start backend first, then frontend.

  • For port changes, use environment variables instead of hardcoding.

  • Check logs in terminal for errors (./mvnw spring-boot:run or npm start).

  • Commit your changes frequently when working on new features.


✅ Conclusion

Now you have a full development environment for Chattingo, with backend on port 8081 and frontend on port 3000. You can start coding new features, testing APIs, or experimenting with the database.

applicaiton .prpperites

spring.datasource.url=${SPRING_DATASOURCE_URL:jdbc:mysql://localhost:3306/chattingo_db?createDatabaseIfNotExist=true}
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=Root@123
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

# JWT secret (fallback for local dev; override via env: JWT_SECRET)
jwt.secret=ThisIsASecureJwtSecretKeyWith32Chars

# CORS Configuration (can be overridden by environment variables)
cors.allowed.origins=${CORS_ALLOWED_ORIGINS:http://localhost:3000,http://localhost}
cors.allowed.methods=${CORS_ALLOWED_METHODS:GET,POST,PUT,DELETE,OPTIONS}
~                                                                         ~                                                                         ~