angularnginxcloud-foundrypcfdev

How to add header config using staticfile_buildpack for Angular app?


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.


Solution

  • 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