0Pricing
Vibe Coding · Pelajaran

Domain dan Lingkungan Kustom

Gunakan nama Anda sendiri dan pengaturan yang aman.

Domain dan Lingkungan Kustom adalah pelajaran Vibe Coding gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vibe Coding, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vibe Coding mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Make It Yours

Your app is live at my-app.vercel.app — great start! But to look professional, you want your own name, like myapp.com.

You also need a safe place to store secret settings (like API keys) without putting them in your code. That's what environments are for.

This lesson covers both: custom domains and environment variables — two finishing touches that make your app feel real.

What Is a Domain?

A domain is the human-friendly name people type to reach your app, like google.com or myapp.com.

The free .vercel.app or .netlify.app address works perfectly — but a custom domain:

  • Looks more trustworthy and professional.
  • Is easier to remember and share.
  • Makes your project feel like a real product.

You buy a domain once (often $10–15/year) from a registrar like Namecheap, GoDaddy, or directly through Vercel.

Connecting Your Domain

Once you own a domain, connecting it is just a few clicks:

  • In Vercel or Netlify, open your project's Domains settings.
  • Type your domain (e.g. myapp.com) and add it.
  • The host shows you DNS records to set at your registrar.
  • Save those records, wait a few minutes, and your domain goes live.

If buying through Vercel itself, this is even simpler — it's all connected automatically.

DNS Without the Headache

DNS (Domain Name System) is like the internet's phone book — it maps your domain name to your app's host. It can look intimidating, but you rarely touch it directly.

The host tells you exactly which records to add. If anything looks confusing, paste it to AI and let it translate the steps into plain actions.

I bought myapp.com on Namecheap and deployed my app on Vercel.

Vercel told me to add these DNS records:
  Type: A    Name: @    Value: 76.76.21.21
  Type: CNAME    Name: www    Value: cname.vercel-dns.com

Explain in beginner terms what these records do, and give me click-by-click steps to add them in Namecheap.

HTTPS Comes Free

You may have noticed the padlock icon in your browser's address bar. That's HTTPS — it encrypts traffic so data is safe.

In the past, setting this up was painful. Today, Vercel and Netlify add HTTPS automatically to every domain, including custom ones, for free.

You don't configure anything. Your myapp.com will get the secure padlock on its own. One less thing to worry about.

What Are Environments?

An environment is a context your app runs in, with its own settings. Most apps have two:

  • Development: on your laptop, while you build and test.
  • Production: the live version real users see.

Why separate them? You might use a test database while building and the real one in production. Keeping them apart means experiments never break the live app.

Environment Variables

An environment variable is a named setting your app reads at runtime — instead of hard-coding a value, you store it outside the code.

Common examples: API keys, database URLs, feature flags. In JavaScript, you read them like this:

// Reading an environment variable in JavaScript
// (process.env holds your environment settings)
const apiUrl = process.env.API_URL || "https://api.example.com";
const isProd = process.env.NODE_ENV === "production";

console.log("Calling API at:", apiUrl);
console.log("Running in production?", isProd);

Why Keys Don't Belong in Code

Imagine pasting your secret API key right into your code, then pushing it to GitHub. Now anyone who sees your repo has your key — they could run up huge bills or steal data.

Environment variables solve this. The secret lives in your host's settings, never in the code. Your repo stays safe to share.

  • Bad: const key = "sk-live-abc123..." in your code.
  • Good: const key = process.env.API_KEY with the value stored on the host.

Setting Variables on Your Host

Both Vercel and Netlify have a simple panel for this:

  • Open your project's Settings → Environment Variables.
  • Add a name (like API_KEY) and its value.
  • Choose which environment it applies to (production, preview, development).
  • Save — then redeploy so the app picks it up.

Now your code reads process.env.API_KEY and the host fills in the real secret at runtime. Safe and clean.

Let AI Set It All Up

Domains and environment variables are exactly the kind of setup where AI shines. Describe your situation and let it produce a checklist tailored to you.

My app is deployed on Vercel. I want to finish setting it up properly.

Help me with two things, step by step:
1. Connect my custom domain "myapp.com" (I bought it on GoDaddy).
2. Move my OpenAI API key out of my code and into a Vercel environment variable, then read it safely in my JavaScript.

Give me a clear, numbered checklist for a beginner.

Keep a .env File Locally

While building on your laptop, you store the same variables in a special file called .env. It sits in your project but is never pushed to GitHub.

A .env file looks like this:

  • API_KEY=sk-test-12345
  • API_URL=https://api.example.com

Crucially, you add .env to a file called .gitignore so Git skips it. Ask AI: "Add a .env file and make sure Git ignores it." The local file feeds development; the host's panel feeds production.

Quick Check

Domains and secrets — two pro touches. Let's confirm the key idea.

Recap: Polished and Secure

Your app now feels like a real product:

  • A custom domain replaces the default link — just add it and set DNS records.
  • HTTPS (the secure padlock) is added free and automatically.
  • Environments separate development from production.
  • Environment variables keep secrets out of your code — set them on the host and in a git-ignored .env locally.
  • AI can generate a tailored setup checklist for all of it.

Next: shipping updates to your live app safely, without breaking things.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Domain dan Lingkungan Kustom” gratis?

Ya — teks lengkap “Domain dan Lingkungan Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vibe Coding, upgrade ke CoddyKit PRO. Kursus Vibe Coding mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Domain dan Lingkungan Kustom”?

Gunakan nama Anda sendiri dan pengaturan yang aman. Kamu berlatih Vibe Coding dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vibe Coding?

Tidak diperlukan pengalaman sebelumnya. Vibe Coding di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Domain dan Lingkungan Kustom” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vibe Coding ini?

Ya. Setiap pelajaran Vibe Coding menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Makna Deployment
  2. Deployment ke Vercel atau Netlify
  3. Domain dan Lingkungan Kustom
  4. Memperbarui Aplikasi yang Sedang Berjalan
← Kembali ke Vibe Coding