Configure the Angular project along with WordPress in Apache

WordPress is considered to be one of the world's top Content Management systems (CMS). Having plugins and tools which allow easily to add different types of features such as Product Listing, Cart management, and payment options. It rightly holds a market share of 47% among all CMS is used on the Web. But what if you have a module that is made on a different framework from WordPress and you would like it to work on the same URL to have users trust your site. As it greatly impacts user trust level on the website. To avoid such a scenario we try to ship both WordPress and our frontend web application on the same URL which can be done as follows:

To deploy WordPress on Windows, it is advised to use XAMPP as it consists of a built-in server and also built-in MYSQL with PHP which helps in easy settings.

But XAMPP uses the Rewrite module, we have to set an HTACCESS file for each subdirectory.

e.g# if an angular application needs to be shown on /demo when the WordPress site is deployed then the demo folder should have an HTACCESS file which will have the following configuration:

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

In windows, the files to handle apache configuration are broken into many config files which deal with those functions appropriately. The main file which handles the configuration is httpd.conf.

Click xampp config and select httpd.conf to see the main file.

In the httpd you must enable the Rewrite module for apache and add these lines in the directory within Virtualhost for the site you want to run.

<directory />
  Options All
  AllowOverride All
</directory>

it should be like this for each virtual host, set this property only in which you want the angular application to work alongside WordPress:

or you can define outside like this, if your only hosting single site :

Now restart Xampp and check your site. You would have a WordPress website along with your /demo Angular Project. Now you can have a sales funnel on the WordPress website and complete a demo application for your leads.