How to Deploy a Vibe Coded Project

How to Deploy a Vibe Coded Project

Vibe coding is the act of using an LLM to code something using plain language. With vibe coding, builders let the AI do most of the work, while they supply the ideas. Previous articles have discussed the definition of vibe coding, the pros and cons, and how you can get started vibe coding with ChatGPT prompts or an agent. This article will talk about what the next steps might look like after you've coded up something new.

Many vibe coders out there are professional coders already, using an AI-driven approach. These coders understand the basics of code creation and deployment. They are just looking for something to help them create the boilerplate (or boring code) for them so they can get to the more interesting parts of creation. They might be using vibe coding to make something they're passionate about, or creating professionally, using the computer as a kind of sounding board to validate their ideas.

If you're one of those vibe coders, you might already be an experienced builder. You already know the basics of how to deploy and share your work, and you might have begun your project with the end goal in mind. But some vibe coders are learning about these things for the first time, and are just looking for an outlet to share their work with the world. Maybe you have created a site or game that's running locally on your computer, and don't know how to get a web site that is actually on the web. Or, maybe you are thinking about starting a small business, using an app to reach users, and want to move from talking to the AI to monetizing your work.

This article will look at three different possibilities for your vibe-coded project. Depending on the project you've made, this article should serve as a starting point to think about how to move from code to completion. It will break this down by project type, starting with the simplest project first, then moving into things that are a bit more challenging.

Web Sites

It used to be that making a new web site was as simple as putting together HTML and a few images. But modern web sites use modern frameworks. If you don't know anything at all about web dev, your vibe coding tool probably suggested a framework for you to use. Next.js and Astro seem to be very popular choices, as well as incorporating Tailwind CSS.

But then what? Maybe your AI has helped you create a web site that you think is clean, cool, and fresh, and it has all the content you need on it. But you still have to consider hosting: getting that site up on the web for other people to see.

One option is to deploy to the cloud, using services like AWS and Azure. But cloud hosting can get expensive, and there's a lot to learn if you aren't familiar with these tools, so this might not be the best option for vibe coders. However, if you want to take that road and take advantage of everything a cloud host has to offer, an AI can walk you through the basics of deployment.

Next.js is designed to work with Vercel. This is currently the top suggestion for vibe coder deployments, so your agent might walk you through this process. Vercel can help you deploy with a built-in CLI, using many popular suggested frameworks. Vercel also has a feature called "Deploy Previews" which can help you see your site using a new temporary URL so you know what you are deploying.

If you're familiar with Git, GitHub Pages offers a manageable option for deployment. All you need for GitHub Pages is a public repository on GitHub. GitHub Pages can provide a live URL where your website will be publicly accessible within a few minutes of publishing. They also support custom domains and more.

Cloudflare is a tool that can be useful for blocking bots and scrapers from your site, but they also offer a hosting option as well. This does require using Git as above, connecting your Cloudflare account to a GitHub or GitLab account.

Overall, getting your site on the web is pretty straightforward using one of these tools. But you will have to pay attention to the instructions from your LLM to get your web app hosted for the world if you're a beginner.

Game Projects

Indie game development is more accessible now than ever in a lot of ways. If you have a game idea you've always wanted to create, AI coding tools can help you prototype and achieve your idea. You might want your game to be a hit, or maybe just to create something that speaks to you and share it with a few friends.

Depending on your game needs, you might use a free engine like Unity or Godot to create your game. But it's best to start with a small project if this is your first time making a game. HTML5 Canvas will let you prototype web-based games, and is an easy way to vibe code to your first basic game project.

If your game is self-contained and packaged up, or runs on the web, consider Itch.io as a distribution method. It's free and easy to make an account, and you can create custom pages for any game you make.

One warning: the use of AI-created art assets, and AI code, is controversial in the game development world right now. Don't let that stop you from trying to create your vision. But also, don't be surprised if gamers overlook your project if AI art assets were involved. It can help to network with artists to create bespoke art assets that are unique. That will also help make your game stand out from the crowd if you want to sell it on marketplaces like Steam.

Steam and Itich.io both require that AI use in games is disclosed when you are distributing games on these platforms, so check their documentation for more information.

But, if this is your first time coding, don't be discouraged from giving it a try!

If your game is designed to run on mobile devices and you want to put your game in the app store, read on.

Making Apps

Time for a tough reality check. Are you sure you want to make an app?

If your app doesn't strictly need deep hardware access (like background Bluetooth scanning or advanced AR cameras), you should consider a Progressive Web App (PWA) using Next.js or Vite. Instead of building a native app, you build a web site that is optimized for mobile screens.When a user visits the site on their phone, they get a prompt to "Add to Home Screen." It saves an icon to their phone, hides the browser address bar, and feels exactly like a real app. Using this method, you completely bypass Apple and Google's strict app approval processes, avoid their 15-30% store fees, and can update your app instantly whenever you want without waiting for a review cycle.

However, if you want to create an app store app, you might be in for a tough road. You have to decide if you want to code your app native to Android or iOS, or if you want to build a cross-platform solution. Also, you'll have to deal with app store submission requirements. On iOS and on Android this requires descriptions for your app, icons, and testing on multiple devices for compatibility. AI and available tools can help with some of this, but know what you're getting into.

If your app, or your vibe coded mobile web site, needs login or authentication, consider using Twilio Verify. Verify can send a 6-digit text or WhatsApp code to your user to authenticate the user's device. It protects against bot fraud, and makes logging in seamless on a phone.

Conclusion

If you're just beginning your builder journey, and using AI to empower your vision, you're in good company. But there's a big tech ecosystem out there. There are a lot of steps and knowledge between talking to your first coding agent, writing your first prompt, and finally getting your creation distributed to other users.

Don't be afraid to experiment! And more importantly, don't be afraid to learn. You might discover that creating with coding tools is easier than you think. Twilio is here to help you discover the magic of building — no matter where you are on your code creation journey.

Amanda Lange is a .NET Engineer of Technical Content. She is here to teach how to create great things using C# and .NET programming. She can be reached at amlange [ at] twilio.com.