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

If you're a solo founder or side project builder, you know that time is your most precious resource. The idea of writing a web app from scratch can feel daunting, especially if you're not a seasoned developer. But what if I told you that you could leverage AI to help you build a simple web app in under 2 hours? Enter GitHub Copilot. In this guide, I’ll walk you through how to use Copilot effectively, share some honest feedback about its limitations, and help you get your app up and running fast.

Prerequisites: What You Need Before You Start

Before diving in, make sure you have the following:

• GitHub Account: You’ll need this to access GitHub Copilot.
• Visual Studio Code: This is where you’ll write your code, and Copilot integrates seamlessly with it.
• GitHub Copilot Subscription: Pricing starts at $10/month for individuals, with a free trial available.

Step-by-Step: Building Your Simple Web App

Step 1: Set Up Your Development Environment

1. Install Visual Studio Code: Download and install it if you haven't already.
2. Install GitHub Copilot: Go to the Extensions tab in VS Code, search for GitHub Copilot, and install it.

Step 2: Create a New Project

1. Open VS Code and create a new folder for your project.
2. In the terminal, run npm init -y to initialize a new Node.js project.
3. Install Express by running npm install express—this will serve as the backbone of your web app.

Step 3: Write Your Basic Server Code

1. Create a new file named app.js.
2. Start typing the following line: const express = require('express'); and let Copilot suggest the rest.
3. Accept the suggestions to set up a basic server that listens on port 3000.

Expected Output:

You should see something like this:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

Step 4: Add a Simple Frontend

1. Create a new folder named public and add an index.html file.
2. Start typing HTML structure and let Copilot fill in the rest.

Expected Output:

Your index.html should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Web App</title>
</head>
<body>
    <h1>Welcome to My Web App!</h1>
</body>
</html>

Step 5: Connect Your Frontend with the Backend

1. Modify your app.js to serve static files:

app.use(express.static('public'));

2. Start your server with node app.js and navigate to http://localhost:3000 in your browser.

Troubleshooting: What Could Go Wrong

• Copilot Suggestions: Sometimes, Copilot might suggest code that doesn’t quite fit your needs. Don’t hesitate to tweak its suggestions.
• Port Conflicts: If port 3000 is already in use, change it to another port in your app.js.

What's Next: Expanding Your Web App

Once you have the basic web app running, you might want to explore adding:

• Database Integration: Use MongoDB or SQLite for data persistence.
• User Authentication: Implement user sign-up and login functionalities.
• Deployment: Consider using services like Vercel or Heroku for deployment.

Conclusion: Start Here

Using GitHub Copilot can significantly speed up your web app development process. While it won't replace your coding skills, it can boost your productivity and help you overcome coding roadblocks. If you're looking to create a simple app in under 2 hours, start with Copilot and follow this guide.

What We Actually Use

In our experience, we love using GitHub Copilot alongside Visual Studio Code for rapid prototyping. It helps us brainstorm code snippets and speeds up the initial development phase, although we often refactor the generated code for better quality.