Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Patwan's avatar

Uploading Angular 8 SPA Consuming Laravel API to a shared Hosting

I have created a Single Page Application using Angular 8 which consumes a backend API build using Laravel. Everything is working well on my local machine. Now I want to upload it on a shared hosting via CPanel. I have started by uploading the backend Laravel project inside a subfolder in public_html folder called test-app.

This is because I have configured my domain settings to have a subdomain which points to this subfolder. So basically when a user types test-app.example.com it points to this subfolder where I want the SPA to sit on, if the user types example.com it points to my main website.

Next I have run ng-build on my Angular project locally and the contents have been compiled into a dist folder. I have uploaded the dist folder onto the server but am not sure where to place it in my Laravel project so that when the user types test-app.exmaple.com the 1st page on the SPA opens. I want it to consume the API endpoints of the Laravel project it is sitting on.

.htaccess inside app folder inside test-app subfolder where I want my SPA to sit on

DirectoryIndex public/index.php
<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

    #Redirecting to https
    RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
    RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
    RewriteEngine On 
    RewriteCond %{SERVER_PORT} 80 
    RewriteRule ^(.*)$ https://test-app.example.com/ [R=301,L]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ / [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ public/index.php [L]

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    ## Fonts cache
    ExpiresActive on

    # Add correct content-type for fonts
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-font-ttf .ttf
    AddType application/x-font-opentype .otf
    AddType application/x-font-woff .woff
    AddType image/svg+xml .svg

    # Compress compressible fonts
    AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

    ExpiresActive on
    ## end fonts cache
</IfModule>


<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/json "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
# END Caching

# BEGIN cPanel-generated php ini directives, do not edit
# Manual editing of this file may result in unexpected behavior.
# To make changes to this file, use the cPanel MultiPHP INI Editor (Home >> Software >> MultiPHP INI Editor)
# For more information, read our documentation (https://go.cpanel.net/EA4ModifyINI)
<IfModule php5_module>
   php_flag asp_tags On
   php_flag display_errors On
   php_value max_execution_time 180
   php_value max_input_time 128
   php_value max_input_vars 1000
   php_value memory_limit 130M
   php_value post_max_size 180M
   php_value session.gc_maxlifetime 1440
   php_value session.save_path "/var/cpanel/php/sessions/ea-php56"
   php_value upload_max_filesize 130M
   php_flag zlib.output_compression On
</IfModule>
# END cPanel-generated php ini directives, do not edit

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php71” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php71___lsphp .php .php7 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit
0 likes
1 reply
ideaguy3d's avatar

It's probably best to put a framework like Laravel in the root folder and not a sub folder.

I'm using AngularJS 1.6 for the UI (not Angular), I deploy my AngularJS 1.6 app to Google Cloud.

I deploy my PHP Framework to my web hosting provider much like how you're describing, but I place it in the root folder. Then enable CORS (which is better than the .htaccess headache)

So my AngualrJS 1.6 app is living on a completely different server and it works for me.

This is better I think because then the PHP code is completely separate from the mobile and web browser app and it can request/respond to other servers if needed.

Please or to participate in this conversation.