What Does “Unleash” Mean?

For us, “unleashing” is more than just a feature upgrade; it’s a mindset shift. By moving from the free app to the premium version, you gain access to a world of boundless opportunities:

• Unlimited vCPUs and Memory Usage: Break free from hardware constraints. Scale your projects to meet your vision without worrying about resource limits.

• Priority Support: Get direct access to our expert team, ensuring you’re never stuck for long.

• Enhanced Performance: Experience cutting-edge optimizations tailored to heavy workloads, allowing for smoother, faster execution of your tasks.

• Custom Domain: Use your own domain name for a professional and personalized touch to your applications.

• Multiple Worker Processes: Run multiple worker processes to handle parallel tasks and improve efficiency for complex workloads.

• Multiple Cron Job Processes: Schedule and manage multiple automated tasks with ease, ensuring your app runs smoothly without manual intervention.

• 2TB of Network Bandwidth: Handle high traffic and data-intensive applications without worrying about exceeding bandwidth limits.

On the 1st of February 2025, we will pause all free apps.

Why are we pausing your FREE apps?

• Free apps share a pool of limited resources. Pausing ensures that these resources are distributed fairly among active users.

• Pausing allows you to prioritize and resume the app that matters most to you, ensuring a smoother experience.

• We want a sustainable ecosystem that maintains a balanced and efficient platform, benefiting both free and premium users.

• If you need more power or want to resume multiple apps, upgrading to the Unleashed tier is quick and easy. You’ll get access to premium features and unlimited capabilities, tailored to grow with your needs.

• We enable you to resume any of your apps affected by this for free! However, each user can only have a maximum of 1 free app.

To resume your app, check out our docs here

Why Go Unleashed?

Transitioning to the Unleashed App isn’t just about gaining features; it’s about unlocking potential. With just $15 per month/app, you invest in tools that supercharge your capabilities. Imagine the projects you’ll bring to life when the limits disappear.

How to Unleash Your App

Unleashing your app is simple and seamless:

1. Login

2. Choose Your App: Navigate to apps dashboard and select the app you want to unleash.

3. Settings: Navigate to Settings > General

4. Upgrade: Click on the "Unleash" button and follow the steps to unleash your app

5. Enjoy Limitless Power: Start using your unleashed app with unlimited resources, priority support, and enhanced performance.

For more info on Unleashed App, check out our docs here

Building React applications has become a popular choice for developers seeking to create dynamic, responsive, and scalable user interfaces. As an open-source JavaScript library, React simplifies the process of building interactive UIs by breaking them down into reusable components, allowing developers to focus on the individual parts of an app without worrying about the entire architecture at once.

Hosting a React application is a crucial step in bringing your project to life and making it accessible to users worldwide. Whether you're building a personal portfolio, a startup’s MVP, or a complex web application, knowing how to properly host your React app ensures it runs smoothly, securely, and efficiently. This blog will guide you through the entire process of hosting a React application, using Hostless as your hosting platform, configuration tips, and best practices to deploy your app with confidence. From setting up your build process to going live on the web, we’ll help you navigate the steps to make your React project accessible to the world 🌎.

Prerequisite

Before diving into hosting your React application, there are a few prerequisites you'll need to ensure a smooth and successful deployment process:

1. Basic Understanding of React: Familiarity with React concepts, including components, state, props, and hooks, will help you follow along as we discuss how to prepare your app for deployment.

2. Node.js and npm Installed: Ensure that Node.js and npm (Node Package Manager) are installed on your machine. They are essential for building and running React apps, and you’ll use npm commands frequently during the deployment process.

3. A Completed React Application: You should have a working React application ready to be deployed. If you’re starting from scratch, you can create a new app using create-react-app or any other React framework.

4. Version Control with Git: Knowledge of Git and GitHub (or another Git-based platform) will be helpful, as most hosting providers integrate directly with Git for smooth deployments and updates.

5. Basic Command Line Skills: Familiarity with the command line or terminal will be useful, as you’ll need to run various commands to build, test, and deploy your React app.

6. A Hostless Account: You’ll need an account on a Hostless, but if you do not have one. We'll work you through the process.

Setting up your account on Hostless

Setting up your account on Hostless is a straightforward process designed to get you deploying your React applications quickly. Start by visiting the Hostless website and signing up using your GitHub account. Hostless offers seamless integration with Git, allowing you to connect your repositories with just a few clicks. After connecting your Git account, you'll be able to select the repository for your React app and configure basic deployment settings.

Hosting your React app

Step 1: Build Your React Application

Before deploying, you need to create a production build of your React app. In your project directory, run the following command:

npm run build

This command creates an optimized production-ready version of your app in a build folder.

Step 2: Install the serve Package

The serve package is a simple, zero-configuration static file server that can quickly serve your built React application. Install it locally using npm:

npm install serve

Step 3: Test Your Build

To ensure everything works correctly, test the production build of your app locally using serve. Run the following command:

serve -s build

This command will serve your app on a local server, allowing you to verify that everything is functioning as expected.

Step 4: Configure Hostless Deployment Settings

Navigate to the Hostless website and click on 'Create App'

1. Set the Build Command: In the deployment settings, set the build command to:

    npm run build
   

2. Set the Start Command: Configure the start command to use serve to serve your build on port 8000:

    serve -s build -l 8000
   

   Alternatively, you can add the above command to your package.json as a script command called "serve" and run that command with npm.

    npm run serve
   

That all! Now you can click on "Create App" and your app should start deploying🚀.

Troubleshooting Common Hostless Issues

While deploying a React application on Hostless is generally straightforward, encountering errors such as "Out of Memory," "Connection Refused," or "Failed to Start" can be frustrating. Here are common causes for these issues and steps to resolve them effectively.

1. Out of Memory

Issue: The deployment process or the running application consumes too much memory, leading to "Out of Memory" errors. This often occurs during the build stage or when the app is about to start.

Solution:

• Increase Build Memory Limits: Navigate to build configurations to allocate more memory to your app.

• Increase Scaling Memory Limits: Navigate to scaling configurations to allocate more memory to your app. Increase "Min and Max memory per replica".

2. Connection Refused

Issue: The error "Connection Refused" typically occurs when your Hostless is unable to connect to your app. This can happen due to network misconfigurations.

Solution:

• Check your port: Ensure that you’re not using localhost addresses in production. and your app is exposed and/or listening on PORT 8000

3. Failed to Start

Issue: The application fails to start after deployment, often caused by incorrect start commands, missing dependencies, or misconfigured server settings.

Solution:

• Check the Start Command: Verify that the start command configured in Hostless matches the one used locally. For React apps using serve, it should typically be serve -s build -l 8000 . Ensure there are no typos or missing flags.

• Review App Logs: Hostless provides detailed logs during deployment. Review app and deployment logs to identify errors related to missing dependencies, syntax issues, or server misconfigurations.

• Ensure All Dependencies Are Installed: Check that your package.json file includes all necessary dependencies and that no dependencies are being ignored during the build. Sometimes, devDependencies may be needed in production if they include essential tools for starting the app.

Conclusion

Deploying your React application on Hostless using the serve package offers a streamlined and efficient way to bring your project online. While the process is generally smooth, understanding how to tackle common issues like "Out of Memory," "Connection Refused," and "Failed to Start" ensures that your app runs reliably and efficiently. Hostless provides powerful tools and a user-friendly platform, making it easier than ever to manage your React deployments. With the right approach, you’ll be well-equipped to handle any hiccups and keep your app running smoothly, ready to deliver an excellent experience to your users.