I’m developing a web application for a friend who needs an online portfolio. As a learning experience, I’m trying to do the front-end with AngularJS and using WordPress as a backend with the official API plugin. It works really well, but there’s a problem.

I can’t seem to completely hide the WordPress frontend. There might be something I’m missing, but I don’t know how to set my website to exclusively use the Angular app for the frontend. Things I have tried:

  • Modifying the .htaccess file to include index.html (the starting file of my Angular app) and index.php secondarily in order to keep being able to use the API calls from my app. This causes some problems: when I’ve navigated to, say, mysite.com/page-one.html and I reload the page, the WP site is loaded instead of my Angular app.
  • Redirecting all pages (that are not within my app) to index.html.

These don’t seem like robust solutions to me at all. I need to remove the WordPress site and only use WP for the API. Am I missing something?


Update

I have changed my focus on this question and have realized that I don’t need to hide the WordPress front-end but rather actually use it. I’ll answer the question, and maybe it’ll inspire other, better answers by more knowledgeable people.

1 Answer
1

Note: I am posting an answer to my own question with hopes of it being useful for developers trying to solve the same problem that my initial query proposes.


As it turns out, I was viewing this with the wrong lens. The solution was not to add my entire AngularJS app and use that while trying to disguise the WordPress front-end and themes. The solution is actually to create a WordPress theme that uses my AngularJS app as a static starting page, and build the app thereon.

I was inspired by this article: https://1fix.io/angularjs-wp-rest-api/

I can just build an AngularJS app and base it on the index.php file of a new theme. It was as easy as that. I guess I just couldn’t see the forest for the trees.

Leave a Reply

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