[an error occurred while processing this directive]
MODULE 5

Making It Real

Deploy to the actual internet.

Spoons: High
Time: 60–120 min
Done when: your project is published on a real URL you can share.

Up until now, everything you\'ve built has lived inside Claude\'s chat window. Artifacts are great for prototyping, but they\'re not real. Close the tab and they\'re gone. Nobody else can use them.

This module changes that. We're going to take what you built and put it on the actual internet, with a real URL that real people can visit.

This is where it stops being a prototype and starts being a product.

What We're Doing

The journey from "artifact in Claude" to "app on the internet" has three steps:

  1. Set up GitHub
    Create a place for your code to live permanently. This is your project's home.
  2. Set up Claude Code
    Graduate from claude.ai to the more powerful terminal version that creates real files.
  3. Deploy
    Push a button and watch your app appear on the internet with a real URL.

Fair warning: This module has more setup than the others. There are accounts to create, things to install, and new interfaces to navigate. It might take 30-60 minutes the first time. That's normal. You only do this setup once, and then you can deploy as many apps as you want.

Step 1: GitHub Setup

GitHub is where your code will live. Think of it as Google Drive, but for code. It\'s free, it\'s where all developers keep their work, and it's required for deployment.

  1. Go to github.com
    Open your browser. Navigate to github.com.
  2. Click Sign Up
    Use your real email. Pick a username you won't be embarrassed by in two years.
  3. Verify your email
    Check your inbox and click the verification link. If you don\'t see it, check your spam folder or use GitHub\'s "Resend verification email" option.
  4. Skip the personalization
    GitHub will ask you questions. Skip them or answer quickly - they don't matter.

My GitHub username is:

My GitHub email is:

That\'s it for now: You don\'t need to create a repository yet. You don\'t need to learn Git commands. You don\'t need to understand how GitHub works. You just need an account. Claude Code will handle the rest.

Didn\'t get the verification email? Check your spam folder first. If it\'s truly missing, go back to GitHub settings and click "Resend verification email." GitHub can sometimes take a few minutes, so wait 5 minutes before resending.

Step 2: Claude Code Setup

Claude Code is the command-line version of Claude. Instead of chatting in a browser, you chat in your terminal. The big difference: it creates real files on your computer that you can deploy.

  1. Open your terminal
    On Mac: Search for "Terminal" in Spotlight. On Windows: Search for "PowerShell" or "Command Prompt".
  2. Install Claude Code
    Visit https://claude.com/claude-code or the GitHub repository at https://github.com/anthropics/claude-code for current installation instructions for your operating system. It will ask you to paste a command into your terminal.
  3. Log in
    Claude Code will ask you to authenticate. Follow the prompts - it will open a browser window.
  4. Create a project folder
    Navigate to where you want your project to live and create a folder. Claude Code will work inside this folder.

Creating a project folder (copy these commands):

cd ~/Documents mkdir my-app cd my-app

If the terminal is scary: You\'re typing commands instead of clicking buttons. That\'s the only difference. If something goes wrong, you can just close the terminal and start over. You can't break your computer by typing wrong things here.

Moving from Artifact to Claude Code

You have a working artifact in claude.ai. Now we need to recreate it in Claude Code so we have real files to deploy.

  1. Open your artifact conversation
    Go back to the claude.ai chat where you built your working prototype.
  2. Copy your final prompt
    Find the message where you described what you wanted. Copy it, or write a cleaner version based on what you learned.
  3. Start Claude Code in your project folder
    In your terminal, make sure you're in your project folder, then type "claude" and hit enter.
  4. Send this message
    Paste the script below, then add your project description.

Your opening message for Claude Code:

I have a working prototype I built as an artifact in claude.ai. Now I want to create it as real files I can deploy.

Please:

1. Create all the necessary files in this folder

2. Set up a proper project structure

3. Make sure it's ready to deploy to Vercel or Netlify

4. Tell me when you're done and what files you created

Here's what the app does:

[PASTE YOUR PROJECT DESCRIPTION]

What happens next: Claude Code will create files in your project folder. You\'ll see it thinking and working. When it\'s done, you\'ll have actual code files on your computer - not just a preview in a chat window. You can open these files in any text editor if you're curious, but you don't have to.

Creating Your Repository

Claude Code created your files. Now we need to save them to GitHub so we can deploy them.

Ask Claude Code to do this:

Say this to Claude Code:

Can you create a GitHub repository for this project and push all the files to it? Call it [your-project-name]. Make it public so I can deploy it.

Claude Code will:

If it asks for permissions: The first time you do this, Claude Code might ask to connect to your GitHub account. It will give you a link to review and authorize. Only proceed if you recognize the app and you're comfortable with the access requested.

When Claude Code is done, it will give you a URL to your repository. It will look something like: github.com/yourusername/your-project-name

My repository URL is:

Step 3: Deployment

Your code is on GitHub. Now we put it on the internet. We\'re using Vercel because it\'s free, fast, and requires almost no configuration.

  1. Go to vercel.com
    Open vercel.com in your browser.
  2. Sign up with GitHub
    Click "Sign Up" and choose "Continue with GitHub." This connects your accounts.
  3. Import your repository
    Vercel will show you your GitHub repositories. Find the one you just created and click "Import."
  4. Click Deploy
    Vercel will auto-detect your project settings. Just click "Deploy." Wait about 60 seconds.
  5. Get your URL
    When it\'s done, Vercel gives you a URL like yourproject.vercel.app. That\'s your live app.

That's it: Your app is now live on the internet. Anyone with the link can use it. When you make changes and push them to GitHub, Vercel automatically updates your live site. You never have to manually deploy again.

My live URL is:

What Just Happened

You just deployed an app to the internet. Let's make sure you understand what you did (in case you need to do it again):

GitHub is where your code lives. It's like a cloud backup that also tracks every change you make.

Claude Code is how you create and modify files. It's Claude, but it writes to your actual computer instead of showing previews.

Vercel is what puts your code on the internet. It watches your GitHub repo and automatically deploys whenever you push changes.

The flow from now on: Want to change your app? Open Claude Code, tell it what to change, then say "push to GitHub." Vercel will automatically deploy the update within about 60 seconds. You never have to touch the Vercel dashboard again unless you want to.

The magic phrase for updates:

I made some changes. Can you commit these and push to GitHub?

When Things Go Wrong

Deployment has more moving pieces, so more can go wrong. Here's how to fix common issues:

Problem: Vercel deployment failed
Fix: Click on the failed deployment in Vercel to see the error. Copy the error message and paste it to Claude Code: "My deployment failed with this error: [paste error]. Can you fix it?"

Problem: I can't find my repository in Vercel
Fix: Make sure you signed into Vercel with the same GitHub account where your repo lives. You might need to click "Adjust GitHub App Permissions" to give Vercel access.

Problem: The site loads but looks broken
Fix: Tell Claude Code: "My site deployed but it looks broken. Here's the live URL: [url]. Can you check what went wrong and fix it?"

Problem: Claude Code can't push to GitHub
Fix: You probably need to authorize Claude Code with GitHub. Ask Claude Code: "I'm having trouble pushing to GitHub. Can you help me set up authentication?"

The nuclear option: If everything is broken and you can\'t figure it out: delete the Vercel project, delete the GitHub repository, start a new Claude Code conversation, and do the whole process again from scratch. Sometimes it\'s faster than debugging. This is allowed.

Deployment Checklist

Everything you need to check off to go from artifact to live app.

Accounts

Project Setup

Deployment

My live app URL:

My GitHub repo URL:

Date deployed:

Module 5 Complete

Your app is live.

On the actual internet.

With a real URL you can share.

You built something. And you shipped it.

What\'s next - Module 6: Module 6 is called "Now What?" and it covers life after your first deployment. How to maintain your app, how to add features, how to handle when things break, and how to think about what to build next. You\'re not just someone who built an app once - you're someone who can build apps whenever you want.

Send that URL to someone. Show them what you made.

← Previous: The Feedback Loop Next: Now What? →
[an error occurred while processing this directive]