How to configure Apache for ReactJS and AngularJS

You’ve written a new frontend in Angular, React, or Vue.js, but your application routes don’t work when uploaded to your Apache web server. Learn how to configure Apache to work with your JavaScript routes.

JavaScript Routes

Routes defined in our frontend application are only visible to single-page style apps. A web server won’t understand them.

A web server’s default behavior to serve physical files and directories from the file system. With single page apps your view changes based on the URI accessed, but the file is always the same — typically index.html.

To address this issue we need to configure Apache to forward all URI to your index.html file. We can do that by creating URL Rewrite rules in your Apache configuration file or vhost.

Enabling the Apache Rewrite Mod

In order to perform URL rewrites, we need to enable the Apache module first. Depending on Linux distribution you are using there are several methods of doing this.

CentOS 7

The base Apache 2 install for CentOS 7 enables rewrite module by default. No additional work is needed.

Ubuntu 16.04

The base Apache 2 install for Ubuntu 16.04 is slimmed down. Outside of the basics, most modules are either not installed or are disabled. The Rewrite module is installed, so we just need to enable it.

sudo a2enmod rewrite

After enabling the module we need to restart Apache 2 before it will use it. Run the following command to restart Apache.

sudo service apache2 restart

Ubuntu 18.04

The base Apache 2 install for Ubuntu 18.04 is slimmed down. Outside of the basics, most modules are either not installed or are disabled. The Rewrite module is installed, so we just need to enable it.

sudo a2enmod rewrite

After enabling the module we need to restart Apache 2 before it will use it. Run the following command to restart Apache.

sudo systemctl reload apache2

Adding Rewrite Rules

HTACCESS

The simplest method to enable URL rewrites for your application is to drop in a .htaccess file into the web document root — located under /var/www/html by default.

1. Inside of your web directory root, create a new .htaccess file.
2. Add the following lines.

     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]

3. Save your changes.

Apache Configuration File

Rewrites can also be written inside of your website’s configuration file. The location of the configuration file depends on a couple of factors  — which Linux distribution you are running and whether you are using a custom vhost file.

Ubuntu

The default configuration file for a website hosted on Ubuntu is /etc/apache2/sites-available/default  . If you have a custom vhost or site file, it will be in the same directory with a different name.

CentOS

The default configuration file for a site hosted on CentOS is /etc/https/conf/httpd.conf. VHosts, if you are using one, are typically hosted under /etc/https/conf.d.

1. Open the Apache configuration file for your site into a text editor.
2. Look for the Directory directive for your document root. The default is /var/www/html. You should see something similar to the following.

   ...
   

3. Add the following lines.

     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
   
   

4. Save your changes and exit the text editor.
5. Test your configuration to ensure there are no syntax errors.
6. Apply your settings.

After Apache has been reloaded open a new web browser window and test your routes. If all is configured properly you should be able to access the different pages for your frontend app.