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

If you’ve ever dreamed of building your own website, launching a blog, starting an online store, or creating a portfolio to showcase your work, there’s a good chance someone has recommended WordPress to you. But what exactly is WordPress? And why do so many people swear by it?

In this beginner-friendly guide, we’re going to break it all down for you in simple terms. By the end, you’ll know exactly what WordPress is, what it does, how it works, and why it’s one of the best tools for building websites—whether you’re a complete newbie or someone with a bit of tech experience.

Let’s dive in!

What Is WordPress?

WordPress is a content management system (CMS)—basically, a software that helps you create, manage, and publish content on the web without needing to write code from scratch.

It started in 2003 as a simple blogging platform, but it has grown into a powerful tool that now powers over 43% of all websites on the internet. From small personal blogs to major news sites and online stores, WordPress is everywhere.

There are actually two versions of WordPress, and we’ll explain both in a moment.

WordPress.com vs. WordPress.org: What’s the Difference?

This is one of the most confusing parts for beginners, but don’t worry—we’ll clear it up.

1. WordPress.com

This is a hosted platform. You sign up for a free or paid plan, and WordPress takes care of everything—hosting, backups, updates, security, and more. It’s easy to use, but it comes with some limitations unless you pay for advanced features.

• Pros: Easy to start, no hosting needed, great for beginners.
• Cons: Limited flexibility (unless you upgrade), fewer customization options.

Think of WordPress.com as renting a house. You live in it, but someone else owns and manages the property.

2. WordPress.org

This is the self-hosted version. You download the WordPress software (which is 100% free), install it on your own web hosting account, and you’re in full control of your site.

• Pros: Full freedom to customize, access to thousands of themes and plugins, great for serious websites or businesses.
• Cons: You need to buy a domain and hosting, and you’re responsible for maintenance (though it’s not hard).

Think of WordPress.org as owning your home. It takes a bit more effort, but you get total control.

In this guide, when we say “WordPress,” we’ll mostly be referring to WordPress.org, the self-hosted version.

What Can You Build With WordPress?

One of the biggest reasons WordPress is so popular is its versatility. You’re not just limited to blogs—WordPress can handle just about anything. Here are a few examples:

• Personal blogs
• Business websites
• eCommerce stores (with WooCommerce)
• Portfolios
• Online courses
• Membership sites
• Forums
• News or magazine sites
• Nonprofit websites
• Booking or appointment sites

If you can imagine it, you can probably build it with WordPress.

Who Uses WordPress? (Big Names Using WordPress)

You might be wondering—if WordPress is free and open to everyone, do any big companies actually use it? The answer is a big yes! WordPress isn’t just for bloggers or small businesses. Some of the biggest brands, celebrities, and organizations in the world trust WordPress to power their websites.

Here are a few impressive examples:

Education & Government

• Harvard Gazette – Harvard University uses WordPress for its online publications.
• Whitehouse.gov The official Whitehouse.gov website is powered by WordPress

News & Media

• The New York Times Company – Their corporate site runs on WordPress.
• BBC America – The entertainment arm of the BBC uses WordPress for publishing.

Celebrities & Public Figures

• Katy Perry – Pop superstar Katy Perry uses WordPress to showcase her work and connect with fans.
• Snoop Dogg – Yes, even the Doggfather himself uses WordPress!

Businesses & Corporations

• Microsoft News & Microsoft Blog – Microsoft uses WordPress to run multiple blogs, including their official news site.
• Sony Music – Their artist pages and entertainment blogs are powered by WordPress.
• Facebook Newsroom – Meta’s blog was built using WordPress for a long time.

What Does This Mean for You?

If WordPress is trusted by household names and global enterprises, it’s more than capable of handling your website—whether you’re starting a personal blog, running a startup, or growing a large-scale online business.

The beauty of WordPress is that it scales with you. You can start small and expand as your needs grow—without ever needing to switch platforms.

How Does WordPress Work?

Let’s break this down into a few simple components:

1. Themes

A WordPress theme controls the design and layout of your website. There are thousands of free and premium themes available. You can pick one that suits your style or niche and customize it to match your brand.

2. Plugins

Plugins are like apps for your WordPress site. Want to add a contact form? Install a plugin. Need SEO help? There’s a plugin for that too.

There are over 59,000 plugins in the official WordPress Plugin Directory—and many more from third-party developers.

Popular plugins include:

• Rank Math or Yoast SEO (for SEO)
• WooCommerce (for online stores)
• Elementor (for drag-and-drop page building)
• WPForms (for contact forms)
• Wordfence (for security)

3. Dashboard

Once you install WordPress, you get access to a user-friendly dashboard (admin area) where you can:

• Write and edit posts or pages
• Add images and videos
• Customize your theme
• Install plugins
• Manage comments
• Configure settings

No need to be a coding expert—though if you do know code, WordPress is extremely developer-friendly too.

Do You Need to Know Coding to Use WordPress?

Nope! You can build a beautiful and fully functional website without writing a single line of code. WordPress is built with beginners in mind.

That said, if you do know HTML, CSS, PHP, or JavaScript, you can unlock even more customization. But again, it’s totally optional.

How to Get Started With WordPress (Step-by-Step)

Here’s a simple roadmap to get your first WordPress site live:

Step 1: Choose a Domain Name

This is your web address (e.g., myawesomeblog.com).

Step 2: Choose a Web Host

For WordPress.org, you need a web hosting service. Popular WordPress hosting provider includes:

• Aveshost

Step 3: Install WordPress

Aveshost offers 1-click WordPress installation. It takes less than 5 minutes.

Step 4: Pick a Theme

Browse the WordPress theme directory or upload a premium theme. Customize your site’s look and feel.

Step 5: Install Plugins

Start with essential plugins (SEO, security, forms, backups), then add more as needed.

Step 6: Create Content

Add your pages (Home, About, Contact, etc.) and start blogging or uploading products/services.

Step 7: Launch Your Site

Once everything looks good, share it with the world!

Suggested Reading: How to Buy WordPress Hosting: Step-by-Step Guide

For a detailed, step-by-step guide on starting a WordPress blog, check out our recommended article: How to Start a WordPress Blog

Is WordPress Secure?

Yes—WordPress is secure by design, but like any software, it needs regular updates and basic precautions.

To keep your site safe:

• Use strong passwords
• Keep themes, plugins, and WordPress core updated
• Install a security plugin (like Wordfence or Sucuri)
• Backup your site regularly

Can You Sell Online With WordPress?

Absolutely! With the WooCommerce plugin, WordPress becomes a full-fledged eCommerce powerhouse.

You can:

• Sell physical or digital products
• Accept payments via PayPal, Stripe, etc.
• Manage inventory and shipping
• Offer discounts, coupons, and memberships

Plus, there are hundreds of WooCommerce extensions to supercharge your store.

Is WordPress Customizable?

Yes—and that’s one of its strongest features.

• Want to change your layout? Switch themes.
• Want new functionality? Install a plugin.
• Want to tweak colors, fonts, or sections? Use a page builder like Elementor.
• Know some code? Customize everything from the ground up.

Whether you’re a creative DIYer or a professional developer, WordPress gives you the tools to build exactly what you envision.

Is WordPress Free?

Yes, the WordPress software itself is 100% free. It’s open-source, which means anyone can use, modify, and redistribute it.

However, to create a live website, you’ll still need to pay for:

• Domain name (around $12–20/year)
• Web hosting (as low as $1–10/month)
• Optional: Premium themes or plugins

You can absolutely build a site on a small budget—or invest more for advanced features and better performance.

Why Use WordPress? (Top Benefits)

Here’s a quick rundown of why WordPress is such a big deal:

Beginner-friendly
Free and open-source
Flexible and scalable
Massive community support
Thousands of themes and plugins
SEO-friendly
Great for blogs, business sites, and eCommerce
Regular updates and improvements

Final Thoughts: Should You Use WordPress?

If you’re looking for a powerful, flexible, and user-friendly platform to build your website, WordPress is one of the best choices out there. It doesn’t matter if you’re starting a blog, launching a side hustle, or building a professional site—WordPress can grow with you.

It’s trusted by millions, supported by a huge community, and packed with tools to help you succeed online.

So yes, if you’re wondering “Should I use WordPress?”—our answer is a resounding YES!

Got Questions?

Still not sure if WordPress is right for you? Want help choosing a theme, finding plugins, or setting things up?

Feel free to drop your questions in the comments or reach out to our support. We’re here to help you build something amazing!

Suggested Reading:

• What Is a Domain Name? Ultimate Guide for Beginners
• What is VPS Hosting? Complete Introduction to VPS Hosting
• How to Upload Your Website (in 3 Simple Steps)
• How to Start an Online Store in Ghana: Comprehensive Guide
• How to Choose a Blog Name: 107+ Niche Ideas
• How to Install WordPress from cPanel
• Domain Name vs. Web Hosting: Understanding the Difference

FAQs on What is WordPress?

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)