Claude Code by Anthropic has quickly become one of the most powerful AI coding tools available. With a single prompt, it can generate complete websites -- from static HTML and CSS pages to full React, Vue, and Next.js applications. But once you have a polished project sitting in a local directory, the next question is obvious: how do you get it live on the internet?
\n193\t\n194\tThis guide walks you through exactly how to take code generated by Claude Code and deploy it to Katika Web Services (KWS). The entire process takes less than five minutes, and you do not need any DevOps experience to follow along.
\n195\t\n196\tWhat Does Claude Code Actually Generate?
\n197\t\n198\tDepending on your prompt, Claude Code can produce several types of web projects. Understanding what you have is the first step toward a successful deployment.
\n199\t\n200\t- \n201\t
- Static HTML/CSS/JS -- The simplest output. You get an
index.htmlfile, one or more stylesheets, and optionally some JavaScript. These files are ready to host as-is with no build step required. \n202\t - React (with Vite or Create React App) -- Claude Code frequently scaffolds React projects using Vite. The source code lives in a
src/directory, and you need to run a build command to produce deployable output in adist/folder. \n203\t - Vue.js -- Similar to React projects, Vue apps generated by Claude Code use Vite by default. The build output lands in
dist/as well. \n204\t - Next.js -- For more complex applications, Claude Code can generate a full Next.js project. When exported as a static site, the output goes to an
out/directory. \n205\t
The key takeaway: if your project uses a framework, you almost always need to run a build step before deploying. We will cover that below.
\n208\t\n209\tStep-by-Step: Deploy on Katika Web Services
\n210\t\n211\tHere is the complete process for getting your Claude Code project live on the web.
\n212\t\n213\tStep 1: Create Your KWS Account
\n214\t\n215\tHead to katikaws.com and sign up for an account. KWS offers a free tier that is perfect for testing your first Claude Code project. No credit card is required to get started. If you need more storage or bandwidth down the road, you can upgrade to one of our paid hosting plans at any time.
\n216\t\n217\tStep 2: Open the Dashboard and Create a New Project
\n218\t\n219\tOnce you are logged in, navigate to your Dashboard. Click Projects in the sidebar, then hit New Project. This is where your site will live.
\n220\t\n221\tStep 3: Name Your Project
\n222\t\n223\tChoose a name for your project. This name becomes your live subdomain automatically -- for example, if you name your project my-portfolio, your site will be accessible at my-portfolio.katikaws.com within seconds of deployment.
Step 4: Build Your Project Locally (If Needed)
\n226\t\n227\tIf Claude Code generated a static HTML site, you can skip this step entirely. For React, Vue, or Next.js projects, you need to produce the optimized build output first. Open your terminal, navigate to the project directory, and run:
\n228\t\n229\tnpm install\n230\tnpm run buildThis will create the deployable files. For Vite-based projects (React or Vue), look for the dist/ folder. For Next.js static exports, check the out/ directory. For Create React App, the output goes to build/.
Step 5: Upload Your Files
\n235\t\n236\tBack in the KWS dashboard, upload your files to the project you created. You have two options:
\n237\t\n238\t- \n239\t
- ZIP upload -- Compress your build output folder into a ZIP file and upload it in one go. KWS will automatically extract the contents. \n240\t
- Individual file upload -- Drag and drop files directly into the file manager if you prefer a more hands-on approach. \n241\t
Important: upload the build output (the contents of dist/, build/, or out/), not the entire source code directory. Your visitors do not need your node_modules/ folder or source files.
Step 6: Your Site Is Live
\n246\t\n247\tKWS auto-detects the framework and build directory structure. Within moments of uploading, your site is live at yourproject.katikaws.com. Open the URL in your browser to verify everything looks correct. That is it -- you have gone from an AI prompt to a live website.
Connecting a Custom Domain
\n250\t\n251\tA subdomain on katikaws.com works well for testing and personal projects, but for anything professional you will want your own domain name. KWS makes this straightforward. You can search for and register a domain directly through our platform, or connect a domain you already own by updating your DNS records to point to your KWS project.
Once connected, your Claude Code site will be served from your custom domain with automatic HTTPS included at no extra cost.
\n254\t\n255\tTips for a Smooth Deployment
\n256\t\n257\tAfter helping hundreds of users deploy AI-generated sites, here are the most common pitfalls and how to avoid them:
\n258\t\n259\t- \n260\t
- Always run the build command first. The number one mistake is uploading the raw
src/directory instead of the compiled output. Browsers cannot run JSX or Vue single-file components directly. \n261\t - Check your
index.htmllocation. Make sure yourindex.htmlfile is at the root of what you upload, not buried inside a subfolder. \n262\t - Test locally before uploading. Run
npx serve dist(or the equivalent for your build folder) to preview the production build on your machine before pushing it to KWS. \n263\t - Watch for hardcoded localhost URLs. Claude Code sometimes generates API calls to
localhost:3000or similar. Search your code forlocalhostand replace those URLs with your actual backend endpoint before building. \n264\t - Use relative paths for assets. If Claude Code generated absolute paths starting with
/, they should work fine. But if you see paths likeC:\\Users\\...or/home/user/..., fix those before deploying. \n265\t
For more detailed guidance on getting started with AI-powered hosting, check out our companion article on getting started with AI hosting on KWS.
\n268\t\n269\tReady to Deploy Your Claude Code Project?
\n271\tSign up for free and get your AI-generated website live in under five minutes. No credit card required.
\n272\t Go to Dashboard\n273\t