scripts": { "start": "node server.js", "dev": "nodemon server.js" } ``` Buat fail `.env` (pilihan): ``` PORT=5000 ``` --- ## ⚛️ **Langkah 2: Membina Frontend (React)** Kembali ke direktori utama: ```bash cd .. npx create-react-app client cd client ``` Edit `src/App.js`: ```javascript // client/src/App.js import React, { useState, useEffect } from 'react'; import './App.css'; function App() { const [items, setItems] = useState([]); const [newItem, setNewItem] = useState(''); useEffect(() => { fetch('/api/items') .then(res => res.json()) .then(setItems) .catch(console.error); }, []); const addItem = async (e) => { e.preventDefault(); if (!newItem.trim()) return; try { const res = await fetch('/api/items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: newItem }), }); const item = await res.json(); setItems([...items, item]); setNewItem(''); } catch (err) { console.error(err); } }; return ( <div className="App"> <h1>Senarai Item</h1> <ul> {items.map(item => <li key={item.id}>{item.name}</li>)} </ul> <form onSubmit={addItem}> <input type="text" value={newItem} onChange={(e) => setNewItem(e.target.value)} placeholder="Nama item baru" /> <button type="submit">Tambah</button> </form> </div> ); } export default App; ``` Dalam `client/package.json`, tambah baris berikut untuk memudahkan panggilan API semasa pembangunan: ```json "proxy": "http://localhost:5000" ``` --- ## 🧪 **Langkah 3: Uji Secara Tempatan** - Terminal 1 (backend): `cd server && npm run dev` - Terminal 2 (frontend): `cd client && npm start` - Buka `http://localhost:3000` – anda sepatutnya dapat melihat dan menambah item. --- ## 📦 **Langkah 4: Sedia untuk Git dan GitHub** ### 4.1 Buat fail `.gitignore` di root projek ```gitignore # dependencies node_modules/ package-lock.json yarn.lock # environment .env .env.local # build dist/ build/ # logs *.log npm-debug.log* ``` ### 4.2 Initialize Git dan commit ```bash git init git add . git commit -m "Initial commit: React + Node.js + Express" ``` ### 4.3 Cipta repositori di GitHub **Kaedah 1 – melalui laman web:** - Log masuk ke GitHub, klik **+** → **New repository** - Nama repositori: `codepaul` (atau apa‑apa nama) - Jangan pilih mana‑mana pilihan inisialisasi - Klik **Create repository** **Kaedah 2 – menggunakan GitHub CLI:** ```bash gh repo create codepaul/codepaul --public --source=. --remote=origin --push ``` ### 4.4 Sambungkan repositori tempatan ke GitHub ```bash git remote add origin https://github.com/codepaul/codepaul.git git branch -M main git push -u origin main ``` Gantikan URL dengan repositori anda. --- ## 🔄 **Langkah 5: CI/CD dengan GitHub Actions** Buat direktori `.github/workflows` dan fail `ci-cd.yml`: ```yaml # .github/workflows/ci-cd.yml name: CI/CD Pipeline on: push: branches: [ main ] pull_request: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '18' - name: Install backend dependencies working-directory: ./server run: npm ci - name: Install frontend dependencies working-directory: ./client run: npm ci - name: Build frontend working-directory: ./client run: npm run build - name: Run backend tests (jika ada) working-directory: ./server run: npm test || echo "No tests yet" - name: Run frontend tests working-directory: ./client run: npm test -- --watchAll=false || echo "No tests yet" ``` Commit dan push fail ini: ```bash git add .github/ git commit -m "Add CI/CD workflow" git push ``` Sekarang, setiap push ke `main` akan menjalankan pipeline. Anda boleh melihatnya di tab **Actions** repositori GitHub. --- ## 🚀 **Langkah 6: Deployment (Pilihan)** ### 6.1 Deploy backend ke [Render](https://render.com) atau [Railway](https://railway.app) - Buat akaun dan sambungkan repositori GitHub. - Tetapkan arahan mula: `npm start` (dalam direktori `server`). - Tetapkan pemboleh ubah persekitaran jika perlu. ### 6.2 Deploy frontend ke [Vercel](https://vercel.com) atau [Netlify](https://netlify.com) - Import repositori GitHub, tetapkan root direktori ke `client`. - Pastikan pemboleh ubah `REACT_APP_API_URL` ditetapkan ke URL backend yang telah dideploy. ### 6.3 (Lanjutan) Integrasi deployment dalam GitHub Actions Anda boleh menambah langkah selepas `build` untuk deploy automatik menggunakan token rahsia (GitHub Secrets). --- ## 📄 **Langkah 7: Dokumentasi dan Lesen** ### 7.1 Edit `README.md` di root projek ```markdown # codepaul – Full‑Stack React + Node.js + Express Aplikasi contoh dengan React frontend, Node.js/Express backend, dan CI/CD menggunakan GitHub Actions. ## Teknologi - React (create‑react‑app) - Node.js + Express - GitHub Actions ## Cara menjalankan 1. Klon repositori 2. Pasang dependencies: `cd server && npm install` dan `cd client && npm install` 3. Jalankan backend: `cd server && npm run dev` 4. Jalankan frontend: `cd client && npm start` 5. Buka http://localhost:3000 ## CI/CD Setiap push ke `main` akan menjalankan pipeline GitHub Actions (lihat tab Actions). ## Lesen MIT ``` ### 7.2 Tambah lesen MIT Buat fail `LICENSE` dan salin teks dari [https://opensource.org/licenses/MIT](https://opensource.org/licenses/MIT). Gantikan tahun dan nama. --- ## 🎁 Bonus: Integrasi SLSA (Jika Diperlukan) Daripada perbincangan sebelum ini, anda boleh menambah **SLSA Level 3 provenance** menggunakan workflow `generator-generic-ossf-slsa3-publish.yml`. Contohnya, dalam fail workflow yang sama, selepas langkah build, anda boleh panggil reusable workflow tersebut untuk menjana dan menandatangani provenance. Contoh potongan: ```yaml provenance: needs: build uses: slsa-framework/slsa-github-generator/.github/workflows/generator-generic-ossf-slsa3-publish.yml@v1.7.0 with: artifact-path: ./client/build # laluan ke artifak yang ingin dibuktikan permissions: id-token: write contents: read actions: read ``` Ini memerlukan konfigurasi tambahan dan hanya relevan jika anda ingin memenuhi piawaian SLSA. --- ## ✅ **Semua Sedia!** Kini anda mempunyai: - Aplikasi React + Node.js/Express yang berfungsi sepenuhnya. - Repositori GitHub dengan kod sumber. - Pipeline CI/CD automatik. - Dokumentasi dan lesen. Anda boleh mengklon repositori ini di mana‑mana mesin dan mula membangun dengan segera. Jika ada sebarang soalan atau ingin menambah ciri seperti pangkalan data, autentikasi, atau ujian, beritahu saya – saya sedia membantu! **Selamat membangun, codepaul!** 🚀

Commits

Commits on Mar 16, 2026

Create Github