Build a Web App with Bolt.new and Deploy with DeployHQ

This guide will walk you through the process of creating a web app using the powerful AI-driven platform Bolt.new and then setting up an automated deployment pipeline with DeployHQ to publish your app to a live server.

Step 1: Set Up Bolt.new and Start Building

First, navigate to Bolt.new and sign in or create an account. Bolt.new is an AI-powered, full-stack development environment that lets you build projects directly in your browser. Its primary feature is an AI assistant that can generate entire applications from a simple prompt.

Step 2: Use the AI to Build Your Web App

Once you are in the Bolt.new IDE, you will see a command line interface where you can interact with the AI assistant. Enter a prompt to describe the app you want to build. For example, you could type: “Create a simple portfolio website with sections for About, Projects, and Contact.” The AI will then generate the entire project's code for you. You can make adjustments and continue to build with the AI's help.

Step 3: Prepare Your App for Deployment with Git

Before you can deploy with DeployHQ, you need to get your Bolt.new project into a Git repository (e.g., GitHub, GitLab, or Bitbucket). Bolt.new has built-in integration for this. Locate the Version Control or Git section within the Bolt.new IDE. Here, you can initialize a repository, commit your changes, and push them to a remote repository. This Git repository will be the source code that DeployHQ pulls from.

Step 4: Deploy with DeployHQ

Now that your project is on GitHub, you can set up DeployHQ to handle your deployments.

  1. Create a New Project: Log in to your DeployHQ account and click New Project.

  2. Connect to Your Repository: Connect DeployHQ to your Git provider and select the repository where you pushed your Bolt.new project.

  3. Configure Your Server: Navigate to the Servers & Groups section and click New Server. Provide the details for your hosting server, including the connection type (FTP, SFTP, or SSH), credentials, and the path to your public directory (e.g., /public_html).

  4. Initiate the First Deployment: Go to the Deployments tab and click New Deployment. Select the branch you want to deploy from (e.g., main) and the server you just configured. DeployHQ will automatically transfer the files to your server.

Step 5: Monitor Your Live Application

DeployHQ provides a comprehensive dashboard to monitor the status of your deployments. You can view detailed logs of each deployment, check for any errors, and even roll back to a previous version if a new deployment causes issues. This gives you complete control and visibility over your app's live status.