How to Build a Simple Web App Using GitHub Copilot in 1 Hour
How to Build a Simple Web App Using GitHub Copilot in 1 Hour
Building a web app can feel daunting, especially if you’re short on time or coding experience. But what if I told you that you could leverage AI to speed up the process? In 2026, GitHub Copilot is more powerful than ever, and it can help you whip up a simple web app in just one hour. This isn't just hype; I've done it, and I'm here to share how you can too.
Prerequisites: What You Need to Get Started
Before diving in, ensure you have the following:
- GitHub Account: Sign up for a free account if you don’t already have one.
- Visual Studio Code (VS Code): Download and install it. This will be your coding environment.
- GitHub Copilot: Subscribe to GitHub Copilot at $10/month or benefit from a free trial to get started.
- Node.js: Install Node.js for your server-side JavaScript needs.
Step 1: Setting Up Your Project
-
Open VS Code and create a new folder for your web app.
-
Initialize a new Node.js project by opening the terminal in VS Code and running:
npm init -yThis sets up a
package.jsonfile for you. -
Install Express (a web framework for Node.js) by running:
npm install express
Step 2: Create Your Basic Server
-
Create a new file called
server.js. -
Use GitHub Copilot to generate the basic server code. Start typing:
const express = require('express'); const app = express(); const PORT = 3000; app.get('/', (req, res) => { res.send('Hello, World!'); }); app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); });Copilot will suggest the rest. Accept the suggestions by pressing
Tab. -
Run your server:
node server.js -
Open your browser and navigate to
http://localhost:3000to see "Hello, World!" displayed.
Step 3: Building Your Frontend
-
Create an
index.htmlfile in your project folder. -
Again, use GitHub Copilot to generate a simple HTML structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Web App</title> </head> <body> <h1>Welcome to My Simple Web App!</h1> <p>This is a basic web application built using GitHub Copilot.</p> </body> </html> -
Serve your HTML file by modifying your
server.js:app.use(express.static('public'));Move your
index.htmlfile into a new folder calledpublic.
Step 4: Adding Functionality
-
Enhance your app. Let’s add a simple button that changes text when clicked. In your
index.html, add:<button id="change-text">Click me!</button> <p id="text">This text will change.</p> <script> document.getElementById('change-text').onclick = function() { document.getElementById('text').innerText = 'Text changed!'; }; </script> -
Save your files and refresh your browser to test it out.
Troubleshooting: What Could Go Wrong
- Server Not Starting: Check if you have Node.js installed correctly.
- HTML Not Displaying: Ensure your
index.htmlis in thepublicfolder and that you’re usingexpress.static.
What’s Next: Deploying Your App
Once your app is up and running locally, consider deploying it. Platforms like Vercel or Heroku offer free tiers that are perfect for small projects. You can deploy your app in just a few minutes using their simple interfaces.
Conclusion: Start Here
If you're looking for a practical way to build a web app quickly, using GitHub Copilot is a solid choice. It can significantly reduce the amount of time you spend coding, especially if you’re just getting started. Follow the steps above, and you’ll have a simple web app running in about an hour.
For ongoing support and insights, consider following our journey at Built This Week, where we share weekly lessons from building products in public.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.