Ai Coding Tools

How to Write a Simple Web App with GitHub Copilot in Under 2 Hours

By BTW Team4 min read

How to Write a Simple Web App with GitHub Copilot in Under 2 Hours

Building a web app can feel overwhelming, especially if you’re juggling it as a side project or indie hack. But what if I told you that with the right tools, you could whip up a simple web app in less than two hours? In 2026, GitHub Copilot has come a long way, making coding accessible even for those who aren't seasoned developers. Let’s dive into how you can leverage it to create a functional web app quickly.

Time Estimate: 2 Hours

With GitHub Copilot at your side, you can realistically complete this project in about two hours, assuming you have a basic understanding of web development concepts.

Prerequisites

Before diving in, make sure you have these ready:

  • GitHub Account: To use GitHub Copilot, you'll need an account.
  • Visual Studio Code: This is where you’ll write your code.
  • Node.js: Install Node.js to run your web app locally.
  • Basic HTML/CSS/JavaScript Knowledge: Familiarity with these languages will help you understand the code Copilot generates.

Step-by-Step Guide

Step 1: Set Up Your Environment

  1. Install Visual Studio Code: Download and install it from here.
  2. Install GitHub Copilot: Go to the Visual Studio Code marketplace and install the GitHub Copilot extension. Pricing for Copilot is $10/month or $100/year, which is reasonable for the time it saves.
  3. Create a New Project Folder: Open Visual Studio Code and create a new folder for your web app.

Step 2: Initialize Your Project

  1. Open the terminal in VS Code.
  2. Run npm init -y to create a package.json file.
  3. Install Express.js for server-side functionality:
    npm install express
    

Step 3: Let Copilot Help You Code

  1. Create an index.js File: This will be your main server file.
  2. Start typing const express = require('express'); and watch Copilot suggest the rest of the server setup.
  3. Define your routes. For example, start typing app.get('/', (req, res) => { and let Copilot fill in the response.

Expected Output:

You should have a basic server running on localhost. To test it, simply run:

node index.js

And navigate to http://localhost:3000 in your browser.

Step 4: Add Frontend Components

  1. Create an index.html file in the root directory.
  2. Start writing the basic HTML structure. Copilot will suggest a boilerplate for you.
  3. Add some CSS for styling if desired. Create a styles.css file and link it in your HTML.

Step 5: Run Your App

  1. To see your changes, you can use a simple server like live-server for real-time updates:
    npm install -g live-server
    live-server
    
  2. You should now see your web app live in your browser!

Troubleshooting

  • If Copilot isn’t suggesting code: Make sure you have the extension activated and your cursor is in a code context.
  • Server not starting: Check for syntax errors in your JavaScript files.

What’s Next?

Once your simple web app is up and running, consider these next steps:

  • Add More Features: Integrate a database or user authentication.
  • Deploy Your App: Use platforms like Vercel or Heroku for deployment. Both have free tiers that work well for small projects.

Conclusion: Start Here

Using GitHub Copilot can significantly speed up your development process, making it feasible to build a simple web app in under two hours. If you’re a solo founder or indie hacker looking to get something off the ground quickly, I highly recommend giving it a shot.

Pricing Breakdown for Tools Used

| Tool | Pricing | Best For | Limitations | |--------------------|-------------------------|-------------------------------|--------------------------------------| | GitHub Copilot | $10/mo or $100/yr | Code suggestions | May not always generate perfect code | | Visual Studio Code | Free | Code editor | Requires extensions for advanced features | | Node.js | Free | Backend development | Requires knowledge of JavaScript | | Express.js | Free | Web server framework | Minimal built-in features | | live-server | Free | Local development | Not suitable for production |

What We Actually Use

For our projects, we rely heavily on GitHub Copilot for coding assistance, Visual Studio Code for development, and Node.js with Express for backend functionality. Live-server is a great addition for quick testing.

Follow Our Building Journey

Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.

Subscribe

Never miss an episode

Subscribe to Built This Week for weekly insights on AI tools, product building, and startup lessons from Ryz Labs.

Subscribe
Ai Coding Tools

5 Common Misconceptions About AI Coding Tools and Why They Hold You Back

5 Common Misconceptions About AI Coding Tools and Why They Hold You Back As a solo founder or indie hacker, you might be considering leveraging AI coding tools to boost your produc

Oct 7, 20264 min read
Ai Coding Tools

5 Common Misconceptions About AI Coding Tools That Will Hurt Your Learning

5 Common Misconceptions About AI Coding Tools That Will Hurt Your Learning As a beginner in coding, diving into the world of AI coding tools can feel like stepping into a futuristi

Oct 6, 20263 min read
Ai Coding Tools

10 AI Coding Tools Beginners Overlook in 2026

10 AI Coding Tools Beginners Overlook in 2026 As a beginner in coding, diving into the vast ocean of AI tools can feel overwhelming. While flashy tools often grab the spotlight, ma

Oct 6, 20265 min read
Ai Coding Tools

5 Common Misconceptions About AI Coding Tools That Beginners Believe

5 Common Misconceptions About AI Coding Tools That Beginners Believe As a solo founder or indie hacker, diving into the world of AI coding tools can feel overwhelming, especially i

Oct 5, 20263 min read
Ai Coding Tools

5 Mistakes Every Beginner Makes When Using AI Coding Tools

5 Mistakes Every Beginner Makes When Using AI Coding Tools As a solo founder or indie hacker diving into the world of AI coding tools, it’s easy to get swept up in the excitement o

Oct 4, 20264 min read
Ai Coding Tools

10 Common Misconceptions About AI Coding Tools in 2026

10 Common Misconceptions About AI Coding Tools in 2026 As we dive into 2026, AI coding tools have become a staple in the developer toolkit. However, misconceptions still run rampan

Oct 4, 20264 min read