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)

To deploy a Node.js application on cPanel might seem a bit tricky at first, especially if you’re more accustomed to traditional PHP deployments. But don’t worry! By the end of this guide, you’ll be confident enough to get your Node.js app up and running on cPanel smoothly.

Let’s dive into every detail, from setting up your environment to troubleshooting common issues.

Why Deploy Node.js on cPanel?

cPanel is one of the most popular web hosting control panels. It’s user-friendly, robust, and widely supported by hosting providers. If you’re developing with Node.js, deploying on cPanel allows you to take advantage of its powerful management tools while enjoying the speed and flexibility of Node.js.

Before We Begin: Prerequisites

Before diving into the deployment process, make sure you have the following ready:

• A Node.js Application: You should have a working Node.js application ready for deployment.
• cPanel Access: You’ll need access to your cPanel account, including your username and password. If you don’t have cPanel hosting, follow this guide to acquire it: “How to Buy cPanel Hosting”
• SSH Access (Optional): While some methods don’t require SSH, it’s highly recommended for easier management and deployment. Contact your hosting provider if you’re unsure how to enable SSH.
• Basic Understanding of Node.js and npm: Familiarity with Node.js and npm (Node Package Manager) will be beneficial.

Step 1: Accessing cPanel

Log into your cPanel dashboard. This is usually accessible at https://yourdomainname.com/cpanel or by visiting the hosting services page of your account dashboard.

Once inside the cPanel, locate the “Setup Node.js App” feature.

Step 2: Create a New Node.js Application

1. Scroll down to the Software section.
2. Click Setup Node.js App.
3. Click Create Application and configure the following:
   • Node.js Version: Select the required version.
   • Application Mode: Choose Production.
   • Application Root: Enter the directory where you will upload your app (e.g., /home/username/app).
   • Application URL: Choose the domain or subdomain.
   • Application Startup File: Enter server.js (or your app’s main file).

4. Click Create.

Congratulations! Your Node.js application has been successfully created. You can now visit your domain, where you should see a confirmation message similar to “It works! NodeJS 16.20.2“.

Step 3: Upload Your Application Files

1. Open File Manager in cPanel.
2. Navigate to the application root directory (e.g., /home/username/app).

3. Upload your project files, including package.json and server.js. On your local machine, navigate to your Node.js project folder and create a zip archive of your project files. While generally not recommended due to its size, including the node_modules folder in the zip archive is advisable if your cPanel hosting does not support terminal access or if the npm install command fails when executed via the terminal.

4. Extract the uploaded archive. Once extracted, navigate into the resulting folder, select all the files and folders within, and move them to your application directory (e.g., /app).

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

Step 4: Install Dependencies

If you have already uploaded your node_modules folder, skip this step and proceed to Step 5 or Step 6.

1. Return to Setup Node.js App.
2. Click the pencil icon “Edit the Application” under the Actions column to make changes.
3. Activate the Node.js environment. Click to copy the provided command and execute it in the terminal. Alternatively, you can click “Run NPM Install” to install the dependencies specified in your package.json file. While the “Run NPM Install” option is convenient, using the terminal is generally preferred, unless terminal access is unavailable on your hosting account.

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

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

Access The Terminal

1. Return to the cPanel dashboard
2. Scroll down to the Advanced section.
3. Click Terminal
4. Alternatively, use the cPanel search bar at the top of the interface to locate the terminal.

5. Paste the command copied from Step 4 into the terminal to activate the Node.js environment. Then, execute npm install to install the project dependencies.

If you encounter issues installing dependencies or if package installation is unsuccessful, there could be an issue with the installed Node.js version. Delete your current Node.js application setup and install a lower version, such as Node.js 16 or below.

Step 5: Connecting to Your Database (Optional)

If your Node.js app requires a database, follow one of the two guides below to create and configure the database within your application.

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

1. Locate the .env File
   • Navigate to your Node.js project directory.
   • If the .env file is not visible, click on Settings in the top-right corner and enable Show Hidden Files (dotfiles).
   • If the .env file is still missing, re-upload it from your local machine.
2. Edit the .env File
   • Open the .env file in a text editor.
   • Update the necessary database configurations as required.

DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=yourCpanelUsername_yourDbName
DB_USERNAME=yourCpanelUsername_yourDbUsername
DB_PASSWORD=yourDatabasePassword

3. Import your database file from your local machine
   • Export your database from your local development environment (e.g., XAMPP, WAMP).
   • In your cPanel, scroll down to the Databases section
   • Click phpMyAdmin
   • The database you created should appear in the left-hand panel. Click to select it.
   • Click Import at the top to upload your database from your local machine.

Suggested Reading: How to Import a Database in phpMyAdmin

Step 6: Restart Your Application

1. Return to Setup Node.js App.
2. Click Restart to apply the changes

Your Node.js app is now live!

Step 7: Setting Environment Variables (Optional)

To manage sensitive data like API keys, you’ll need to set environment variables.

• In Setup Node.js App, scroll down to Environment Variables.
• Click Add Variable and enter the Name and Value. For example:
  • Name: PORT
  • Value: 7000
• Save changes and restart the app.

You can then access these variables in your code using process.env.VARIABLE_NAME.

Video Tutorials

These video tutorials provide visual guidance, making it even easier to deploy your Node.js app on cPanel. Learn how to deploy to your main domain or a subdomain, following along with clear, concise demonstrations.

How To Deploy a Node.js App on cPanel Using the Main Domain (or Root Domain)

This video walks you through the process of deploying your Node.js application to your cPanel hosting account using your main domain name (e.g., domain.com). It covers setting up the necessary files, configuring your cPanel environment, and getting your app live on your primary domain. Perfect for beginners!

How To Deploy a Node.js App on cPanel Using a Subdomain

This video demonstrates how to deploy your Node.js application to a subdomain (e.g., app.domain.com) on your cPanel server. It covers the specific steps required for subdomain deployment, including setting up the subdomain in cPanel and configuring your application to run under the subdomain. Great if you want to host multiple applications on the same cPanel account!

Troubleshooting Common Issues

1. Website Showing 503 Error

If you’re unlucky, you may encounter the following error when trying to access your deployed Node.js website, as shown in the screenshot below.

To view the error logs, navigate to your Node.js application’s root directory (e.g., /app) within the File Manager.

Right-click the stderr.log file and select “View” (or the equivalent option in your file manager) to examine its contents.

server.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename server.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/cpusrplus/app/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead)

  code: 'ERR_REQUIRE_ESM'
}

If you encounter any of the errors displayed above, follow the corresponding steps to resolve them.

1. Edit the package.json file and change "type": "module" to "type": "commonjs".
2. Save the package.json file.
3. Return to Setup Node.js App.
4. Click Restart to apply the changes
5. Access your site; the error should be resolved.

2. Application Not Starting

• Check the startup file path and ensure it’s correctly set.
• Check the stderr.log in your Application Directory
• Look at the logs in File Manager → logs directory.

3. Dependencies Not Installing

• Make sure your package.json is present in the root directory.
• Make sure virtual environment for Node.js applications is activated.

source /home/username/nodevenv/app/16/bin/activate   #replace 16 with your Node.js version & app with your node.js application directory.

• Clear cache and reinstall dependencies

npm cache clean --force
npm install

Securing Your Node.js Application

1. Enable HTTPS: Use Let’s Encrypt SSL in cPanel to secure your application with HTTPS.
2. Firewall Configuration: Make sure the port used by your app is open.
3. Environment Variables: Never hardcode sensitive information. Always use environment variables.

Final Thoughts

Deploying a Node.js application on cPanel can be straightforward if you follow the right steps. This guide covered everything you need to get your Node.js app live on cPanel.

By leveraging cPanel’s powerful features and Node.js’s performance, you can build and deploy robust web applications effortlessly.

Happy coding!

Suggested Reading:

• How to Deploy Laravel Project on cPanel
• How to Remove .html, .php, or Both from URLs
• How to Buy cPanel Hosting for Your Website: Beginner’s Guide
• Top 90+ Essential Linux Commands Plus Cheat Sheet
• 50+ Essential Git Commands (With Downloadable Cheat Sheet)
• How to Flush DNS Cache on Windows, Mac, Linux & Browsers
• How to Redirect HTTP to HTTPS: Ultimate Guide to Secure Site
• How To Transfer Your Domain: A Step-by-Step Guide

Frequently Asked Questions (FAQs)