Sesi 7: Frontend Development
Setup React, Tailwind CSS, Axios, & Struktur Project SaaS
1. Inisialisasi Project React (Vite)
Vite adalah build tool yang jauh lebih cepat dari Create-React-App. Jalankan perintah ini di terminal di dalam folder publik.
Path: /www/wwwroot/ao.baktimakmur.com/
# Hapus folder lama jika ada
rm -rf frontend
# Buat project baru dengan Vite + React + TypeScript
npm create vite@latest frontend -- --template react-ts
# Masuk folder
cd frontend
# Install Dependencies
npm install
# Install Tailwind CSS (Untuk styling premium)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# Install Axios (Untuk komunikasi API)
npm install axios
# Install React Router & Icons
npm install react-router-dom lucide-react
2. Konfigurasi Tailwind CSS
Edit file tailwind.config.js di dalam folder frontend/.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: '#0f172a', // Warna Brand BPRS
accent: '#3b82f6',
}
},
},
plugins: [],
}
Tambahkan directive Tailwind ke frontend/src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply bg-gray-50 text-slate-800;
}
3. Struktur Folder Frontend
Buat folder-folder berikut di dalam frontend/src/ untuk menjaga kerapian SaaS.
cd src
mkdir -p api components pages context utils
Struktur Akhirnya akan terlihat seperti ini:
- src/
- api/ -- Koneksi ke Backend (Axios)
- components/ -- Reusable UI (Button, Input, Card)
- context/ -- AuthContext (Login State)
- pages/ -- Halaman Utama (Dashboard, Loan, Customer)
- App.tsx
- index.css
4. API Client (axios)
Buat file frontend/src/api/client.ts. Ini akan menghandle token otomatis.
import axios from 'axios';
const API_URL = import.meta.env.VITE_API_URL || "http://localhost:8000/api/v1";
const apiClient = axios.create({
baseURL: API_URL,
headers: {
"Content-Type": "application/json",
},
});
// Interceptor: Menambahkan Token ke setiap request otomatis
apiClient.interceptors.request.use(
(config) => {
const token = localStorage.getItem("access_token");
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => Promise.reject(error)
);
export default apiClient;
5. Component: Login Page
Buat file frontend/src/pages/Login.tsx.
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import apiClient from '../api/client';
export default function Login() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const navigate = useNavigate();
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
try {
const response = await apiClient.post('/auth/login', { username, password });
localStorage.setItem('access_token', response.data.access_token);
navigate('/dashboard'); // Redirect ke dashboard setelah login
} catch (err: any) {
setError('Login Gagal: Periksa Username/Password');
}
};
return (
);
}
BPRS Login
{error &&{error}
}
6. Jalankan Frontend (Development Mode)
Sekarang kita coba jalankan frontend di mode development untuk melihat tampilan Login.
cd /www/wwwroot/ao.baktimakmur.com/frontend
npm run dev
Buka terminal aaPanel, Anda akan melihat output:
VITE v5.x.x ready in X ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose