CODEWITHSUNDEEP
angularwordpressapache.htaccess
Amarjit Singh
Amarjit Singh

Reputation: 2154

install wordpress alongside angular

I have an angular project running with apache server. The apache document root is /var/www/angular/dist/my-project. in this folder I have created a symlink that references to /var/www/wordpress directory in which I have installed the wordpress. In "000-default.conf" file I have 

RewriteCond %{REQUEST_URI} !^/index.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !\.(json|css|gif|ico|jpg|js|png|swf|txt|svg|woff|ttf|eot)$
#added this line to make the wordpress work
RewriteCond %{REQUEST_URI} !^/blog/
RewriteRule . /index.html [L]

But the code above is not working. I always get angular projects index.html

However If I go to domain.com/blog It again returns index.html. But this index.html page does not shows 404 as it does if I type any random url.

Upvotes: 1

Views: 644

Answers (1)

WarriorRocker
WarriorRocker

Reputation: 166

Although this may not answer your direct question perhaps I can provide an alternate solution.

Using Xo for Angular you may be able to incorporate the blog, powered by WordPress, within your existing Angular App and serve it as an integrated application.

https://wordpress.org/plugins/xo-for-angular/

Xo for Angular can help write your rewrites for you to either load the Angular theme through WordPress or directly for all front-end requests.

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^xo-api/(.*)$ /index.php [NC,L]
    RewriteRule ^wp-json/(.*)$ /index.php [NC,L]
    RewriteRule ^/?$ /wp-content/themes/angular-xo-material/dist/index.html [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /wp-content/themes/angular-xo-material/dist/index.html [L]
</IfModule>

Documentation (work in progress): https://angularxo.io/

Plugin github: https://github.com/WarriorRocker/angular-xo-core

Example theme: https://github.com/WarriorRocker/angular-xo-material

It should be possible to copy an existing Angular App to a new theme and let the Xo for Angular plugin load and direct front-end requests to the Angular index. Then you can use the Xo API to retrieve pages and posts within your WordPress. Xo for Angular can also generate dynamic page routes if you decide to let Xo and WordPress take control.

Full disclosure I am the author of the above plugin and theme.

Let me know if you think this could work for you, thanks!

Upvotes: 1

Related Questions