Web Dev

How to Deploy React Applications with Vultr’s Coolify Marketplace Application

Introduction

Coolify is an open-source platform that simplifies application deployment and management. It supports multiple programming languages, integrates with Git for CI/CD, and provides database management. As a self-hosted alternative to cloud services, Coolify offers control over your infrastructure, making it ideal for developers and teams seeking simplicity and flexibility.

This article will guide you to deploying a Coolify Vultr Marketplace Application, setting up a React Application, and later deploying the React application on Coolify with a custom domain.

Deploying Vultr Optimized Cloud Instance

  1. Sign up and log in to the Vultr Customer Portal.
  2. Navigate to the Products page.
  3. From the side menu, select Compute.
  4. Click the Deploy Server button in the center.
  5. Choose Optimized Cloud Compute as the server type.
  6. Choose a server Location.
  7. Choose Coolify as the Marketplace Application.
    marketplace
  8. Choose a suitable plan.
  9. Choose any Additional Features if required.
  10. Click Deploy Now.

Setting up a React Application

  1. Create a new React application.
    $ npx create-react-app my-react-app
  2. Navigate to the project directory.
    $ cd my-react-app
  3. Create a Git repository.
    $ git init && git add . && git commit -m "Initial Commit"
  4. Create a repository, and name it “my-react-app”.
  5. Push the code to the repository.
    $ git remote add origin https://github.com/your-username/my-react-app.git && git branch -M main && git push -u origin main

Hosting React Application on Coolify

  1. Access the Coolify dashboard at http://<server-ip>:8000
  2. Create an account on Coolify.
    registration
  3. Choose LocalHost as the server option.
    localhost
  4. Click Public Repository.
    publicrepo
  5. Provide the repository URL.
  6. Click Continue.
  7. Provide your custom domain. Make sure your domain points to your Vultr Server IP and nameservers are properly configured with your provider.
    customdomain
  8. Provide a Build Command and Publish Directory.
    command-dir
  9. Scroll down and click Reset to Coolify Generated Labels.
  10. Click Save.
  11. Click Servers in the leftmost menu.
  12. Click LocalHost.
  13. Add your domain URL in Wildcard Domain field.
    wildcard
  14. Click Save.
  15. Move back to the project screen and click Deploy.
  16. After the deployment is finished you can access your react app at https://<server-ip>.

Use Cases for Coolify

  • Developers: For developers looking to deploy and manage applications without relying on third-party cloud platforms, Coolify offers a powerful and flexible solution.
  • Small Teams: Ideal for small teams who want to collaborate on projects with a streamlined deployment process.
  • Self-Hosting Enthusiasts: For those who prefer to keep their applications and data under their control, Coolify provides a self-hosted alternative to cloud services.

Do more with Vultr Marketplace Applications

Conclusion

By performing the steps in this article, you were able to deploy Coolify Vultr Marketplace Application, create and set up a new React application and deploy it on Coolify with a custom domain.

This is a sponsored article by Vultr. Vultr is the world’s largest privately-held cloud computing platform. A favorite with developers, Vultr has served over 1.5 million customers across 185 countries with flexible, scalable, global Cloud Compute, Cloud GPU, Bare Metal, and Cloud Storage solutions. Learn more about Vultr

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button