$ U.S. Dollar€ Euro£ British PoundC$ Canadian DollarsA$ Australian DollarsRs Indian Rupees¥ China Yuan RMBMore Info
How to deploy Angular Applications in cPanel
Before you begin, make sure that the Angular CLI (Command Line Interface) is installed on your system. If it isn’t, follow these steps to install it:
1. Open a terminal or command prompt.
2. Run the following command to install Angular CLI globally:
npm install -g @angular/cli
3. After the installation is complete, verify it by running the following command:
ng version
If the command returns a version number, the Angular CLI has been successfully installed.
Next, check if the node_modules folder is present in your app directory. If it’s not, run the following command:
npm install
Lastly, check the Node.js version in cPanel by navigating to Setup Node.js App >> +CREATE APPLICATION >> Node.js version in the drop-down menu.
Ensure that the Node.js version on your local computer matches the one in cPanel. If you have a different Node.js version, adjusting it on your local device is recommended. For example, you can use the Node Version Manager (nvm) for Windows OS, macOS, and Linux.
Once the Node.js version on your local computer matches the one on cPanel, you should check if your Angular application works correctly and then build it.
To create a production build of your Angular application, open the app’s content in your local machine's code editor (IDE) and run the following command:
Step 2: Upload the content of the browser folder from the dist folder to your cPanel
Use File Manager or an FTP client like FileZilla to upload the content of the browser folder to your hosting. Make sure to upload the content of the browser folder, not the folder itself.
After importing the compressed folder, extract the content from the website’s root folder (found in the Domain menu). For the main domain, use the public_html folder, and for addon domains and subdomains, use their respective root folders.
For uploading files via File Manager:
Log into your cPanel
Navigate to Domains section >> Domains menu:
Go to your website’s root directory
Select Upload from the top menu
Choose the compressed file from your local machine and start the upload
When the upload is complete, go back to the website directory
Right-click on the uploaded file and choose Extract:
Step 3: Create a .htaccess file
This is a crucial step for routing. Without the .htaccess file, you might encounter a “404 Not Found” error when trying to navigate to other pages.
Make sure the Show Hidden Files (dotfiles) option in the Settings menu is enabled:
Choose the +File button, and a new pop-up box will appear. Enter the name .htaccess and select Create New 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 2: Building your Angular Universal App
Note that the path of the build folder’s browser and server (dist and its subfolder) can be changed in the angular.json file:
Open your terminal and navigate to your project directory.
Run the build command:
npm run build:ssr
Ensure that there are no errors during the build process. If there are, they need to be fixed before going on.
This command will compile your application and output the build files. The build files will be organized into two separate directories: browser and server. These directories contain the compiled files for the respective environments.
Step 3: Prepare Files for Deployment
Open the file manager and locate your Angular project files.
Enable visibility for any hidden files.
Exclude the following folders/files:
node_modules;
.git;
README.md;
.gitignore.
Select all remaining files and folders.
Create a ZIP archive of the selected files.
It's important to exclude the node_modules directory because it’s often large and not needed for deployment. The necessary modules will be installed on the server at a later stage.
Step 4: Upload the archive file to your cPanel on shared hosting
NOTE: The public_html folder of the main domain cannot be used to configure the Node.js server. All files and folders should be in the app’s folder, not including public_html.
Here’s how to upload files via File Manager:
Log into your cPanel.
Navigate to File Manager.
Select or create a directory for your website content.
Select Upload in the top menu.
Choose the compressed file from your local machine and start the upload.
When the upload is complete, go back to the website directory.
Right-click on the uploaded file and choose Extract.
Step 5: Setting Up a Node.js App on cPanel with the main.js file
Node.js version: select the version that matches the Node.js version you used when developing your app locally.
Application mode: select Production.
Application root: type the path of the directory where your website content is uploaded.
Application URL: select 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. For more information on environment variables in Angular, here’s the configuring application environments documentation.
Choose CREATE to create the Node.js application.
Stop the app temporarily, then navigate to Detected Configuration Files.
Click Run NPM Install to install Node.js packages.
Start the app again by choosing START APP.
Open a new tab in your web browser and enter your website URL. You should see your Angular app running.
Congratulations! Your Angular Universal application should now be deployed on cPanel.
Open your terminal and navigate to your project directory.
Run the build command:
ng build
Ensure that there are no errors during the build process. If there are, they need to be fixed before going on.
This command will compile your application and output the build files. The build files will be organized into two separate directories: browser and server. These directories contain the compiled files for the respective environments.
Step 2: Prepare Files for Deployment
Open the file manager and locate your Angular project files.
Enable visibility for any hidden files.
Exclude the following folders/files:
node_modules;
.git;
README.md;
.gitignore.
Select all remaining files and folders.
Create a ZIP archive of the selected files.
It's important to exclude the node_modules directory because it’s often large and not needed for deployment. The necessary modules will be installed on the server at a later stage.
Step 3: Upload the archive file to your cPanel on shared hosting
NOTE: The public_html folder of the main domain cannot be used to configure the Node.js server. All files and folders should be in the app’s folder, not including public_html.
How to upload files via File Manager:
Log into your cPanel.
Navigate to File Manager.
Select or create a directory for your website content.
Select Upload in the top menu.
Choose the compressed file from your local machine and start the upload.
When the upload is complete, go back to the website directory.
Right-click on the uploaded file and choose Extract.
Step 4: Setting Up a Node.js App on cPanel with the server.mjs file
Node.js version: select the version that matches the Node.js version you used when developing your app locally.
Application mode: select Production.
Application root: type the path of the directory where your website content is uploaded.
Application URL: select 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. For more information on environment variables in Angular, here’s the configuring application environments documentation.
Choose CREATE to create the Node.js application.
Stop the app temporarily, then navigate to Detected Configuration Files.
Click Run NPM Install to install Node.js packages.
Start the app again by choosing START APP.
Open a new tab in your web browser and enter your website URL. You should see your Angular app running.
Congratulations! Your Angular SSR application should now be deployed on cPanel.
