How to Use Cursor to Build a Simple Web App in Under 2 Hours
How to Use Cursor to Build a Simple Web App in Under 2 Hours
Building a web app can feel like a daunting task, especially if you’re a solo founder or indie hacker juggling multiple projects. But what if I told you that you could create a simple web app in under two hours using Cursor, an AI-powered coding tool? In this guide, I’ll walk you through the process, share what you need to get started, and highlight the limitations of using Cursor.
Time Estimate: 2 Hours
You can finish this project in about two hours if you follow the steps closely. Cursor simplifies the coding process, but you'll still need some foundational knowledge of web development concepts.
Prerequisites
Before diving in, make sure you have:
- A Cursor account (Free tier available)
- Basic understanding of HTML, CSS, and JavaScript
- Node.js installed on your machine
- A code editor (like Visual Studio Code)
Step-by-Step Guide to Build Your Web App
Step 1: Set Up Your Project
-
Create a New Directory: Open your terminal and create a new folder for your project.
mkdir my-web-app cd my-web-app -
Initialize a Node.js Project: Run the following command to set up your Node.js project.
npm init -y -
Install Express: To create a simple server, install Express.
npm install express
Step 2: Use Cursor to Generate Code
-
Open Cursor: Launch the Cursor app and start a new coding session.
-
Generate Basic Server Code: Input a prompt like "Create a basic Express server that serves a web page." Cursor will generate the code for you.
Example output:
const express = require('express'); const app = express(); const PORT = process.env.PORT || 3000; app.get('/', (req, res) => { res.send('Hello, World!'); }); app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); }); -
Copy the Generated Code: Paste this code into a new file named
server.jsin your project directory.
Step 3: Create Your Frontend
-
Create an HTML File: In your project directory, create a file named
index.htmland use Cursor to generate some basic HTML code.Example prompt: "Create a simple HTML page with a title and a button."
Example output:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Web App</title> </head> <body> <h1>Welcome to My Web App</h1> <button onclick="alert('Button clicked!')">Click Me!</button> </body> </html> -
Serve the HTML File: Update your server code to serve the HTML file.
app.use(express.static('public'));Move your
index.htmlfile into a new folder namedpublic.
Step 4: Run Your Web App
-
Start the Server: In your terminal, run:
node server.js -
Open Your Browser: Go to
http://localhost:3000to see your web app in action!
Troubleshooting
- If the server doesn't start: Check for errors in your terminal. Ensure that all packages are installed correctly.
- If the HTML page doesn't load: Make sure your
index.htmlfile is in thepublicfolder and that you have the correct file path in your server code.
What's Next?
Once you've built this simple web app, consider expanding its functionality. You could add a database, implement user authentication, or even integrate with third-party APIs. The possibilities are endless!
Conclusion
Cursor is a powerful tool for indie hackers and solo founders looking to build web apps quickly. While it makes the coding process much easier, remember that it’s not a magic bullet. There are limitations, especially when it comes to complex logic or custom features. But for simple projects, it can be a game-changer.
What We Actually Use
In our experience, we use Cursor for rapid prototyping. However, for more complex applications, we often switch to traditional coding because Cursor can struggle with nuanced requirements.
If you're ready to dive in and build your first web app with Cursor, give it a shot! It could be the start of something great.
Follow Our Building Journey
Weekly podcast episodes on tools we're testing, products we're shipping, and lessons from building in public.