Software Engineer

Deploying Angular application on Apache server

If you need to deploy an Angular application on a server running Apache, and are making use of routing for navigation, you can’t just upload the built application onto the server and be done with it. As soon as you navigate to another path, the Apache server will try to look for that resource on the server and most likely will give you an 404 Not Found error.

You need to rewrite all the URLs to the index.html so that the Angular application can take care of it. Your server needs to support mod_rewrite for that. If that is the case, you can upload a file .htaccess with the following content to your directory where the Angular application resides in.

RewriteEngine on
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !^/assets/(.+)$
RewriteRule ^(.+)$ index.html?path=$1 [L]

This will rewrite all requests to the index.html file and append any extra path to it. Unless, the request is for an existing file or directory on the server, then it will not rewrite it. This is necessary for the additional resources that will need to be loaded, such as CSS and JS files and images.

In order to get the necessary feedback when a resource is requested that does not exist, the third condition excludes to rewrite any request located inside the assets folder.

9 Comments

  1. luis

    thank you.. this is the first blog that I found .. and it’s works

  2. Ravi

    Hi This is not working for apache 2.4 any reason.

    • Matthias Schoettle

      What exactly does not work? Do you get an error message?

  3. Manuel Montero

    Life saver!!!! Totally works on shared host 1&1!!!

  4. Hassan

    hello sir could you guide how to deploy this project in apache server when you convert your project in seo friendly using universal toolkit and by running npm run build:ssr it is working fine on localhost port localhost:8000 and it create dist/browser and server folder and server.js directories how to upload it on apache server in proper way and create seo friendly tags. please help your kindness

  5. Kala

    This isn’t working on localhost port 5500

  6. Ranga

    superb…works well…
    however, I had to make one small change to the last line:

    RewriteRule ^(.+)$ my-app/index.html?path=$1 [L]

    This is propably because I am having my app under the ‘my-app’ folder in the document root…

    • Karthik

      In the RewriteBase line u didn’t add that /my-app/ like this?

      • Matthias Schoettle

        If you have RewriteBase / you shouldn’t need the / at the beginning.

Leave a Reply to Karthik Cancel reply

Your email address will not be published. Required fields are marked *

© 2024 Matthias Schoettle

Theme by Anders NorenUp ↑