Hosting an Angular App on CPanel
This is a short tutorial on how to host an Angular app on a CPanel instance.
-
Create a Subdomain or Use an Existing Domain
- CPanel Menu -> Subdomains
After creating a subdomain, a directory is autogenerated in your CPanel filesystem in the format of subdomain.domain.tld. This is the folder we will be putting our website files into.
-
Issue SSL Certification (if newly created domain)
- CPanel Menu -> Let’s Encrypt SSL -> Issue a new certificate -> + Issue
CPanel doesn’t assign SSL certification by default for newly created subdomains. By using the Let’s Encrypt tool provided by CPanel, you can generate a free SSL certificate for your subdomain - letting users access your content under a HTTPS url.
-
Compile Website Files
- Terminal -> run ‘ng build’ command inside root of project directory.
Angular compiles your project to a folder called ‘dist’ which is generated within the project directory. These are the compiled files we will be using to populate your subdomain directory.
-
Upload contents of local ‘dist/[your-app]’ directory to the root of the CPanel Filesystem subdomain directory generated in step 1.
- CPanel Menu -> File Manager -> [your subdomain] files directory -> Upload
For compiled projects which make use of nested directories (folders within folders), I recommend using a tool like WinSCP or transferring via SSH, as the default File Manager provided in the CPanel web interface doesn’t handle files within nested folders.
-
Setup Request Redirects by editing the ‘.htaccess’ file located in the folder generated by subdomain creation in Step 1.
- CPanel Menu -> File Manager -> [your subdomain] files directory -> ‘.htacess’ file -> Edit
Add this code block:
RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]This will rewrite all requests from the registered domain’s navigation to the specific components of our angular application, and all non-file routes back to index.html.
You should now be able to navigate to the URL registered to this angular application.