How to add header config using staticfile_buildpack for Angular app?

1.9k Views Asked by At

I created a build using ng build --prod. It created a dist/AppName folder and inside it I have my manifest.yml and Staticfile. When I do cf push inside dist/AppName everything is working fine but I wanted to add a header config of add_header 'Access-Control-Allow-Origin' '*' (nginx config) but I don't know how to do it in Staticfile. I got some lead like using location_include but the documentation about it is kinda confusing. Could someone help or guide me on how to do this. Thanks.

1

There are 1 best solutions below

0
On BEST ANSWER

I managed to solve my issue by looking at the sameple staticfile-buildpack fixtures on github. When I do ng build --prod Angular put the compiled code in dist/AppName. Inside dist folder I put the manifest.yml, Staticfile and added a new folder nginx/conf/includes. The new folder is where I put my headers.conf, which contains the add_header nginx directive.

so dist has the following files and folders

dist
  |_ AppName/
  |_ nginx/
  |   |_ conf
  |       |_ includes
  |           |_ headers.conf 
  |_ manifest.yml
  |_ Staticfile 

Staticfile has the following content:

pushstate: enabled
root: AppName
location_include: includes/*.conf

manifest.yml:

---
applications:
- name: appname-dev
  memory: 512M
  disk_quota: 1024M
  instances: 1
  timeout: 90
  buildpack: staticfile_buildpack

I did the cf push inside dist folder