Deploy Self-Hosted Content Apps with Coolify & Strapi on Vultr

Key Points:

• Self-hosted content enables full control and ownership of your published materials
• You can make continuous updates and upgrades based on your specific needs
• Content can be distributed through multiple channels at your discretion

Coolify Features:

• Supports Docker and other containerization platforms
• Enables one-click deployment of applications and services
• Integrates with external services like databases, CDNs, and object storage

Strapi Features:

• Integrates with front-end frameworks like React and Hugo
• Highly extensible with plugins and collection types
• Uses a modern web administration panel for content management

My Take:

The combination of Coolify and Strapi creates a powerful self-hosted solution that eliminates the need for third-party content platforms. This gives you unprecedented flexibility in how you create, manage, and distribute your content.

Deployment Steps:

• Log into the Vultr customer portal
• Click on “Compute” and then “Deploy”
• Select “Marketplace Apps” and choose either Coolify or Strapi
• For optimal performance, select a server with 4 vCPUs and 16GB RAM
• Set up a hostname for each server (e.g., “tech-coolify” and “tech-strapi”)
• Click “Deploy” to create the instances

My Take:

Using Vultr’s Marketplace applications saves significant time compared to manual installation. The one-click deployment ensures you have properly configured instances with all dependencies pre-installed.

Deployment Process:

• Push your React application to a GitHub repository (public or private)
• In Coolify, select “Public Repository” or “Private Registry” based on your repo type
• Enter your repository URL and click “Check Repository”
• Coolify will automatically detect your application type and port (React apps typically use port 3000)

Configuration Steps:

• Set the build command to “npm run build”
• Set the start command to “npm start”
• Use Coolify-generated labels by clicking “Reset to Coolify generated labels”
• Click “Save” and then “Deploy” to start the deployment process

My Take:

Coolify dramatically simplifies the deployment process by handling all the build steps and environment configuration automatically. This lets you focus on developing your application rather than managing deployment infrastructure.

Setting up Collection Types:

• Click “Create your first content type” in Strapi
• Create a new collection type (e.g., “Article”)
• Note the API ID as you’ll need this to access the published data

Field Configuration:

• Add a “Title” text field
• Add a “Sample” text field for description
• Add an “IMG” media field for images
• Save the collection type configuration

// Example React component that consumes Strapi data
import React from 'react';

const ArticleCard = ({ article }) => {
  return (
    <div className="article-card">
      <h3>{article.title}</h3>
      <p>{article.sample}</p>
      <img 
        src={article.IMG.formats.thumbnail.url} 
        alt={article.title} 
      />
    </div>
  );
};

export default ArticleCard;
    

My Take:

The field names in Strapi must exactly match what your front-end application expects. Plan your content structure carefully before setting up your collection types to avoid having to make changes later.

Creating Content:

• Navigate to “Content Manager” in Strapi
• Click “Create new entry”
• Fill in the fields (Title, Sample text, and select an image)
• Save and then Publish the content

Permission Configuration:

• Go to “Settings” > “Roles”
• Click on “Public” role
• Find your collection type (e.g., “Article”)
• Enable “find” and “findOne” permissions
• Save the role configuration

API Response Structure:

• Content includes all fields you defined (title, sample, etc.)
• Images are available in multiple formats (thumbnail, small, medium, large)
• You can choose which image format to use in your application

My Take:

The separation between content (Strapi) and presentation (React) gives you incredible flexibility. You can completely redesign your front-end without touching your content structure, or expand your content model without breaking your existing applications.