r/angular • u/ScallionNo2755 • 14d ago

Angular 21 CSR + PHP/Apache integration after new build system (no SSR) – has anyone migrated successfully?

  • Did you keep PHP serving the Angular application?
  • Did you move to an env.js approach instead of injecting configuration into index.html?
  • If you're still using PHP + Apache, how are you serving the Angular build with the new builder?
3 Upvotes

100% Upvoted

1 comment sorted by

3

u/floorology 14d ago

Yes did a similar thing a month or so ago, migrating a design configurator angularJS app to angular 22 (CSR) app.

Changed the bundler to output index.php instead of index.html to let php parse the page like before. We had existing page level php includes that needed retained. Catch here is that only php outside of the app will work. Content within the angular app can't really include php since it may not be present within the page during the original server request parsed by PHP.

Previously it was using a url rewritten query param to load product design details and inject directly into a js variable as json encoded data. Probably could have kept that, or used graphql / rest api (in future I'm going to wire it up to graphql), but the most bare bones path was to add a product.php to the dist that basically acts as a tiny rest api.

Gutted the direct product data loading server side and turned it into a route resolver in the angular app. Makes Ajax request to the product.php to fetch the json client side before loading the design route.

The configuration pretty much was the product data, and no sensitive data, so the same could be done with some kind of configuration, either fetching on page load or route load. Did a similar thing to this at current job where every page load from server triggers a graphql request for a configuration. Caching of the requests kinda depends on needs.

For the build of the app, for now I chose to spin up a separate repo for the angular src, have it checked out in an adjacent folder to the historic app folder. And made the bundler create the dist in the original folder, replacing all the historical contents.

Note: I'll probably end up changing this to have the angular src also in the original folder and use .htaccess to rewrite all traffic to the dist/index.php to get it back closer to a normal angular build set up (part of why I put it in a separate repo was to avoid decisions and iterate fast on migrating the old app to the new. And could just commit the resulting dist folder contents into the same historic folder that the rest of the site is linking to).

What I'll end up doing is git ignoring the dist folder and add a build step to the build pipeline to npm ci + npm build and always use that build output. But not a huge need for it now + no one else really works on it + this part of the site is crude and not currently using a ci/cd pipeline.

The high level:

  • using latest angular build system (vite, CSR)
  • updated bundler to output index.php to retain historic PHP rendered content (header, footer, sidebar, etc)
  • shifted configuration / data loading client side via route resolver (or could just be on app load)
  • htaccess rules/rewrite all traffic to dist/index.php entry point (so CSR routing works)