Full-stack web product deployment with CapRover: a step-by-step guide

CapRover is an open-source platform that makes deploying and managing web apps easier. It runs on your own server, offering a simple web interface and automation tools to handle hosting without the usual complexity. Whether it’s apps or databases, CapRover helps you get projects online quickly while keeping full control. Let’s explore how it works and why it’s a solid choice for full-stack deployments. 

Reasons to choose CapRover?

The first thing that makes CapRover stand out is the level of control it gives you over server configuration, while still covering key aspects like performance and optimization. It supports deployments for a wide range of applications: from Node.js and Python to databases like MySQL, Postgres, and more. On top of that, the platform keeps things simple with a clean, intuitive interface. Routine tasks are automated in just a few clicks, making it approachable for developers of any experience level. And perhaps best of all, CapRover is a fraction of the cost compared to many mainstream hosting services.

Key features of the platform at a glance:

• Web interface and CLI for automation and scripting
• No vendor lock-in — remove CapRover anytime, and your apps will keep running
• Docker Swarm supports containerization and clustering
• Customizable Nginx templates for load balancing
• Built-in Let’s Encrypt integration for free SSL (HTTPS)

CapRover’s clean interface and automation tools make even first-time deployment feel straightforward.

How to install and set up CapRover

One of the simplest ways to install CapRover is through the one-click app on the DigitalOcean marketplace. Just create a Droplet using the provided template. Choose the region, data center, CapRover image, CPU type, and authentication method (SSH key or password) that fits your setup. Then launch the Droplet to get started. It’s easier than it sounds — see the steps below.

Once your Droplet is created, it will appear in your DigitalOcean dashboard with an assigned IP address.

Now, open the link http://IP-ADDRESS:3000 in your browser to access the CapRover login page.

The default login password is captain42 (don’t forget to update it after logging in). After you log in, you’ll be prompted to connect a root domain. This allows you to use HTTPS and replace the plain IP address with a clean domain name. If you don’t have a custom domain, you can use a free option like server.your-ip.nip.io. This will point to your IP without extra setup, but note that HTTPS won’t be available with this method.

Tip: You’re not limited to DigitalOcean. CapRover works with any cloud provider. In that case, you’ll need to install Docker and set things up manually via terminal. A full setup guide with all the necessary commands is available on CapRover’s official website.

Overview of CapRover’s control panel

Once logged in, you’ll land in the CapRover control panel, which includes five tabs. Here’s what each tab does:

1. Dashboard — shows general system info and lets you set or update the root domain for your server.

2. Apps — where you create, configure, and deploy applications.

3. Monitoring — lets you track server performance, monitor metrics in real time with NetData, set up alerts through services like Email, Slack, or Telegram, and analyze logs using GoAccess.

4. Cluster — used for managing server clusters when running multiple nodes.

5. Settings — covers system-wide configurations like CapRover updates, backups, Nginx settings, disk cleanup, and more.

Creating your first app in CapRover

Once your CapRover instance is up and running, it’s time to deploy your first app. This happens through the Apps tab in the control panel — the main place where you’ll manage and configure everything related to your applications. You can go the quick and easy route with One-Click Apps/Databases, where you just pick the technology you need from the list.

Or, if you’re working on a custom project, you can manually create an app (just click “Create New App”) and configure it exactly as you need.

Next, when you open a newly created project, CapRover gives you a straightforward settings panel with three key tabs to manage how your app runs and behaves:

1. HTTP Settings. Here you can view the public link to your app, enable HTTPS, connect a custom domain, configure Nginx settings, define the container port, and adjust other related options.

2. App Configs. This tab allows you to add environment variables (env), set the number of app instances, define a pre-deploy script, and adjust other configuration options.

3. Deployment. This tab covers the actual deployment process. You can view the current version of your app, roll back to previous builds, check logs, and deploy new updates via CLI, .tar files, or integrations with GitHub, Bitbucket, GitLab, and more.

Tip: To ensure your app is operating correctly, open the public link from the HTTP Settings tab and verify that it loads in your browser.

Deploying a project in CapRover using different methods

Let’s walk through a practical example of deploying a full-stack project in CapRover. We’ll be working with three separate components: frontend (Next.js), backend (Nest.js), and PostgreSQL database. Each will be set up as its own app in CapRover: test-frontend, test-backend, and test-pg-db. We’ll start by setting up PostgreSQL as our database:

1. In the Apps tab, select One-Click Apps/Databases to access CapRover’s list of ready-to-use stacks.

Find PostgreSQL in the list (or pick a different database if your project requires it).

Once selected, fill in the necessary details: name, version, username, password, and default database name. After completing these fields, start the deployment.

When it finishes, navigate back to Apps, open your newly created database, and check its settings or logs to ensure everything is working.

Note: If something goes wrong and the database doesn’t launch properly, simply delete the app and create it again. This quick reset often solves common setup hiccups.

2. Now, let’s deploy the backend part. We’ll use a Docker container to host the application. Start by creating a Dockerfile in the root of your project:

Note: You can adjust paths, environment variable names, port, and startup scripts based on your project’s requirements.

Next, create a captain-definition file in the root directory. This tells CapRover how to build and deploy your app:

Once the Docker file is set up, head back to the CapRover Apps tab and open your backend app.

In HTTP Settings, define the container port (e.g., 3000) and enable HTTPS.

In App Configs, add your environment variables. You can do this manually or use Bulk Edit for convenience.

When everything’s configured, proceed to the Deployment tab to launch your project.

Depending on your setup, you can launch the project using the CLI, a .tar file, or by connecting it directly to a GitHub, Bitbucket, or GitLab repository. For this example, we’ll use the CLI to push the backend from a local machine — a straightforward method and a good base for CI/CD automation later.

The CLI lets you deploy from your terminal in a few quick steps — simple and efficient.

a) First, install the CLI tool on your local machine by running the following command in your terminal:

Then, log in to your CapRover instance by running:

You’ll be prompted to enter the root domain, password, and the machine’s name.

Once you’re logged in, run the deploy command from the root directory of your project:

Select the appropriate machine, pick your test-backend app in CapRover, and specify the Git branch you want to deploy.

If everything goes well, your backend should now be live. Check the logs under the Deployment tab to verify that the server has started successfully. Then, open the public link from HTTP Settings to confirm that your app is accessible. If your project exposes API routes, you’ll see the Swagger documentation page displaying all available endpoints.

In this example backend, the /api-docs endpoint was implemented to display the Swagger documentation. In your project, the structure and addresses of endpoints may differ, so be sure to use the ones specific to your application to test your API.

b) For automated deployments, CapRover offers App Tokens. To use them, go to Apps, open your backend app, and go to Deployment.

Click “Enable App Token” and save the generated token.

Note: It is important to keep this token secure, as it grants access to your project.

Next, open your backend repository on GitHub, navigate to the Settings tab, and create the required variables under the Secrets section, adding:

• Your server name (root domain)
• App name
• The App Token for CapRover

To automate project deployment, you need to set up a GitHub Action.

Then, create a script called main.yml that automatically triggers a deployment to CapRover whenever code is pushed to the main branch.

You can customize this script to suit your specific needs. For example, you could include steps to run tests, build the project, or configure different events that trigger the deployment.

c) Another way to deploy using CI/CD is through the command-line interface (CLI). This method involves running the following caprover deploy command in your CI workflow:

Alternatively, instead of using a token, you can store your CapRover password in the Secrets section. In your CI workflow, install the CapRover CLI (as shown earlier in the local setup (a)) and then run the caprover deploy command, passing in the arguments from Secrets along with the branch name. That said, using a separate App Token for each project is a safer and more maintainable approach, as outlined in the previous step (b).

3. Now it’s time to deploy the frontend. Just like with the backend, we’ll package the app using Docker and connect it to CapRover. In this case, we’ll also show how to automate the process via GitHub — using either a personal access token or SSH key.

We’ll start with the first option: using a personal access token. To begin, create a Dockerfile in the root of your frontend project:

Note: Feel free to adjust the paths, environment variable names, port, and startup scripts to match your project’s specific requirements.

After that, create a captain-definition file (which CapRover needs) in the root of your project:

Once both files are ready, open the Apps tab in your CapRover dashboard and select your frontend app.

In HTTP Settings, define the container port (e.g., 8080), enable HTTPS, and set up automatic redirection from HTTP to HTTPS. If needed, you can also customize the Nginx configuration.

In the App Configs tab, add any required environment variables.

Now let’s walk through the deployment process, starting with GitHub integration.

One way to connect your GitHub repository is by entering your credentials directly into CapRover. To do this, you’ll need:

• The GitHub repository URL
• Your GitHub username
• The name of the target branch
• A personal access token (instead of a password)

To create the token:

• Go to your GitHub Settings
• Navigate to Developer Settings > Personal access tokens > Tokens (classic)

• Click Generate new token, add a note, and grant access to your repositories