But after building your app, the next big question is:

How do you deploy your Google AI Studio web app online?

While Google defaults to its cloud services, moving your AI Studio app onto a high-performance hosting platform like Aveshost gives you full control over your files, emails, and database environments—without breaking the bank.

In this easy guide, we will walk step-by-step through syncing your code from Google AI Studio to GitHub and deploying it seamlessly onto your Aveshost server. Let’s bring your AI creation to the real world!

Sync Your Google AI Studio Project with GitHub

Google has removed the direct Export feature from Google AI Studio. To download or access your project files, you now need to sync or push the project to GitHub.

Follow these steps:

1. Click the Settings gear icon in the top-right corner of Google AI Studio.
2. Select the GitHub option.
3. Connect your GitHub account. To avoid permission or authentication errors, it is recommended to use the same email address for both your Google account and GitHub account.
4. Enter a short and simple repository name, such as: mycool-webapp

5. Click Push to sync your project to GitHub.

Once the sync is complete, your project files will be available in your GitHub repository, where you can clone or download.

Step 2: Grab Your Aveshost Server Credentials

To push your files online, you will need the login details to your hosting control panel.

• Check Your Email: When you first purchased your web hosting package from Aveshost, an automated welcome email was sent to you containing your server hostname, username, password, and control panel link.
• Can’t Find It? No sweat! Simply log into your Aveshost Client Area, go to the support section, and open a quick ticket. The customer support team will securely resend your login details right away.

If you don’t already have hosting, you can get started with Aveshost Web Hosting.

For larger or more resource-intensive projects, we recommend choosing a VPS plan for better performance and flexibility: Aveshost Self-Managed VPS Hosting

Deploy Your Web App Using AI

Remember the traditional dance of launching a web application? It usually looked something like this: open a clunky FTP client or SSH terminal, carefully drag and drop hundreds of files, manually log into a control panel to create a MySQL database, map the database user permissions, copy-paste long connection strings into an environment file, and pray that nothing breaks along the way.

And if you ran into a hidden configuration bug or a missing package error? You were stuck scouring Stack Overflow forums for hours just to get your homepage to load.

Not anymore. Welcome to the era of AI-driven deployment.

With modern AI tools like Codex Desktop connected to your project folder, the entire deployment infrastructure becomes completely conversational. Instead of bouncing back and forth between terminal windows and your hosting dashboard, you can stay comfortably right inside your local computer environment.

You simply tell the AI: “Deploy this project for me using my server credentials.”

In the background, the AI acts as your senior DevOps engineer. It securely connects to your Aveshost server, logs into your control panel via secure automated routines, uploads your code, and intelligently parses your project structure. If it notices your application requires a database, it will automatically provision the database, create a secure user, map the connection variables, and run your backend migrations for you simultaneously.

Even better? If there’s a missing dependency or a minor path conflict between your local environment and your production server, the AI doesn’t just error out and throw a cryptic log code at you. It analyzes the deployment error, diagnoses the issue, auto-fixes the bug directly from your local PC, and pushes the working version live—all without you ever having to manually log into your hosting control panel or VPS.

It turns what used to be a stressful, error-prone 30-minute chore into a seamless, hands-free conversation that takes less than two minutes.

Step 3: Secure Your Credentials in Your Project Folder

Because we are using Codex Desktop to handle the heavy lifting, the AI assistant needs the keys to your hosting environment. However, security always comes first. You must lock down your sensitive server details so they remain safely on your local machine and never accidentally leak into a public GitHub repository.

Here is how to set up a secure gateway right inside your code editor:

1. Open your project folder in Visual Studio Code or your preferred code editor.
2. In the root directory, create a brand-new file and name it exactly: .serverCredentials
3. Open your project’s .gitignore file (create one in the root folder if it doesn’t exist yet) and add .serverCredentials on a fresh line.

Security Check: By adding the file name to your .gitignore, Git will completely ignore it. Even if you push updates to GitHub, your passwords will stay completely local and safe.

Option A: For DirectAdmin Control Panels (Shared Hosting)

DirectAdmin_url: https://yourhostname.com:2222 or https://yourdomainname.com:2222
Username: your_username_here
Password: your_password_here

Option B: For Virtual Private Servers (VPS)

If you are deploying your web app directly onto a clean Aveshost Cloud VPS via secure shell, fill out this server block instead:

IP: your_vps_ip_address
User: root
Password: your_root_password_here
Port: 22

Once you have filled out your specific server blocks, hit save in VS Code. Your workspace is now fully prepared for hands-free AI deployment!

Step 4: Let AI Handle the Deployment (The Prompt Blueprints)

Launch the Codex Desktop app, or download and install it if you haven’t already.

Grant Codex Full Access Permissions.

Next, go to the Projects panel, select “Use an Existing Folder”, and choose your project directory from your computer.

Go back to VS Code or your code editor, right-click your .serverCredentials file, select Copy Path, and use the blueprint that matches your application setup:

Special Step for VPS Deployments: Bulletproof Your Server Security First

If you are deploying on a fresh Virtual Private Server (VPS), you are working with a clean slate. Operating directly out of the default root account on standard port 22 leaves your server wide open to automated brute-force attacks.

Before you push a single line of your application code, you can leverage Codex to completely harden and lock down your server infrastructure automatically.

Simply feed your initial root login details into your .serverCredentials file and pass this security blueprint prompt to the AI:

AI Server Hardening Prompt: “Using the root login details provided in my .serverCredentials file, please secure this VPS by completing the following steps:

1. Create a brand-new, isolated system user and grant them full sudo administrative privileges.
2. Switch configuration contexts over to this new user.
3. Install and configure Fail2Ban to automatically detect and block malicious IP addresses trying to brute-force the server.
4. Change the default SSH port from 22 to a unique, non-standard port number [e.g., 2284] to hide the server from automated scanners.”

Going Passwordless: Setting Up SSH Keys with AI

For maximum, enterprise-grade security, you should completely eliminate password logins in favor of cryptographic keys. You don’t have to navigate complex terminal configurations to set this up:

1. Open PuTTYgen (or your terminal’s key generator) on your local computer and click Generate.
2. Save your private key safely on your PC, and copy the long string of text representing your public key.
3. Hand that public key over to the AI with this follow-up prompt:“Take this generated public SSH key: [Paste your public key string here] and configure it for the newly created sudo user on my server. Once successfully injected, disable password authentication entirely so the server only accepts SSH key connections.”

Once Codex completes these automated tasks, remember to update your local .serverCredentials file with your new username, new port, and private key path before proceeding with your application deployment!

Note: The configuration above applies only to VPS hosting users.

1. Deploying a Static Website (No Database)

If your site is built using pure HTML/CSS/JavaScript, or is a static build from a framework (like an Angular or React build output), use this prompt:

AI Prompt: “Use the server login details located here: C:\Users\P C\Documents\Project\.serverCredentials and deploy the website on the server for me.”

Codex will read the credentials, log into your file manager via the control panel API, zip up your static files, upload them, and extract them directly into your public_html directory.

Note: If your hosting plan supports multiple domains, make sure you specify the exact domain where the website should be deployed.

3. Deploying App Engines (Node.js and Python Apps)

Application servers require a runtime environment to be explicitly initialized on the server backend before they can receive traffic. You have two excellent ways to handle this with AI:

• The Hybrid Approach: Log into your Aveshost control panel manually, navigate to “Setup Node.js App” or “Setup Python App”, and click create. Once the shell environment exists, jump back to Codex and prompt:“I have initialized the Node/Python environment in my control panel. Please use the server login details here C:\Users\P C\Documents\Project\.serverCredentials to deploy my application code into that environment, install dependencies, and start the application engine.”
• The Fully Autonomous Approach: If you prefer to stay entirely hands-off, you can command the AI to use browser automation:“Use the server login details here C:\Users\P C\Documents\Project\.serverCredentials and launch a headless Chrome instance to log into my control panel. Create a new Node.js/Python application environment first, and then deploy my local project files directly into it.”

For VPS users, you can simply instruct Codex to automatically set up and configure the required Node.js or Python environment needed for your deployment.

Instead of manually installing runtimes, dependencies, process managers, or configuring your server through SSH, AI can help automate the entire setup process directly on your VPS.

Step 5: Pushing Future Updates Without Breaking the Site

As you continue to use “vibe coding” in Google AI Studio to tweak features, add colors, or add new tools, pushing updates to your live site is incredibly seamless.

When syncing or pushing a new build to GitHub from AI Studio, you want to make sure your live production database environment strings are never accidentally overwritten or deleted on the live server.

Whenever pushing an incremental update via Codex, always use this safeguard prompt structure:

“Please deploy my new changes to production using the server credentials at C:\Users\YourName\Documents\MyAIApp\.serverCredentials. Crucial: Ensure that the existing production .env file (and database configuration details) currently residing on the live Aveshost server are completely preserved and NOT overwritten. Only push the new code changes.”

Final Thoughts

You don’t need a massive, confusing cloud infrastructure bill just to run a prototype you built over the weekend. By combining the unmatched speed of Google AI Studio’s generation engine with the reliable, and affordable power of Aveshost, you get the absolute best of both worlds: hyper-fast AI creation and professional web hosting control.

Are you ready to take your AI app live? Head over to Google AI Studio, grab your code framework, and let’s get it launched on your custom domain today! If you hit any snags configuring your Node.js app environment, just reach out to the Aveshost technical support team—they are always ready to help.

Suggested Reading:

• How to Deploy Your Website from VS Code Using AI
• How to Use Gemini for SEO (Prompts, Tips & Strategies)
• How to set up DNS records for your domain in a Cloudflare
• How to Get a Free Domain Name – Here’s How (No Tricks)
• Top 90+ Essential Linux Commands Plus Cheat Sheet
• 50+ Essential Git Commands (With Downloadable Cheat Sheet)

Frequently Asked Questions (FAQs)

Traditionally, deploying a website meant wrestling with FTP clients, configuring SSH keys, manually creating databases, and double-checking file paths. If you’re deploying a Node.js or Python app, you might find yourself stuck in a terminal loop trying to figure out why your environment variables aren’t loading.

What if you could just ask your code editor to deploy your website for you?

Thanks to the power of Artificial Intelligence, you can. In this comprehensive guide, we’re going to walk through how to deploy your website directly from VS Code using an AI assistant like Codex Desktop. Whether you’re launching a simple HTML portfolio, a dynamic WordPress/PHP site, or a modern Node.js application, this step-by-step framework will turn a frustrating chore into a two-minute conversation.

Let’s dive in!

Step 1: Secure Your Server Credentials inside VS Code

Before we let AI do the heavy lifting, we need to give it the keys to the kingdom—securely. We want the AI to know how to access our server, but we never want to accidentally leak our passwords to a public GitHub repository.

Here is exactly how to set up a secure credentials file in your project:

1. Open your project folder in Visual Studio Code.
2. In the root directory of your project, create a new file and name it something like: .serverCredentials
3. Crucial Security Step: Open your .gitignore file (create one if you don’t have it) and add .serverCredentials on a new line. This ensures your sensitive login details are completely ignored by Git and never pushed to GitHub or GitLab.

# .gitignore snippet
.serverCredentials
.env
node_modules/

Formatting Your Credentials

Depending on what type of hosting control panel you are using, paste one of the following templates into your newly created .serverCredentials file.

Option A: For DirectAdmin Control Panels (Recommended)

If your hosting provider like Aveshost utilizes modern, high-performance DirectAdmin panels, format your file like this:

DirectAdmin_url: https://yourhostname.com:2222 or https://yourdomainname.com:2222
Username: your_username_here
Password: your_password_here

Option B: For cPanel Control Panels

If your host is still utilizing traditional cPanel infrastructure, format your file this way:

cPanel_url: https://yourhostname.com/cpanel or https://yourdomainname.com/cpanel
Username: your_username_here
Password: your_password_here

Where do you find these details? > If you are hosting with a premium digital service provider like Aveshost, these credentials were automatically sent to your email immediately after purchasing your hosting plan. Check your spam or inbox for your welcome email.

Can’t find them? No worries. Simply log into your Aveshost client area, navigate to the support section, and open a quick ticket requesting your control panel login details. The support team will sort you out in no time.

Step 2: Set Up Your AI Deployment Assistant (Codex Desktop)

Now that your credentials are ready and safely ignored by Git, it’s time to bring in the AI power. For this guide, we are using the Codex Desktop app, a powerful AI tool built to interact seamlessly with your local development environment.

1. Download and install the Codex Desktop application on your computer.
2. Launch Codex Desktop.
3. Follow the on-screen prompts to sign in to your Codex account, or create a new account if you don’t already have one.
4. Navigate to the Projects tab.
5. Select “Use an existing folder” and choose the exact project folder you currently have open in VS Code.
   
   
6. Grant Codex Full Access Permissions
   
   
7. Go back to VS Code, right-click your .serverCredentials file, and select Copy Path. It should look something like this depending on your operating system: C:\Users\P C\Documents\Project\.serverCredentials

Keep that absolute file path handy. We are going to feed it directly to the AI.

Step 3: The AI Prompt Blueprints (Choose Your Stack)

This is where the magic happens. Because Codex understands natural language and has access to your local directory, you don’t need to configure complex CI/CD pipelines. You just need to give it the right instructions.

Find your website type below and copy-paste the exact prompt blueprint into Codex.

1. Deploying a Static Website (No Database)

If your site is built using pure HTML/CSS/JavaScript, or is a static build from a framework (like an Angular or React build output), use this prompt:

AI Prompt: “Use the server login details located here: C:\Users\P C\Documents\Project\.serverCredentials and deploy the website on the server for me.”

Codex will read the credentials, log into your file manager via the control panel API, zip up your static files, upload them, and extract them directly into your public_html directory.

Note: If your hosting plan supports multiple domains, make sure you specify the exact domain where the website should be deployed.

2. Deploying a Dynamic Website (With a Database)

If you are deploying a CMS, a PHP application, or any site that requires a MySQL/MariaDB database, the AI needs to do double duty. It has to upload the files and provision the database infrastructure.

If you have an exported .sql database file on your local PC, make sure to grab its file path too.

AI Prompt: “Use the server login details located here: C:\Users\P C\Documents\Project\.serverCredentials and deploy the website on the server for me. Because this site contains a database, please automatically create the database from the control panel and link it to the site configuration. Check and run migrations for the database if required. [If applicable: Use my local database file located here: C:\Users\P C\Documents\Project\database.sql]”

Codex will log into DirectAdmin or cPanel, spin up a brand new database, generate a secure user password, map it to your web application’s configuration file (like wp-config.php or a .env file), and import your schema.

3. Deploying App Engines (Node.js and Python Apps)

Application servers require a runtime environment to be explicitly initialized on the server backend before they can receive traffic. You have two excellent ways to handle this with AI:

• The Hybrid Approach: Log into your hosting control panel manually, navigate to “Setup Node.js App” or “Setup Python App”, and click create. Once the shell environment exists, jump back to Codex and prompt:“I have initialized the Node/Python environment in my control panel. Please use the server login details here C:\Users\P C\Documents\Project\.serverCredentials to deploy my application code into that environment, install dependencies, and start the application engine.”
• The Fully Autonomous Approach: If you prefer to stay entirely hands-off, you can command the AI to use browser automation:“Use the server login details here C:\Users\P C\Documents\Project\.serverCredentials and launch a headless Chrome instance to log into my control panel. Create a new Node.js/Python application environment first, and then deploy my local project files directly into it.”

Step 4: Updating an Existing Production Website Safely

What happens when you make changes to your code a week later and need to push an update? You don’t want the AI to overwrite your live data or break your production database connection strings!

When pushing updates to an already deployed app, use a preservation prompt. This tells the AI to sync your new code features while safeguarding your live environment configurations.

Whenever you want to push an update, use this specific prompt blueprint:

AI Update Prompt: “Please push my latest local changes to production using the server credentials at C:\Users\P C\Documents\Project\.serverCredentials. Crucial: You must completely preserve the existing .env file (or database configuration files) currently residing on the live production server so that production database details are not overwritten or broken. Only sync and update the changed application code files.”

By explicitly instructing the AI to protect production configurations, your live database remains perfectly intact while your new UI features and code patches go live seamlessly.

Conclusion: The Future of Deployment is Conversational

Congratulations! You’ve just bypassed the most tedious parts of web development using artificial intelligence. By combining a secure .serverCredentials strategy inside VS Code with an intelligent desktop agent like Codex, you’ve turned server administration into a simple text message.

This workflow drastically cuts down on deployment friction, giving you more time to focus on what you do best: building incredible things. Have you tried deploying your projects using AI yet? If you run into any hitches with your hosting setup or database migrations, drop a comment below or reach out to Aveshost support line to ensure your control panel API access is fully enabled!

Suggested Reading:

• How to Use Gemini for SEO in 2026 (Prompts, Tips & Strategies)
• How to Make Your WordPress Website Load Under 2 Seconds
• How to Get a Free Domain Name – Here’s How (No Tricks)
• How to set up DNS records for your domain in a Cloudflare
• Why Your Business Needs a Blog: Top Reasons Explained

FAQs About How to Deploy Your Website from VS Code Using AI

There are two simple ways to set up Cloudflare for your domain:

1. Using a CNAME record – This option lets you connect only your subdomain (for example, www.yourdomain.com) to Cloudflare while keeping your main domain hosted elsewhere.
2. Changing your nameservers to Cloudflare’s – This is the most common and recommended option. It gives Cloudflare full control to manage your DNS, security, and performance features. You’ll be able to do this right after creating your Cloudflare account.

Once you’ve signed up, Cloudflare will guide you through adding your first domain. Just type in the domain name you want to use, click Continue, and follow the prompts to begin the setup. Don’t worry—Cloudflare will automatically scan your existing DNS records and show them to you for review before making any changes.

Click on “Continue” to view the next page:

On the next page, you’ll be asked to choose a Cloudflare plan. If you’re just getting started, you can simply select the Free plan — it includes all the essential features you need to boost your website’s performance and security.

Click on the Free plan icon, then hit the Select Plan button to continue with the setup.

You can always upgrade to a paid Cloudflare plan later if you want access to more advanced features like image optimization, enhanced security tools, and priority support. To compare all available plans, visit Cloudflare’s pricing page.

On the next screen, Cloudflare will display a list of your existing DNS records. Take a moment to carefully review them and make sure they match the records listed in your cPanel (or wherever your domain is currently managed). This ensures your website, email, and other services continue to work correctly after the setup.

Note: It’s best not to modify any DNS records at this stage. You’ll have the chance to make changes or updates later once the setup process is complete.

If the DNS records shown in the list look correct, simply scroll down and click “Continue to Activation” to move forward with enabling Cloudflare for your domain.

On the next page, Cloudflare will prompt you to update your domain’s nameservers. This step connects your domain fully to Cloudflare’s network, allowing it to manage your DNS, speed, and security features.

If your domain is registered with another domain registrar, log in to your registrar’s dashboard and update the nameservers for your domain to the ones provided by Cloudflare. Each registrar’s interface is slightly different, but you’ll usually find this option under Domain Settings or DNS Management.

If your domain is registered with Aveshost, follow the step-by-step instructions below to update your nameservers directly from your Aveshost client area.

1. Log in to your Aveshost account in a separate tab if you are not logged in yet :

2. Click on “Domains“

3. Select and click on “Manage“

4. Click on “Nameservers” and replace the custom nameservers with cloudflare nameservers

5. Click on “Change Nameservers” to save your changes.

Note: After you’ve updated your nameservers, it can take up to 24–48 hours (and occasionally longer) for the changes to fully propagate across the internet. This delay happens because local Internet Service Providers (ISPs) need time to update their DNS caches. During this period, some visitors may still see your old settings until the update completes everywhere.

Once your nameservers have been changed, go back to your Cloudflare dashboard and click “Check Nameservers Now.” Cloudflare will automatically verify the update and activate your domain once the new nameservers are detected.

If the nameservers have been successfully updated, you will see the Active status:

Now that your domain is connected to Cloudflare, you can proceed to set up your DNS records from the DNS menu.

On the DNS Records page, you’ll be able to add, edit, or delete DNS entries for your domain.

To add a new record:

1. Click + Add Record.
2. Choose the record type (e.g., A, CNAME, MX, TXT, etc.).
3. Enter the hostname (this could be your main domain or a subdomain).
4. Provide the record value (such as your server’s IP address).
5. The TTL (Time to Live) will be set automatically.
6. Once done, click Save.

You can also control whether Cloudflare’s protection and caching are active for each record by toggling the orange/grey cloud under the Proxy Status column:

• Grey Cloud (DNS Only) → Traffic bypasses Cloudflare and connects directly to your server.
• Orange Cloud (Active) → Traffic is routed through Cloudflare (recommended for your website).

NOTE:
After changing your nameservers to Cloudflare, all the existing DNS records in your cPanel will no longer be active. This means your domain will now use the DNS settings managed inside your Cloudflare account.

Make sure all necessary DNS records (such as A, CNAME, MX, or TXT records) are correctly added in Cloudflare before completing the setup.

For example, if you later decide to switch to a new email service or update your server’s IP address, you’ll need to update the corresponding MX or A records directly within Cloudflare — not in cPanel.

When it comes to websites, speed is everything. Imagine clicking on a site and waiting… and waiting. Chances are, you’d leave before the page even loads. In fact, studies show that if your website takes more than 3 seconds to load, most visitors bounce away. That’s lost traffic, lost sales, and lost trust.

And it’s not just about user impatience. Search engines like Google also factor in site speed when ranking websites. That means a slow site can hurt both your visibility and your credibility. Whether you’re running a blog, an online store, or a business website, every extra second of loading time is costing you opportunities.

But here’s the good news: with WordPress, you can absolutely get your website to load in under 2 seconds — even if you’re not a tech wizard and even if you’ve never optimized a website before. With the right setup and a few smart tweaks, lightning-fast performance is within reach.

In this guide on How to Make Your WordPress Website Load Under 2 Seconds, I’ll walk you through the exact steps you need to take to speed up your WordPress site, cut down those frustrating delays, and give your visitors the smooth browsing experience they expect.

So grab a coffee (or tea), settle in, and let’s dive in step-by-step.

Why Website Speed Matters

Before we jump into the “how,” let’s quickly talk about the “why”:

• Better User Experience: Nobody likes waiting. A slow site frustrates visitors, while a fast one keeps them engaged and encourages them to explore more pages.
• Improved SEO Rankings: Google has confirmed that page speed is a ranking factor. Search engines favor websites that load quickly, meaning faster sites often rank higher and attract more organic traffic.
• More Conversions: Whether it’s signing up for a newsletter, filling out a form, or buying a product, speed plays a huge role. Every extra second of delay increases the chance of losing a potential customer.

In short, website speed directly affects your traffic, visibility, and revenue. Now that we understand what’s at stake, let’s roll up our sleeves and start optimizing!

Step 1: Choose a High-Performance Hosting Provider

At Aveshost, we’ve built our platform with performance features in mind. All our hosting plans run on SSD storage with LiteSpeed technology, and we provide free built-in caching to ensure your WordPress site loads at lightning speed. With data centers strategically located close to your target audience, your visitors get faster response times no matter where they’re browsing from.

Step 2: Use a Lightweight WordPress Theme

Not all WordPress themes are created equal. While some are beautifully designed, they often come bloated with unnecessary code, flashy animations, and features you may never use. The result? A sluggish website that frustrates your visitors and hurts your SEO.

Lightweight themes, on the other hand, are built with speed and performance in mind. They strip away the clutter and give you a clean, fast-loading foundation to build on. You can then add only the features you actually need through plugins, keeping your site lean and efficient.

Some excellent lightweight themes to consider are:

• OceanWP – versatile, lightweight, and great for building professional business sites.
• Astra – very popular, works well with most page builders.
• GeneratePress – highly customizable and performance-focused.
• Neve – modern, lightweight, and optimized for mobile.
• Blocksy – feature-rich yet lightweight, perfect for Gutenberg users.

The key is to choose a theme that’s optimized for speed first, and then tailor it to your brand with customizations. It’s far better to start with a lightweight base and add plugins selectively than to rely on one bulky theme that tries to do everything but slows your site down in the process.

Step 3: Install and Configure WP Fastest Cache

Caching is like taking a snapshot of your site and showing that to visitors instead of building every page from scratch — it’s one of the fastest wins for page speed. Below is a practical, step-by-step guide that uses only WP Fastest Cache (no other caching plugins).

Quick explanation

WP Fastest Cache creates and serves static HTML files to visitors, adds useful server rules (GZIP, browser caching), and can rewrite static asset URLs for CDNs. We’ll install it, enable safe defaults, and walk through the options you should test and why.

Before we begin

Before installing and setting up WP Fastest Cache, let’s make sure a few things are in place.

1. Backup your site (files + database)
   Always make a backup before adding or configuring performance plugins. This way, if something goes wrong, you can roll back quickly without losing work.
2. Deactivate and remove any other caching plugins.
3. Check compatibility with your theme and page builder
   WP Fastest Cache works smoothly with most themes, including the popular Divi Theme. However, if you’re using Elementor, you may run into occasional conflicts because Elementor has its own performance optimization features. To avoid errors and styling issues, adjust these settings: Elementor Performance Tab (step-by-step):
   • Go to your WordPress dashboard and open Elementor → Settings.
   • Click on the Performance tab.
   • Set CSS Print Method to External File.
   • Set Element Cache to Disable.
   These changes ensure Elementor won’t fight against WP Fastest Cache when it comes to CSS and caching.

Once you’ve taken these steps, you’re ready to install and configure WP Fastest Cache without running into unnecessary conflicts.

Step 1 — Install and activate WP Fastest Cache

1. Log in to your WordPress dashboard.
2. Go to Plugins → Add New.
3. In the search bar, type WP Fastest Cache.
4. Click Install Now, then click Activate.

After activation, you’ll see WP Fastest Cache in the left-hand sidebar of your dashboard.

Step 2 — Open the settings panel

Click on WP Fastest Cache in the sidebar. You’ll land on the Settings page, which looks like a checklist of performance options. This makes things easy — you just tick boxes and save.

Step 3 — Configure the basic settings

Here’s the recommended setup (tick these boxes):

• Cache System — This is the core feature. It enables caching and stores static HTML files for your site.
• Preload — Creates cached versions of all your pages in advance, so the first visitor doesn’t experience slow load times. (Choose your preferred preload interval, e.g., once every 10 minutes.)
• Logged-in Users — Keep this unchecked. You don’t want admin/dashboard views cached.
• Mobile — Enable caching for mobile visitors (important if your site gets traffic from phones).
• New Post / Update Post — Check these so the cache clears automatically when you publish or update content.

Click Submit at the bottom to save your changes.

Step 4 — Enable optimization options

Scroll further down in the settings and enable the following (test each one because some themes/plugins can conflict):

• Minify HTML — Strips unnecessary characters from HTML, making it lighter.
• Minify CSS — Makes CSS files smaller, speeding up delivery.
• Combine CSS — Combines multiple CSS files into one, reducing requests.
• Minify JS — Compresses JavaScript files.
• Combine JS — Combines multiple JS files (can break some sites, so test thoroughly).
• Gzip Compression — Compresses site files before sending them to the browser. This is a must.
• Browser Caching — Tells browsers to store static files locally so repeat visitors don’t have to re-download them.

Click Submit to save changes.

Step 5 — Exclude critical pages (especially for eCommerce sites)

If you’re running WooCommerce, Easy Digital Downloads (EDD), or any other online store, you must exclude dynamic pages like Cart, Checkout, and My Account from caching.

1. Go to WP Fastest Cache → Exclude.
2. Add rules to exclude:
   • /cart/
   • /checkout/
   • /my-account/

This prevents customers from seeing cached versions of their shopping carts or payment pages.

Step 6 — Use the Preload feature wisely

In the Preload tab:

• Set a schedule (e.g., preload the cache every 10 or 20 minutes).
• Choose “All” if you want every page/post cached, or just select homepage and categories for lightweight sites.

Pro tip: If your hosting plan is limited on resources, don’t preload everything too frequently — it can cause CPU spikes.

Step 7 — Clear and test your cache

Now it’s time to check if caching is working.

1. Visit your site in a private/incognito browser.
2. Right-click and view the page source — scroll to the very bottom. If WP Fastest Cache is working, you’ll see a comment like: <!-- WP Fastest Cache file was created in (xx.xx seconds) -->

Step 8 — Extra options (optional)

• CDN Integration: If you use a Content Delivery Network like Cloudflare or BunnyCDN, WP Fastest Cache has a built-in tab for CDN settings. Add your CDN URL to serve static files (images, CSS, JS) faster worldwide.
• Image Optimization (Premium only): If you upgrade to the Pro version, WP Fastest Cache can compress images automatically. For the free version, use an image optimization plugin or compress images before uploading.

Step 9 — Regular maintenance

Caching isn’t “set it and forget it.” Every now and then:

• Clear your cache manually after major theme/plugin updates.
• Check your speed scores again (PageSpeed, GTmetrix).
• Revisit excluded pages if you add new WooCommerce pages or forms.
• If you make style or JS changes and they don’t appear, purge the cache first.
• If you see problems after enabling an option, turn it off and purge cache — that isolates the issue quickly.

Recommended safe settings (copy-paste style)

• Cache System: ON
• GZIP Compression: ON
• Browser Caching: ON
• Preload: ON (frequency: daily or as suits your update schedule)
• Cache Timeout: 24 hours (adjust if needed)
• Minify HTML: ON
• Minify CSS / JS: ON (enable and test)
• Combine CSS / JS: Use with caution — OFF if you see layout/script issues
• Mobile Cache: ON (if responsive)
• Cache for Logged-In Users: OFF
• Exclude: /cart, /checkout, /my-account/, any dynamic pages or AJAX endpoints

Limit Plugins

It’s tempting to install every plugin that looks useful, but each one adds extra code, scripts, and database queries that can slow down your site. In simple terms: too many plugins = too many requests.

To keep your site lean and fast:

• Audit your plugins regularly. Go through your installed plugins and ask yourself if each one is truly necessary.
• Remove what you don’t use. Don’t just deactivate unused plugins — delete them completely to reduce bloat and potential security risks.
• Choose quality over quantity. Look for well-coded plugins with good reviews and regular updates instead of stacking multiple plugins that overlap in functionality.
• Avoid “all-in-one” heavy plugins. Sometimes one lightweight plugin for a single purpose is better than a bulky plugin that tries to do everything.

By limiting plugins to only the essentials, you’ll reduce server load, improve performance, and lower the chances of conflicts that can break your site.

Wrapping It Up

And there you have it — your WordPress site is now running on WP Fastest Cache, optimized for speed without complicated setup.

By combining caching, minification, and browser storage, you’ll shave valuable seconds off your load time. Paired with a solid host and optimized images, you’ll be well on your way to a site that loads in under 2 seconds.

Suggested Reading:

• How to Boost Your Website Speed for SEO and Conversions
• Unlocking Search Engine Secrets: Top SEO Tips for New Websites
• Unveiling the Secrets of Local SEO: Dominate Your Niche Market
• How to Get a Free Domain Name – Here’s How (No Tricks)
• Why Your Business Needs a Blog: Top Reasons Explained
• How to Fix WordPress 404 Not Found Error: Step-by-Step

FAQs About How to Make Your WordPress Website Load Under 2 Seconds

“Can I get a free domain name for my website?”

Short answer? Yes.
Long answer? This guide will walk you through exactly how to get a free domain name, the pros and cons, and the smartest way to do it—without compromising your brand or online presence.

Let’s dive in.

What Is a Domain Name, Anyway?

Before we start handing out freebies, let’s make sure we’re on the same page.

A domain name is your website’s address on the internet. It’s what people type in their browser to visit your site—for example, www.yourbrand.com.

Think of it like your digital street address. Without it, no one can find you online.

Why People Look for a Free Domain Name

Let’s be real—starting a website can get pricey. Between hosting, design, plugins, marketing tools, and other tech stuff, costs can add up quickly.

That’s why many people search for how to get a free domain name, especially when:

• Starting a new blog
• Testing an idea
• Launching a small business
• Building a portfolio
• Learning web development

Good news: you’ve got several legit ways to get a domain name without spending a dime.

Method 1: Get a Free Domain Name with Web Hosting

This is our top recommendation for most users. Many hosting providers including us offer a free domain name when you sign up for their hosting plans.

How It Works:

1. You purchase web hosting (required to make your site live)
2. The hosting company throws in a free domain for 1 year
3. After the first year, you’ll need to pay to renew the domain

Step-by-Step Guide to Claim Your Free Domain:

1. Visit the web hosting plans page
2. Select a hosting plan and click on “Order Now” button to proceed

3. Search for your desired domain name using the availability checker. If available, add it to your cart. Click “Continue” to proceed.

Important Note

If you selected the Deluxe plan, you are only eligible for a .top or .online domain (as shown in the table above).
Please ensure your chosen domain matches the extensions available for your selected plan to avoid confusion.

4. Configure Your Billing Plan
   • Choose Annually or longer billing cycle to qualify for a free domain.
   • Click “Continue” to proceed.
5. Configure Your Domain
   • Click to choose ID Protection at no additional cost (Free for life). This service protects your personal information from being publicly visible in the WHOIS database.
   • Click “Continue” to proceed.
6. Review Your Cart
   • Check the summary of your order to confirm everything is correct.
   • If you’re satisfied, click “Checkout”.
7. Create or Log in to Your Account
   • If you’re a new user, create an account by providing your details.
   • Existing users can simply log in.
   • If you’re satisfied, click “Checkout”.
8. Complete Payment
   • Choose your preferred payment method (e.g., credit card, PayPal, Google Pay, mobile money).
   • Enter your payment details and complete the transaction.
9. Activation
   • Once payment is confirmed, your domain and web hosting will be instantly activated.
   • You can now set up your website, email addresses, or any other services.

Pros of This Method:

Get a real custom domain (yourname.com)
Domain comes with reliable hosting
Professional solution that can grow with your site

Cons to Consider:

Requires paying for hosting (though you need this anyway)
Domain isn’t free forever – renewals cost $10-$20/year

Method 2: Use a Website Builder That Offers a Free Domain

If you’re not ready for web hosting yet, many website builders include free subdomains. These are great for getting started quickly.

Website builders like Wix, Weebly, WordPress.com, Blogger.com, or Google Sites offer free subdomains—meaning your domain will look something like:

yourname.wixsite.com  
yourbrand.wordpress.com  
yourportfolio.weebly.com
yourwebsitename.blogspot.com
sites.google.com/view/yoursitename

How to Set Up Your Free Domain:

1. Sign up for your chosen website builder
2. Choose a subdomain when prompted
3. Start building your site immediately

Pros:

• No cost at all
• Easiest way to get online fast
• Great for testing ideas
• Good for beginners
• Built-in design tools

Cons:

• Doesn’t look professional
• Harder to brand
• Limited customization options
• Most builders show ads on your site

Best for: Personal blogs, school projects, or testing an idea.

Method 3: Register a Free Domain Extension (TLD)

Some domain registrars offer free domains with lesser-known extensions like:

• .tk
• .ml
• .ga
• .cf
• .gq

These are available through sites like Freenom.com.

BUT… A Word of Caution:

While they’re free, these extensions often have low credibility and are commonly used by spammers. They can be flagged by email systems or ignored by serious users.

Not recommended for businesses or long-term projects.

Method 4: Use GitHub Pages Or Cloudflare Pages

If you’re a developer (or learning to be one), GitHub Pages or Cloudflare Pages lets you host a static website for free with a domain like:

yourusername.github.io # for Github Pages
yoursitename.pages.dev # for Cloudflare Pages

This is ideal for developers building portfolios or testing apps.

Pro Tip: You can purchase domain name from Aveshost connect a custom domain later if needed.

Bonus: How to Choose the Perfect Domain Name

Here are a few quick tips for picking a domain name you’ll love:

• Keep it short (under 15 characters if possible)
• Avoid numbers or hyphens
• Make it memorable
• Use keywords if they fit naturally
• Choose the right extension (.com is king)

Example: Instead of best-dog-food-website123.tk, go for something like doglovershub.com

Final Thoughts: Should You Get a Free Domain?

Absolutely—especially if you’re just starting out or testing an idea.

But here’s the real magic: Use the free domain as a stepping stone. Start small, grow your brand, and when you’re ready, invest in a premium domain to take your project to the next level.

If you’re ready to launch and want the best of both worlds (free domain + professional setup), check out Aveshost — where you can get a free domain, affordable hosting, and great customer support tailored to you.

Ready to Claim Your Free Domain?

Don’t wait. Your brand, your blog, your business—it all starts with a domain name.

Click below to get started and claim your free domain name with hosting:

Get My Free Domain Name Now

Suggested Reading:

• What Is a Domain Name? Ultimate Guide for Beginners
• What Is WordPress? Beginner’s Guide Explained
• What is VPS Hosting? Complete Introduction to VPS Hosting
• .uk vs .co.uk Domains: Pros, Cons, and Best Use Cases
• Why Your Business Needs a Blog: Top Reasons Explained
• How to Start a Blog and Make Money: Beginner’s Guide
• How to Deploy Laravel Project
• How to Buy PHP Hosting: Beginner’s Guide
• How to Host a PHP Website: A Beginner’s Guide
• How To Deploy a Node.js App (The Ultimate Guide)
• How to Deploy Django App (The Ultimate Guide)
• How to Deploy Angular App: CSR & SSR Guide

FAQs about how to get a free domain name

If you’ve built a PHP website and are now wondering how to bring it online, you’re in the right place! Hosting a PHP website may seem like a daunting task at first, but with the right guidance, you’ll have your site up and running in no time.

In this comprehensive guide, we’ll walk you through the entire process of hosting a PHP website, from choosing the right hosting plan to setting up a database and deploying your files. Whether you’re a beginner or have some experience with web development, this guide will make the process easy and understandable.

Video Tutorial

For an easier way to host a php website, watch the YouTube video below. If you prefer a detailed, step-by-step written guide, continue reading.

Choosing a Web Hosting Provider

The first step to hosting a PHP website is selecting a suitable web hosting provider. Aveshost is an excellent choice for PHP hosting, offering fast servers, great customer support, and affordable pricing.

Web Hosting

Web hosting is a service that allows individuals or businesses to make their websites accessible on the internet.

In simple terms:

You upload your website files (like images, HTML, code, etc.) to a server
That server is always online and connected to the internet
So when people type your domain (like example.com), the server shows them your site

Web hosting providers (like Aveshost) offer the server space, tools, and support needed to keep websites running smoothly.

Domain Name

A domain name is the address people type into their browser to visit your website — like aveshost.com.

It’s a human-friendly way to access a website instead of using an IP address (like 192.168.1.1). Think of it like:

Domain name = Your website’s street address
Hosting = The actual house where your website lives

You register a domain name through a domain registrar, and then link it to your hosting to make your site live.

PHP Hosting

PHP hosting is a type of web hosting that supports websites built with PHP, a popular scripting language used for creating dynamic websites like blogs, eCommerce stores, and content management systems (like WordPress).

In simple terms:

PHP hosting lets you run websites that rely on PHP code (e.g., contact forms, user logins, databases).

Most modern hosting providers (like Aveshost ) offer PHP hosting with features like:

• PHP version selection
• MySQL database support
• Compatibility with CMS platforms (WordPress, Joomla, etc.)

How to Buy PHP Hosting

Go to the Aveshost Web Hosting Plans page to view the available plans and features. Click on the Order Now button and follow the steps to purchase your PHP web hosting.

If you need a step-by-step guide on how to buy PHP hosting, check out this helpful article: How to Buy PHP Hosting.

Already have a hosting plan that supports PHP? Great! You can now continue with the rest of the tutorial below.

How to Upload Your PHP Files

Once you have your hosting and domain set up, it’s time to upload your PHP website files to the server. There are different methods to do this:

Using Aveshost cPanel File Manager

Aveshost provides cPanel, where you can use the File Manager to upload your files.

1. Log in to Your cPanel Account
   • Open your web browser and go to your cPanel login page (usually yourdomain.com/cpanel).
   • Enter your username and password.
2. Navigate to the File Manager
   • Once inside cPanel, look for the File Manager option under the Files section.
   • Click on File Manager, then open the public_html directory (this is the root directory where your website files should go. Alternatively, you can use a subdirectory if you have created a subdomain).
   • To view hidden files (such as .htaccess, .env), click on Settings in the top-right corner and enable Show Hidden Files (dotfiles).
3. Upload Your Website Files
   1. Click the Upload button at the top of the File Manager.

2. Drag and drop your website files (HTML, CSS, PHP, images, etc.), or click Select File to browse and upload them manually.
3. If you’re uploading a ZIP file, right-click it once uploaded and choose Extract to unpack the contents.
4. Move the Extracted Contents to public_html
   • Double click on the extracted folder and inside the folder click on Select All at the top.

5. Click on Move at the top of the File Manager, now delete the path /PHP_eCom_Project (Your unzip folder name) so it should be /public_html

6. Click on the Move Files button to move it into the public_html folder or the subdirectory folder in case you are using a subdomain.

Note: After extracting the files, delete the zip file. Once the files are moved to the public_html directory, delete the unzip folder as well.

Using FTP/SFTP

Aveshost supports FTP/SFTP connections. You can use tools like:

• FileZilla (Windows, macOS, Linux)
• Cyberduck (macOS, Windows)
• WinSCP (Windows)

Steps:

1. Retrieve your FTP/SFTP credentials from the Aveshost welcome email received upon purchasing your hosting, or alternatively, create a new FTP account directly from your cPanel.
2. Connect using an FTP client.
3. Upload your PHP files to the public_html directory.

Set Up a Database (If Needed)

Many PHP websites use MySQL or MariaDB databases. If your PHP website requires a database, follow these steps:

Follow this step-by-step guide to learn how to create a MySQL database in cPanel: How to Set Up a MySQL Database & User in cPanel (2 Easy Methods)

1. Create a Database in Aveshost cPanel

• Open Aveshost cPanel → MySQL Databases.
• Create a new database and user.
• Assign the user to the database with full privileges.

2. Import Your Database Using phpMyAdmin

• Go back to your cPanel dashboard.
• Locate and click on phpMyAdmin in the Databases section.
• In the left panel, find and click on the database you just created.
• At the top, click the Import tab.
• Click Choose File and select the database file from your local computer.
• Click Go to start the import process.

Ensure the database connection details in your PHP files are correct.

Example config.php file:

$servername = "localhost";
$username = "cpaneluser_dbuser";
$password = "yourpassword";
$database = "cpaneluser_dbname";

$conn = new mysqli($servername, $username, $password, $database);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

Test Your Website

Once your files are uploaded and database configured, visit your domain to check if everything is working. If you encounter errors:

• In cPanel, open ‘MultiPHP INI Editor’, select your domain, enable display_errors, and click ‘Apply’.
• Review error logs (error_log ) in your project directory.
• Ensure database credentials are correct.

Conclusion

Hosting a PHP website may seem complex at first, but with Aveshost, the process is simple and beginner-friendly. Whether you’re launching a simple blog or a dynamic web application, following these steps will ensure a smooth deployment.

With Aveshost, you get fast, secure, and affordable PHP hosting with excellent support. Ready to get started?

Host Your PHP Website with Aveshost Now!

Suggested Reading:

• How to Buy PHP Hosting: Beginner’s Guide
• How to Upload Your Website (in 3 Simple Steps)
• How to Buy cPanel Hosting for Your Website: Beginner’s Guide
• How to Deploy Laravel Project on cPanel
• How to Deploy Angular App on cPanel: CSR & SSR Guide
• How To Deploy a Node.js App on cPanel (The Ultimate Guide)
• How to Deploy Django App on cPanel (The Ultimate Guide)
• How to Deploy Flask App on cPanel (The Ultimate Guide)

FAQs About How to Host a PHP Website

So, you’re ready to build your website or web app and keep seeing the term “PHP Hosting” everywhere — but what exactly is it, and how do you actually buy it?

Don’t worry — you’re not alone. In this beginner-friendly guide, We’ll walk you through everything you need to know about PHP hosting and what steps to take when buying your hosting plan. By the end, you’ll feel confident and ready to launch your PHP-powered website like a pro.

Let’s dive right in!

What Is PHP Hosting?

Let’s start with the basics.

PHP hosting simply refers to a web hosting environment that supports PHP — a popular scripting language used to build dynamic websites. It’s the backbone of platforms like WordPress, Joomla, Drupal, Magento, and thousands of custom websites and web apps.

If your website or web application uses PHP code (and most do), then you need PHP hosting to make your site live on the internet.

The good news? Most web hosting providers like Aveshost support PHP out of the box.

Do You Really Need PHP Hosting?

If you’re using:

• WordPress or any PHP-based CMS
• A custom PHP website or application
• Web forms or contact forms written in PHP
• PHP-based plugins or scripts

…then yes, you definitely need PHP hosting.

Features to Look for in PHP Hosting

Here are some must-have features to look out for when choosing a PHP hosting:

Latest PHP Version Support

PHP is constantly being updated for performance and security. Make sure the host like Aveshost supports PHP 8.1 or higher.

Easy-to-Use Control Panel

Most beginners prefer hosting with cPanel, which makes managing files, databases, and emails a breeze.

One-Click App Installer

Want to install WordPress or another CMS? Look for Softaculous or similar 1-click installers.

Free SSL Certificate

SSL is essential for HTTPS and securing your site. Good hosts offer this for free.

Reliable Uptime (99.9% or higher)

Downtime = lost visitors and revenue. Check for an uptime guarantee.

Customer Support

Things will go wrong — and that’s okay. What matters is having 24/7 live chat or ticket support when they do.

Free Backups

Daily or weekly backups are life-saving if anything goes wrong.

How to Buy PHP Hosting (Step-by-Step)

Okay, let’s get down to the nitty-gritty. Here’s a step-by-step guide to buying PHP hosting

Aveshost provides reliable and affordable web hosting solutions for businesses and individuals worldwide. Follow these simple steps to purchase your PHP hosting plan from Aveshost.

Step 1: Visit Aveshost’s Website

1. Open your browser and go to Aveshost.
2. Click on “Get Started” button or navigate to the Web Hosting section from the menu.

Step 2: Choose a Hosting Plan

1. Browse through the available hosting plans.
2. Compare the features and pricing to find the best fit for your needs.
3. Click the “Order Now” button under your preferred hosting plan.

Step 3: Choose a Domain Name

1. You’ll be prompted to register a new domain, transfer an existing domain, or use your existing domain.
2. If registering a new domain, type your desired domain name and select a .com, .com.gh, .net, or any other available extension.
3. Click “Check” to see if the domain is available.
4. If available, click “Continue” to proceed.

Step 4: Configure Your Hosting Plan

1. Choose your Billing Cycle (Monthly/quarterly, yearly, or multi-year plans).
2. Review your order and click “Continue”.

Step 5: Domains Configuration

• Choose “ID Protection“, this protects your information and reduce the amount of spam to your inbox
• Choose “DNS Management“, this is completely optional

Step 6: Review Your Cart & Enter Your Account Details

1. Check your domain and hosting details.
2. If you’re a new customer, fill in your personal information, billing address, account security. If you’re a returning customer, simply log in to your Aveshost account.
3. Choose your Payment Method
4. Click “Checkout” to proceed to payment.

Step 7: Make Payment

1. Follow the on-screen instructions to complete the payment securely.

Step 8: Account Activation & Setup

1. Once payment is successful, you will receive a confirmation email with your PHP hosting details.
2. Log in to your Aveshost Client Area to access your PHP hosting account directly. Or, you can go to yourdomainname.com/cpanel, then enter your username and the password sent to your email. If you don’t see the email in your inbox, check your spam or junk folder.
3. You can now start setting up your website.

Set Up Your Website

Once you are in your hosting dashboard. From there, you can:

• Install WordPress or other CMS
• Upload PHP files via FTP
• Set up your database and email

Aveshost offers a 1-click setup wizard, so you’re never lost.

Suggest Reading: How to Set Up a MySQL Database & User in cPanel (2 Easy Methods)

Bonus: How to Test Your PHP Hosting

Want to make sure everything works? Here’s how to test it:

1. Create a simple test.php file:

<?php
phpinfo();
?>

2. Upload it to your public_html directory.
3. Visit yourdomainname.com/test.php in your browser.
4. If PHP info loads — you’re golden!

(Just remember to delete this file afterward — it reveals server info.)

Security and Maintenance Tips

Once your site is live, don’t forget to keep it safe and healthy:

• Update PHP version regularly
• Backup your site often
• Use strong passwords
• Install a security plugin if using WordPress

Final Thoughts

Buying PHP hosting doesn’t have to be complicated. Now that you understand what PHP hosting is, what to look for, and how to buy it step-by-step, you’re more than ready to take that leap.

Whether you’re launching your first blog or building the next big web app, your hosting is the foundation.

Need Help?

If you encounter any issues, Aveshost’s 24/7 support team is available via live chat, email, or phone to assist you.

Get started today and launch your website with Aveshost!
Visit Aveshost Now

Also Read:

• How to Set Up a PostgreSQL Database and User in cPanel
• How to Set Up a MySQL Database & User in cPanel (2 Easy Methods)
• How To Transfer Your Domain: A Step-by-Step Guide
• How to Start a Blog and Make Money in 2025: Beginner’s Guide
• How to Choose a Blog Name: 107+ Niche Ideas
• Unveiling the Secrets of Local SEO: Dominate Your Niche Market (2025)
• How to Flush DNS Cache on Windows, Mac, Linux & Browsers

FAQs About PHP Hosting

Deploying a Flask application on cPanel might sound tricky, but it’s actually quite straightforward when you break it down step by step. If you’re looking for an easy way to host your Python-based Flask web app on a shared hosting environment, cPanel is a great choice.

In this ultimate guide, we’ll walk you through everything you need to know about deploying a Flask application on cPanel, from setting up your environment to configuring the webserver properly.

Why Deploy Flask App on cPanel?

cPanel is widely used for shared hosting and offers a user-friendly interface to manage websites, databases, and applications. Here are a few reasons why deploying Flask on cPanel is a great choice:

• Affordable Hosting: Many shared hosting plans come with cPanel at no extra cost.
• User-Friendly: The GUI makes it easy to manage files, databases, and settings.
• Built-in Features: cPanel comes with MySQL, cron jobs, and other useful tools.
• No Need for a Dedicated Server: You don’t need to manage a VPS or a dedicated server to deploy your Flask app.

Prerequisites

Before we start, make sure you have:

1. A cPanel Hosting Account – Ensure your hosting provider supports Python applications.
2. Flask Installed Locally – You should have a working Flask app on your local machine.
3. A Domain or Subdomain – You need a domain or subdomain pointing to your cPanel account.
4. SSH Access (Optional) – Some hosting providers like Aveshost allow SSH access, making deployment easier.
5. Python Version Supported – Check if your hosting provider live Aveshost supports Python 3.x.

Watch the Video Tutorial

For an easier way to deploy Flask application on cPanel, watch the YouTube video below. If you prefer a detailed, step-by-step written guide, continue reading.

Step 1: Log in to cPanel

First, log in to your cPanel account. The URL usually looks something like this:

https://yourDomainName.com/cpanel or directly from your Aveshost account dashboard

Once inside, you’ll see various tools for managing your hosting account.

Step 2: Create a Python Application in cPanel

1. Scroll down to the Software section and click on Setup Python App.

3. Click Create Application and select:
   • Select Python Version (preferably 3.9+).
   • Application root: /home/yourusername/yourprojectname (or any preferred directory). For instance, if your application’s root folder is named flaskapp and you are using your primary domain, the application root directory will be flaskapp. In this guide, we are using a subdomain, so our application root becomes flask.hostplus.top.
   • Application URL: Select the domain or subdomain you want to use.
   • Application startup file: Leave it blank for now (we’ll configure this later).
   • Application Entry point: Leave it blank for now (we’ll configure this later).

4. Click Create and note the Virtual Environment Path displayed.

Step 3: Upload Your Flask Application

You can upload your Flask app project in two ways:

Option 1: Upload via File Manager

1. Go to Files section in the cPanel and click File Manager.
2. Inside the File Manager, navigate to the application root directory you set in Step 2.
3. Click Upload and select your Flask project’s .zip file.

4. Extract the .zip file after uploading. Right-click the uploaded ZIP file and select ‘Extract‘ to unzip it.

Ensure that all files are located in the flask.hostplus.top folder (or any preferred directory). If they are not, navigate to the extracted folder, select all files, and move them to the flask.hostplus.top folder or your chosen directory.

Note: Be sure to delete the .zip file after extraction

Suggested Reading: How to Upload Your Website (in 3 Simple Steps)

Option 2: Clone from GitHub

1. Open Terminal from cPanel or connect via SSH.
2. Navigate to the application directory:

cd /home/yourusername/yourprojectname

3. Clone your project from GitHub:

git clone https://github.com/yourusername/your-repository.git

Step 4: Install Dependencies

Your Flask project has dependencies listed in requirements.txt. You can install them in two ways:

Method 1: Using Setup Python App Page

1. Go back to Setup Python App.
2. Click the Edit button for your application.
3. Find the Configuration files section and enter: requirements.txt then click Add button

4. Click “Run Pip Install”, then select the requirements.txt file to install the dependencies.

Method 2: Using the Terminal

1. Activate the virtual environment: copy and paste the Virtual Environment Path from Step 2 or manually activate the virtual environment.

Virtual Environment Path from Step 2

source /home/cpusrplus/virtualenv/flask.hostplus.top/3.11/bin/activate && cd /home/cpusrplus/flask.hostplus.top

Or manually activate the virtual environment

source /home/yourusername/virtualenv/yourprojectname/3.x/bin/activate

2. Install dependencies: In the Terminal, navigate in your project directory and run the command to install the dependencies;

pip install -r requirements.txt 

Step 5: Configure Application Startup File

1. Within your Flask application’s root directory, modify either app.py or config.py to include this:

application = app

2. Open Setup Python App and locate your application.
3. Find the Application Startup File section: Enter the location of your app.py file. In my case, it is app.py, then save and restart the application.

4. Alternatively, you can keep the passenger_wsgi.py file and follow the rest of the process to modify it accordingly.
5. Locate and edit the passenger_wsgi.py file in your project’s root directory. Overwrite its existing content with the sole line:

from app import app as application

6. Save the file
7. Go back to your Setup Python App page and restart your application

Step 6: Test Your Flask Application

Open your browser and visit your Flask app’s URL. If everything is set up correctly, your application should be live!

Step 7: Fix Common Deployment Issues

Even with correct setup, you may encounter some common errors. Below are solutions to the most frequent problems:

1. Application Error (500 Internal Server Error)

Solution:

• Check the error logs (stderr.log).
• Ensure that requirements.txt is correctly installed.
• Verify that the startup file is correctly set.

2. Module Not Found Error

Solution:

• Activate the virtual environment and reinstall dependencies:

source /home/yourusername/virtualenv/flaskapp/3.x/bin/activate pip install -r requirements.txt

3. File Permission Issues

Solution:

• Ensure the correct file permissions are set using:

chmod -R 755 ~/flaskapp

4. Debugging Your Flask App

Solution:

• Review stderr.log in the Flask application project folder.

Setting Up a MySQL Database (Optional)

If you want use MySQL Instead of SQLite3:

1. Create a MySQL database in cPanel.
2. Create a database user and assign it to the database.
3. Update your Flask application’s configuration to use the database.

For a step-by-step guide on creating a MySQL database in cPanel, follow this illustrated tutorial: How to Set Up a MySQL Database & User in cPanel (2 Easy Methods).

1. Install MySQL Connector in Your Flask Environment

Since cPanel supports Python virtual environments, do the following:

1. Open cPanel and navigate to Terminal.
2. Activate your Python virtual environment if you have one:

source /home/your-cpanel-username/virtualenv/flaskapp/3.x/bin/activate

(Adjust the path based on your Python version and environment name)

3. Install mysql-connector-python or PyMySQL

pip install mysql-connector-python

OR

pip install PyMySQL

2. Update Your Flask Application

Modify your Flask application to use MySQL instead of SQLite.

1. Edit app.py or config.py and update the database URI:

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://your_db_user:your_db_password@localhost/your_db_name' 

2. Save the file

For a step-by-step guide on using MySQL instead of SQLite3, follow this: How to Use MySQL instead of SQLite3 in a Flask Application

Final Thoughts

Deploying a Flask application on cPanel might seem challenging at first, but by following these steps, you can have your web app up and running smoothly. Whether you upload via File Manager or use GitHub, install dependencies through cPanel or the terminal, the process remains straightforward if you adhere to best practices.

If you still encounter issues, reach out to your hosting provider’s support or check Flask and cPanel documentation for troubleshooting tips.

Now that your Flask app is live, what will you build next?

Suggested Reading:

• How to Deploy Django App on cPanel (The Ultimate Guide)
• How to Deploy Angular App on cPanel: CSR & SSR Guide
• How To Deploy a Node.js App on cPanel (The Ultimate Guide)
• How to Deploy Laravel Project on cPanel
• 50+ Essential Git Commands (With Downloadable Cheat Sheet)
• How to Set Up a PostgreSQL Database and User in cPanel
• How to Set Up a MySQL Database & User in cPanel (2 Easy Methods)
• How to Buy cPanel Hosting for Your Website: Beginner’s Guide

Frequently Asked Questions (FAQs)

Django is one of the most popular web frameworks for building scalable and secure applications. While deploying Django on cloud servers is common, many developers and website owners prefer using cPanel for hosting due to its user-friendly interface and affordability.

If you’re looking for a detailed, step-by-step guide on how to deploy a Django application on cPanel, you’re in the right place.

Deploying a Django application on cPanel might seem challenging, but with the right steps, you can get your project up and running smoothly. This guide will walk you through the process in a friendly, easy-to-follow manner.

In this comprehensive guide, we’ll walk you through every step, from setting up your Django project to configuring your database, handling static files, and securing your application.

Whether you’re a beginner or an experienced developer, you’ll find all the necessary details here to successfully deploy your Django app on cPanel.

Why Deploy Django on cPanel?

cPanel is one of the most popular web hosting control panels, widely used for managing websites, databases, and emails. Many shared hosting providers offer cPanel, making it an affordable and accessible option for hosting Django applications.

While cPanel is traditionally optimized for PHP applications, you can still run Django by using its Setup Python App feature.

Prerequisites

Before you begin, ensure you have:

• A Django project ready for deployment
• A cPanel hosting account
• SSH Access (Optional)
• A registered domain or subdomain pointed to your cPanel server
• Python 3.x support (provided by your hosting provider)
• Basic familiarity with the command line

Watch the Video Tutorial

For an easier way to deploy a Django application on cPanel, watch the YouTube video below. If you prefer a detailed, step-by-step written guide, continue reading.

Step 1: Create a Python Application in cPanel

1. Log in to your cPanel account.
2. Scroll down to the Software section and click on Setup Python App.

3. Click Create Application and select:
   • Python version (Choose the latest available 3.x version).
   • Application root: /home/yourusername/yourprojectname (or any preferred directory). For instance, if your application’s root folder is named Django-project and you are using your primary domain, the application root directory will be public_html/Django-project. In this guide, we are using a subdomain, so our application root becomes py.hostplus.top.
   • Application URL: Select the domain or subdomain you want to use.
   • Application startup file: Leave it blank for now (we’ll configure this later).
   • Application Entry point: Leave it blank for now (we’ll configure this later).

4. Click Create and note the Virtual Environment Path displayed.

Step 2: Upload Your Django Project to cPanel

You can upload your Django project in two ways:

Option 1: Upload via File Manager

1. Go to Files section in the cPanel and click File Manager.
2. Navigate to the application root directory you set in Step 1.
3. Click Upload and select your Django project’s .zip file.

4. Extract the .zip file after uploading. Right-click the uploaded ZIP file and select ‘Extract‘ to unzip it.

Ensure that all files are located in the py.hostplus.top folder (or any preferred directory). If they are not, navigate to the extracted folder, select all files, and move them to the py.hostplus.top folder or your chosen directory.

Suggested Reading: How to Upload Your Website (in 3 Simple Steps)

Option 2: Clone from GitHub

1. Open Terminal from cPanel or connect via SSH.
2. Navigate to the application directory:

cd /home/yourusername/yourprojectname

3. Clone your project from GitHub:

git clone https://github.com/yourusername/your-repository.git

Step 3: Install Dependencies

Your Django project has dependencies listed in requirements.txt. You can install them in two ways:

Method 1: Using Setup Python App Page

1. Go back to Setup Python App.
2. Click the Edit button for your application.
3. Find the Configuration files section and enter: requirements.txt then click Add button

4. Click “Run Pip Install”, then select the requirements.txt file to install the dependencies.

Method 2: Using the Terminal

1. Activate the virtual environment: copy and paste the Virtual Environment Path from Step 1 or manually activate the virtual environment.

Virtual Environment Path from Step 1

source /home/cpusrplus/virtualenv/py.hostplus.top/3.10/bin/activate && cd /home/cpusrplus/py.hostplus.top

Manually activate the virtual environment

source /home/yourusername/virtualenv/yourprojectname/3.x/bin/activate

2. Install dependencies: In the Terminal, navigate in your project directory and run the command to install the dependencies;

pip install -r requirements.txt

Step 4: Configure Application Startup File

1. Open Setup Python App and locate your application.
2. Find the Application Startup File section: Enter the location of your wsgi.py file. In my case, it is studybud/wsgi.py, then save and restart the application.

3. Alternatively, you can keep the passenger_wsgi.py file and follow the rest of the process to modify it accordingly.
4. Inside your project folder, edit the passenger_wsgi.py file and add the following code snippet:

import os
import sys

# Adjust this path
sys.path.insert(0, "/home/yourusername/yourprojectname")

os.environ['DJANGO_SETTINGS_MODULE'] = 'yourprojectname.settings'

from django.core.wsgi import get_wsgi_application
application = get_wsgi_application()

Remember to update the following with your Django project directory:

sys.path.insert(0, "/home/yourusername/yourprojectname")

For example, in my case, since I’m using a subdomain, it would be:

sys.path.insert(0, "/home/cpusrplus/py.hostplus.top/studybud")

Additionally, update your Django settings module:

os.environ['DJANGO_SETTINGS_MODULE'] = 'yourprojectname.settings'

For example:

os.environ['DJANGO_SETTINGS_MODULE'] = 'studybud.settings'

5. Restart the application in Setup Python App.

Suggested Reading:

• How to Set Up a MySQL Database & User in cPanel (2 Easy Methods)
• How to Set Up a PostgreSQL Database and User in cPanel

Step 5: Configure Allowed Hosts

Edit the settings.py file inside your Django project:

ALLOWED_HOSTS = ['yourdomainname.com', 'www.yourdomainname.com']

If your site is on a subdomain:

ALLOWED_HOSTS = ['sub.yourdomainname.com']

Save the file and restart your application.

How to Use MySQL Instead of SQLite3 in Django on cPanel

Step 1: Create a MySQL Database in cPanel

1. Navigate to MySQL® Databases under the Databases section.
2. Under Create New Database, enter a name (e.g., mydjango_db) and click Create Database.
3. Scroll down to MySQL Users and create a new database user (e.g., mydjango_user).
4. Assign a strong password and click Create User.
5. Scroll to Add User to Database, select your database and user, then click Add.
6. Grant All Privileges and click Make Changes.

For a step-by-step guide on creating a MySQL database in cPanel, follow this illustrated tutorial: How to Set Up a MySQL Database & User in cPanel (2 Easy Methods).

Step 2: Install MySQL Connector for Python

If you haven’t installed mysqlclient, do so via:

1. Execute Python Script. Go back to Setup Python App and click to edit your application. Scroll to the Configuration files section.

2. Terminal. Activate the virtual environment. source /home/yourusername/virtualenv/yourprojectname/3.x/bin/activate && cd /home/yourusername/yourprojectname

pip install mysqlclient

If that fails, try:

pip install pymysql

Then, add this to your Django project’s __init__.py file (same directory as settings.py):

import pymysql
pymysql.install_as_MySQLdb()

Step 3: Configure MySQL in Django settings.py

Open your settings.py and replace the SQLite3 settings with the MySQL configuration:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'yourusername_mydjango_db',  # Replace with your cPanel database name
        'USER': 'yourusername_mydjango_user',  # Replace with your cPanel MySQL username
        'PASSWORD': 'your_password',  # Replace with your MySQL password
        'HOST': 'localhost',  # cPanel MySQL host
        'PORT': '3306',  # Default MySQL port
    }
}

Step 4: Apply Migrations

Run the following commands to apply database changes:

python manage.py migrate

If you need a superuser, create one:

python manage.py createsuperuser

Step 5: Restart the Application

1. Go to cPanel > Setup Python App.
2. Restart your Django application.
3. Visit your site and check if everything is working.

Step 6: Common Errors and Fixes

Error 1: Module Not Found

Solution:

• Make sure dependencies are installed correctly using: pip install -r requirements.txt
• Restart the application in Setup Python App.

Error 2: Internal Server Error (500 Error)

Solution:

• Check your passenger_wsgi.py file for any incorrect paths.
• Review stderr.log in the Django application project folder.
• Verify that ALLOWED_HOSTS includes your domain.

Error 3: Static Files Not Loading

Solution:

1. Add the following to settings.py:

STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'static')

2. Run:

python manage.py collectstatic

3. Ensure the static files directory is accessible.

Error 4: Database Connection Issues

Solution:

• If using SQLite, check that the database file is in the correct location.
• If using MySQL/PostgreSQL, ensure the credentials in settings.py match your cPanel database.
• If migrations fail, ensure MySQL user privileges are set correctly.
• If you see mysqlclient errors, try installing pymysql instead.
• Verify that the database host is set to localhost.

Conclusion

Deploying a Django application on cPanel is straightforward when you follow the correct steps. From setting up your Python environment to configuring the startup file, this guide provides everything you need to launch your app successfully.

Still facing issues? Drop a comment or reach out to Aveshost support for additional assistance!

Happy coding!

Suggested Reading:

• How to Deploy Angular App on cPanel: CSR & SSR Guide
• How To Deploy a Node.js App on cPanel (The Ultimate Guide)
• How to Deploy Laravel Project on cPanel
• How to Set Up a PostgreSQL Database and User in cPanel
• How to Set Up a MySQL Database & User in cPanel (2 Easy Methods)

Frequently Asked Questions (FAQs)

To deploy Angular app on cPanel may seem challenging at first, but once you understand the process, it becomes straightforward and easy to manage!

If you’re an Angular developer looking to deploy your application on a cPanel hosting environment, you’ve come to the right place. Many shared hosting providers like Aveshost use cPanel, making it a convenient and budget-friendly option for deploying Angular apps.

However, setting up an Angular app on cPanel requires understanding how to configure both client-side and server-side deployments properly.

In this guide, we’ll walk you through everything you need to know about deploying an Angular app on cPanel. We’ll cover both client-side rendering (CSR) and server-side rendering (SSR) using Angular Universal for Angular versions 16 and earlier, and the new Angular SSR for Angular v17, v18, and v19.

Prerequisites

Before we begin, make sure you have:

• A cPanel hosting account: If you don’t have cPanel hosting, follow this guide to purchase one: “How to Buy cPanel Hosting”
• A domain or subdomain set up
• Angular installed on your local machine
• FTP or cPanel File Manager access
• Basic knowledge of Angular CLI and hosting environments

Understanding the Basics: Client-Side vs. Server-Side Rendering

Before diving into the deployment process, let’s briefly touch on the difference between client-side rendering (CSR) and server-side rendering (SSR).

• Client-Side Rendering (CSR): In CSR, the browser downloads a minimal HTML file and then executes JavaScript to render the application. This is the default behavior for Angular.
• Server-Side Rendering (SSR): With SSR, the server pre-renders the application and sends the fully rendered HTML to the browser. This improves initial load times and SEO.

Crucial Node.js Version Synchronization

Before you start building and deploying, a critical step is ensuring your Node.js versions align. Discrepancies here can lead to frustrating and hard-to-debug issues.

• Checking cPanel’s Node.js Version:
  • Navigate to “Setup Node.js App” within your cPanel.
  • Click on “+CREATE APPLICATION” (you don’t have to fully create one).
  • Locate the “Node.js version” dropdown menu.
  • Note the version displayed. This is the Node.js version your cPanel environment is using.
• Matching Your Local Node.js Version:
  • It’s imperative that the Node.js version on your local development machine matches the one on your cPanel server.
  • If you find a mismatch, adjust your local Node.js version accordingly.
  • Using Node Version Manager (nvm):
    • For Windows OS, macOS, and Linux users, the Node Version Manager (nvm) is highly recommended. It allows you to easily switch between different Node.js versions.
    • If you don’t have nvm, you can find installation instructions by searching for “nvm install” and your operating system.
    • After installing NVM, you can install the required node version by typing nvm install <version number>. For example nvm install 18.
    • Then to use that version you can type nvm use <version number>. For example nvm use 18.
  • Once you have the correct version installed and being used, run node -v in your terminal to verify that the correct version is active.
• Build After Verification:
  • After confirming that your local Node.js version matches cPanel’s, thoroughly test your Angular application locally to ensure it functions correctly.
  • Once you have verified that your application is working correctly, then and only then should you build your angular application for deployment.

By ensuring Node.js version consistency, you’ll significantly reduce the likelihood of deployment-related errors and streamline the process.

How to deploy Angular app on cPanel: Client-side rendering (CSR)

A client-side Angular app is a static web application that doesn’t require a backend server. It’s essentially a collection of HTML, CSS, and JavaScript files served via a web server.

Step 1: Build the Angular App: Production Build

First, navigate to your Angular project folder and run:

ng build   OR 
ng build --configuration=production

This command generates a new dist folder in your project root, containing the browser directory with the compiled build files of your application.

Make sure there are no errors during the build process; any issues must be resolved before proceeding.

Additionally, the default build path (dist and its subfolder) can be customized in the angular.json file under the following option:

"options": {
  "outputPath": "dist/your-app-name"
}

Step 2: Upload to cPanel

Upload the content of the browser folder from the dist folder to your cPanel.

In your dist/your-app-name folder, zip the contents of the browser folder, not the browser folder itself. This is because you want the files inside the browser folder to be directly in your public_html (or your chosen subdirectory) after unzipping.

Learn more about how to upload your website files via File Manager or FTP.

Using cPanel File Manager

1. Log in to your cPanel.
2. Navigate to File Manager > public_html (or your subdomain directory).
3. Click Upload, then select zip file from the dist/your-app-name/browser folder.
4. Once uploaded, extract the zip file.

Ensure that all files are located in the public_html folder. If they are not, navigate to the folder where they are stored, select all files, and move them to the public_html folder or your chosen subdomain directory.

Step 3: Configure .htaccess for Angular Routing

Angular uses client-side routing, so direct URL navigation might not work without configuring .htaccess.

1. To view hidden files (such as .htaccess), click on Settings in the top-right corner and enable Show Hidden Files (dotfiles).

2. Create a .htaccess file inside public_html and add:

RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

This ensures that Angular’s routing works correctly without 404 errors.

Step 4: Test Your Deployment

Open your domain in a browser and ensure everything works smoothly. If you see a blank page, check the console for errors and verify that the base-href in index.html is correctly set:

<base href="/">

Angular Universal Deployment (Angular v16 and below): Combining SSR and Prerendering on cPanel

Server-side rendering (SSR) improves SEO, performance, and initial load time. For Angular v16, v15, v14, v13, v12 and earlier, Angular Universal is required for Server-Side Rendering (SSR). If you haven’t installed Angular Universal yet, follow Step 1. Otherwise, proceed to Step 2.

Step 1: Add Angular Universal to Your Project

ng add @nguniversal/express-engine

This sets up an Express server to handle SSR.

Step 2: Modify the server.ts file

First, replace this code in the server.ts file:

function run(): void {
const port = process.env['PORT'] || 4000;

// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}

With the new code:

function isRunningOnApachePassenger(): boolean {
return moduleFilename.includes('lsnode.js');
}

function run(): void {
// Start up the Node server
const server = app();

if (isRunningOnApachePassenger()) {
server.listen(() => {
console.log('Node Express listening to Passenger Apache');
});
return;
}

const port = process.env['PORT'] || 4000;

server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}

Second, replace:

if (
moduleFilename === __filename ||
moduleFilename.includes('iisnode')
)

With this code:

if (
moduleFilename === __filename ||
moduleFilename.includes('iisnode') ||
isRunningOnApachePassenger()
)

Step 3: Building your Angular Universal Application

You can customize the output directories for your browser and server builds (within dist) by modifying the angular.json configuration file:

"options": {
"outputPath": "dist/your-app-name",
}

Build the App

npm run build:ssr

Verify that the build process completes without errors. Resolve any errors before proceeding.

This generates dist/your-app-name/server and dist/your-app-name/browser folders.

Step 4: Preparing Your Project for Deployment

1. On your local machine, navigate to your Angular project folder.
2. Enable visibility for any hidden files (if necessary).
3. To optimize your deployment package, it’s essential to exclude certain files and folders:
   • node_modules: This folder contains your project’s dependencies and is typically very large. We’ll install these dependencies on the server later.
   • .git: This folder contains your project’s Git repository and is not needed for deployment.
   • README.md and .gitignore: These are development-related files and are not required on the production server.
4. Select all the remaining files and folders in your Angular project folder.
5. Create a ZIP archive of the selected files.

Step 5: Upload the archive file to cPanel

1. In your cPanel, go to File Manager and create a folder outside the public_html directory (e.g., app).

NOTE: You cannot directly configure a Node.js application within the public_html folder of your main domain. Node.js applications require a dedicated, separate directory outside of public_html

2. Within the just created App folder, select ‘Upload‘ from the top menu.
3. Click the ‘Select File‘ button to locate and select the ZIP archive you created on your local machine. The upload process will start as soon as you select the file.
4. Once the upload is complete, return to the directory where you uploaded the ZIP archive.
5. Right-click the uploaded ZIP file and select ‘Extract‘ to unzip it.

Ensure that all files are located in the App folder. If they are not, navigate to the extracted folder, select all files, and move them to the App folder or your chosen directory.

Learn how to upload your website files via File Manager or FTP.

Step 6: Set Up a Node.js Application in cPanel

• In the cPanel, Scroll down to the Software section.
• Click Setup Node.js App.
• Click + Create Application.
• Node.js version selection: It’s critical to select the Node.js version that matches the one you used for local development. This ensures compatibility and avoids potential runtime errors.
• Application mode: Select Production.
• Application root: Type app or your chosen directory
• Application URL: Choose your domain name.
• Application startup file: dist/your-app-name/server/main.js

If you have any environment variables, you can add them from your .env or .env.local file.

• Click on CREATE to create the Node.js application.
• Stop the app. Then, go to ‘Detected Configuration Files’. If package.json doesn’t appear, refresh the page.
• Click “Run NPM Install” to install the dependencies specified in your package.json file.

Note: You can also use the Terminal to install dependencies. Simply return to your cPanel dashboard or search for “Terminal” in the top search bar.

Activate the Node.js environment. Click to copy the provided command at the top and execute it in the terminal. 

source /home/username/nodevenv/app/20/bin/activate && cd /home/username/app
Example: source /home/username/nodevenv/app/20/bin/activate && cd /home/username/app

(Replace 20 with your selected Node.js version.)

Once the Node.js environment is activated, run the npm install command.

Note: You don’t need to run the npm install command again in the Terminal if “Run NPM Install” was successfully executed earlier.

• Restart the application by clicking the ‘START APP‘ button.

Open a new browser tab and navigate to your website’s URL. You should now see your Angular Universal application successfully running.

Congratulations! You’ve successfully deployed your Angular Universal application on cPanel.

Angular v17, v18, v19: SSR and Prerendering Deployment on cPanel

To deploy Angular on cPanel, Angular 17+ introduced a more streamlined SSR setup, removing the need for Angular Universal. Here’s how to deploy it on cPanel:

If you haven’t set up Angular’s new SSR, follow Step 1. If you’ve already added @angular/ssr, proceed to Step 2.

Step 1: Add Angular’s New SSR to Your Project

ng add @angular/ssr

Step 2: Build Your SSR App

You can customize the output directories for your browser and server builds (within dist) by modifying the angular.json configuration file:

"options": {
"outputPath": "dist/your-app-name",
}

To build an Angular v17+ application:

1. In your terminal, navigate to the folder containing your Angular project.
2. Run the build command:

ng build

3. Verify that the build process completes without errors. Resolve any errors before proceeding.

This command builds your Angular application, generating output files organized into browser and server directories. The browser directory contains client-side files, and the server directory contains server-side files.

Step 3: Preparing Your Project for Deployment

1. On your local machine, navigate to your Angular project folder.
2. Enable visibility for any hidden files (if necessary).
3. To optimize your deployment package, it’s essential to exclude certain files and folders:
   • node_modules: This folder contains your project’s dependencies and is typically very large. We’ll install these dependencies on the server later.
   • .git: This folder contains your project’s Git repository and is not needed for deployment.
   • README.md and .gitignore: These are development-related files and are not required on the production server.
4. Select all the remaining files and folders in your Angular project folder.
5. Create a ZIP archive of the selected files.

Step 4: Upload the archive file to cPanel

1. In your cPanel, go to File Manager and create a folder outside the public_html directory (e.g., app).

NOTE: You cannot directly configure a Node.js application within the public_html folder of your main domain. Node.js applications require a dedicated, separate directory outside of public_html

2. Within the just created App folder, select ‘Upload‘ from the top menu.
3. Click the ‘Select File‘ button to locate and select the ZIP archive you created on your local machine. The upload process will start as soon as you select the file.
4. Once the upload is complete, return to the directory where you uploaded the ZIP archive.
5. Right-click the uploaded ZIP file and select ‘Extract‘ to unzip it.

Ensure that all files are located in the App folder. If they are not, navigate to the extracted folder, select all files, and move them to the App folder or your chosen directory.

Learn how to upload your website files via File Manager or FTP.

Step 5: Set Up a Node.js Application in cPanel

• In the cPanel, Scroll down to the Software section.
• Click Setup Node.js App.
• Click + Create Application.
• Node.js version selection: It’s critical to select the Node.js version that matches the one you used for local development. This ensures compatibility and avoids potential runtime errors.
• Application mode: Select Production.
• Application root: Type app or your chosen directory
• Application URL: Choose your domain name.
• Application startup file: dist/your-app-name/server/server.mjs

If you have any environment variables, you can add them from your .env or .env.local file.

• Click on CREATE to create the Node.js application.
• Stop the app. Then, go to ‘Detected Configuration Files’. If package.json doesn’t appear, refresh the page.
• Click “Run NPM Install” to install the dependencies specified in your package.json file.

Note: You can also use the Terminal to install dependencies. Simply return to your cPanel dashboard or search for “Terminal” in the top search bar.

Activate the Node.js environment. Click to copy the provided command at the top and execute it in the terminal. 

source /home/username/nodevenv/app/20/bin/activate && cd /home/username/app
Example: source /home/username/nodevenv/app/20/bin/activate && cd /home/username/app

(Replace 20 with your selected Node.js version.)

Once the Node.js environment is activated, run the npm install command.

Note: You don’t need to run the npm install command again in the Terminal if “Run NPM Install” was successfully executed earlier.

• Restart the application by clicking the ‘START APP‘ button.

Open a new browser tab and navigate to your website’s URL. You should now see your New Angular SSR application successfully running.

Congratulations! You’ve successfully deployed your Angular SSR application on cPanel.

Troubleshooting Tips

1. Blank Screen After Deployment?

• Check the browser console for errors.
• Verify that base-href is correctly set in index.html.
• Ensure .htaccess is configured correctly.

2. Angular SSR Not Rendering on cPanel?

• Make sure Node.js is running.
• Verify that your Node.js version is compatible with your Angular application.

3. 500 Internal Server Error?

• Check stderr.log or error_log in your app folder or your chosen directory.
• Ensure correct permissions (use 755 for directories and 644 for files).

Conclusion

Deploying an Angular app on cPanel may seem tricky, but following these steps makes it simple. Whether you’re hosting a client-side or server-side app, cPanel can handle it with the right configurations.

Have any questions? Drop them in the comments below!

Suggested Reading:

• How To Deploy a Node.js App on cPanel (The Ultimate Guide)
• How to Deploy Laravel Project on cPanel
• How to Buy cPanel Hosting for Your Website: Beginner’s Guide
• How to Set Up a MySQL Database & User in cPanel (2 Easy Methods)
• 50+ Essential Git Commands (With Downloadable Cheat Sheet)
• Top 90+ Essential Linux Commands Plus Cheat Sheet

Frequently Asked Questions (FAQs)