Babak final: penerapan ke internet

Dapatkan seluruh aplikasi kamu ke internet – dan lihat kembali perjalanan dari <h1> pertama kamu hingga ke sini.

Langkah terakhir perjalanan

Aplikasi kamu berjalan di localhost, di komputer kamu sendiri. Keahlian terakhir sang Master: mengirimkannya ke alamat sebenarnya. Frontend dan backend diterapkan secara terpisah – itulah alasan kami membangunnya secara terpisah.

Menerapkan frontend (Bereaksi)

Vite dapat mengubah aplikasi kamu menjadi file jadi dengan satu perintah:

npm run build

Ini membuat folder dist/ – HTML biasa, CSS, dan JavaScript. Dan kamu sudah tahu di mana harus meletakkannya: ini adalah situs web statis, seperti di Level 1!

Halaman GitHub – unggah konten dist/ ke repositori, seperti yang kamu ketahui dari Level 1.
Atau lebih mudahnya, Netlify / Vercel – gratis, kamu menghubungkannya ke akun GitHub kamu, dan mereka diterapkan secara otomatis dengan setiap perubahan. Cobalah salah satunya dengan orang tua; pengaturan terpandu akan memandu kamu melaluinya hanya dalam beberapa klik.

Menerapkan backend (Node.js)

Server membutuhkan komputer yang selalu menyala sepanjang waktu. Itulah gunanya layanan seperti Render atau Railway – mereka memiliki tingkatan gratis yang cukup untuk proyek sekolah:

Unggah folder server-saya ke repositorinya sendiri di GitHub (tanpa node_modules – yang terinstal di server secara otomatis).
Di render.com (dengan induk), pilih Baru → Layanan Web, sambungkan repositori GitHub, dan atur: Build Command npm install, Start Command node server.js.
Render akan memberi kamu alamat seperti https://my-server.onrender.com. Coba .../api/messages di browser kamu – API kamu aktif di internet!
Satu detail terakhir: di frontend, ganti setiap http://localhost:3900 dengan alamat server baru, dan terapkan kembali frontend.

⚠️

Sebelum kamu menyebarkan buku tamu ke seluruh dunia, berpikirlah seperti seorang penjaga: siapa pun di internet dapat menemukannya. Simpan pemeriksaan panjang pesan di server (kamu sudah mendapatkannya dari pelajaran terakhir!), jangan pernah menampilkan pesan sebagai HTML mentah (React melindungi kamu dari hal ini secara otomatis – alasan lain untuk menggunakannya), dan setuju dengan orang tua untuk memeriksa buku dari waktu ke waktu. Situs web besar memiliki seluruh tim untuk melakukan hal ini – ini disebut moderasi.

🏆 Selamat, Guru!

Luangkan waktu sejenak untuk melihat kembali di mana kamu memulai:

Level 1: file kosong → <h1>Berhasil!</h1> → seluruh situs web HTML dan CSS di Halaman GitHub.
Level 2: variabel, kondisi, fungsi → mode gelap, galeri, kuis, formulir.
Level 3: terminal, Node.js, React, komponen, status, Express, API → aplikasi full-stack di internet.

Apa yang kamu ketahui sekarang adalah fondasi sebenarnya dari keahlian pengembang web. Bukan versi mainan – fondasi sebenarnya. Alat yang sama, proses yang sama, cara berpikir yang sama seperti di perusahaan sebenarnya.

Ke mana harus pergi selanjutnya?

Beberapa petunjuk yang mengikuti secara alami dari sini:

Database – agar pesan tetap bertahan saat server dihidupkan ulang (SQLite adalah tempat paling ramah untuk memulai).
TypeScript – JavaScript dengan pemeriksaan kesalahan; standar di perusahaan.
Git di terminal – git add, git commit, git push alih-alih mengunggah file secara manual.
Ide kamu sendiri – guru terbaik yang pernah ada. Sebuah aplikasi untuk kelas kamu? Braket turnamen untuk klub kamu? Sekarang kamu tahu cara membangunnya.

✅

Periksa diri kamu (dan selamat tinggal): Frontend dan backend berjalan di alamat publik, dan buku tamu menerima pesan dari seluruh dunia. Kirimkan alamatnya ke keluarga kamu – dan jangan lupa beri tahu mereka bahwa kamu membangun semuanya dengan kedua tangan kamu sendiri. 🚀

Apa yang bisa diambil dari pelajaran ini

Frontend: npm run build → file statis → Halaman GitHub/Netlify/Vercel.
Backend: repositori GitHub → Render/Railway → alamat API publik → ganti localhost di frontend.
Aplikasi publik adalah tanggung jawab: pemeriksaan sisi server dan orang dewasa mengawasi berbagai hal.