Help/Advice on serving admin within Angular app

Questions and Answers Strapi Admin
1

Hi all,

I’m after a bit of advice/pointers in the right direction. Firstly Strapi looks awesome, it’s exactly what i need. I have an Angular 9 cli app with will be used as an internal documentation website (our apps are written in Angular so this is why the docs site is in angular) - I’ve followed the guide and got a demo Strapi app built and deployed to Google Cloud apps. I can hit the url with postman and retrieve data etc. Which is fine for demo purposes.

But for me, what i need is to be able to serve the admin panel on the same domain as my docs site, so for example, if I had my Angular app running on port 80 http://mydocs.com, I’d want to be able to login and write documentation from /admin

I can’t seem to see a guide on how to achieve this easily, I’m happy to leave the database in GCloud, but the entire Strapi react frontend is also coming from there, so I don’t really want to be navigating off or telling internal users to visit an ugly url like https://my-documentation.nw.r.appspot.com (the glcoud url).

Can Strapi and an Angular app be deployed from one repo? Will there be an issue with ports?

After updating my my app.yaml file locally with the values for the server, i cannot start Strapi locally.
The values work on the deployed glcoud server fine, but I’d like to start Strapi locally (from within an Angular app ideally), while pointing to my remote postgres db on Gcloud. I’m getting the following error though since i have updated the yaml file: error Error: connect ENOENT /cloudsql/undefined/.s.PGSQL.5432 at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1106:14)

I appreciate there’s some noobish questions there, but when it get to the backend stuff, i’m a bit unclear on where to even start. Essentially I want to be able to host a docs site, built in Angular 9, where i can navigate to /admin and it will show the front end of the Strapi app. Sound simple in my head :smile: but i’m struggling!

Any help is much appreciated!

Edit
The more i have thought about this the more i think this will have to be served as 2 different apps, with our internal dns resolving the 2 urls to the 2 apps. ie. the angular app on /docs and the Strapi admin app served from /docs/admin

2

No problem, that’s what the forums are for :wink:

Short answer to this is yes and no, Strapi itself is headless and should remain so when deploying, if you mean to serve the Angular application from the Strapi public folder, the answer to that is, you shouldn’t.

However yes you can deploy both to the same server (I’m not familiar with GCP-AE, if it functions like Heroku then you should have multiple apps, one for each service). What you need is a proxy application such as Nginx, HAProxy, Caddy, Traefik, ect. We have a few guides on our documentation for the usage you are looking for. It’s what we call sub-folder split, for example here is an Nginx Config that achieves what you are looking for: Strapi’s documentation | Strapi Documentation

What this does is:

  • Listens on port 80 HTTP, redirects users to port 443 HTTPS (SSL)
  • Uses the server_name to direct traffic (thus no issue with ports, as Nginx is what is listening on port 80)
  • Accepts traffic for example.com
  • Routes all traffic for example.com/api to the Strapi backend server
  • Routes traffic for example.com/dashboard to the Strapi Admin panel
  • Routes all other traffic to your Angular application being served as a static build (meaning you used npm run build and point it at the Angular build folder)

The last point could also be a proxy if your Angular application is server-side rendered, however that goes beyond the scope of the Strapi related documentation hence the warning in the docs about frontend modifications to that config.

Keep in mind, Strapi needs to be aware there is a proxy in front of it, see: Strapi’s documentation | Strapi Documentation

I hope that’s clear, if not please do let me know.

3

Did you ever figure out how to get a Strapi backend and an Angular frontend running on GCP? I’m trying to do so, and can’t figure out how…