Search code examples
angularapache.htaccesssubdomain

Deploying Angular app to Apache server subdomain


I'm trying to deploy my Angular 9 app to an Apache server at the subdomain level, but I'm stuck. I can't figure out how to configure my server and/or .htaccess file to make ngapp.domain.nl serve the Angular index.html file.

Steps taken so far:

  • I build my Angular app using ng build --prod, resulting in a distribution folder (dist/ngapp/)
  • I used the control panel of my host provider to create a subdomain called 'ngapp'. This resulted in the creation of a subdomain folder. This folder is located at root/subdomains/ngapp. I placed everything that was included in my /ngapp/ distribution folder in it. See images of folder structure here.
  • I configured my .htaccess as described in Angular's documentation and placed it in my /ngapp/ together with my distribution files. See the code below.
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

The .htaccess code, however, is not configured for a subdomain, but I can't figure out how to alter this code to make it suitable. Nor do I know if I placed the .htaccess file in the correct folder.

Also I'm not sure if my DNS settings are as they should be.

Subdomain behavior as is

When I visit my subdomain - ngapp.domain.nl - it shows a default page (created by my hosting provider) that states the subdomain is taken. It does this for every subdomain I place in front of my domain though.

Any help would be appreciated :)

EDIT: added link to images of folder structure


Solution

  • Fix: removed auto-generated index.php that was in the /ngapp/ subdomain folder.

    This index.php was loaded instead of my index.html. The index.php loaded the default provider page. Everything else was set up correctly.